@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Updated Color Variables - Dark Theme */
  --background: #040A17;
  --foreground: hsl(210, 40%, 98%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(220, 25%, 8%);
  --muted-foreground: hsl(215, 20%, 65%);
  --border: hsl(220, 15%, 20%);
  
  /* Primary Colors - Updated to match the new color scheme */
  --color-primary: hsl(217, 91%, 60%); /* Primary blue */
  --color-primary-50: hsl(217, 91%, 95%); /* Very light blue */
  --color-primary-100: hsl(217, 91%, 90%); /* Light blue */
  --color-primary-500: hsl(217, 91%, 60%); /* Primary blue */
  --color-primary-600: hsl(217, 91%, 55%); /* Slightly darker blue */
  --color-primary-700: hsl(217, 91%, 50%); /* Darker blue */
  --color-primary-800: hsl(217, 91%, 45%); /* Much darker blue */
  --color-primary-900: hsl(217, 91%, 40%); /* Darkest blue */
  
  /* Secondary Colors - Complementary to primary */
  --color-secondary: hsl(217, 91%, 60%); /* Primary blue */
  --color-secondary-50: hsl(217, 91%, 95%); /* Very light blue */
  --color-secondary-100: hsl(217, 91%, 90%); /* Light blue */
  --color-secondary-500: hsl(217, 91%, 60%); /* Primary blue */
  --color-secondary-600: hsl(217, 91%, 55%); /* Slightly darker blue */
  --color-secondary-700: hsl(217, 91%, 50%); /* Darker blue */
  
  /* Accent Colors - Keeping emerald for contrast */
  --color-accent: #10B981; /* emerald-500 */
  --color-accent-50: #ECFDF5; /* emerald-50 */
  --color-accent-100: #D1FAE5; /* emerald-100 */
  --color-accent-500: #10B981; /* emerald-500 */
  --color-accent-600: #059669; /* emerald-600 */
  --color-accent-700: #047857; /* emerald-700 */
  
  /* Background Colors - Dark theme */
  --color-background: #040A17; /* Dark background */
  --color-surface: hsl(220, 25%, 12%); /* Slightly lighter surface */
  --color-surface-100: hsl(220, 25%, 15%); /* Surface variant */
  --color-surface-200: hsl(220, 25%, 18%); /* Lighter surface variant */
  
  /* Text Colors - Light text on dark background */
  --color-text-primary: hsl(210, 40%, 98%); /* Light foreground */
  --color-text-secondary: hsl(215, 20%, 65%); /* Muted foreground */
  --color-text-tertiary: hsl(215, 20%, 50%); /* More muted text */
  
  /* Status Colors - Maintaining visibility on dark theme */
  --color-success: #10B981; /* emerald-500 */
  --color-success-50: #ECFDF5; /* emerald-50 */
  --color-success-100: #D1FAE5; /* emerald-100 */
  
  --color-warning: #F59E0B; /* amber-500 - adjusted for dark theme */
  --color-warning-50: #FFFBEB; /* amber-50 */
  --color-warning-100: #FEF3C7; /* amber-100 */
  
  --color-error: #EF4444; /* red-500 - adjusted for dark theme */
  --color-error-50: #FEF2F2; /* red-50 */
  --color-error-100: #FEE2E2; /* red-100 */
  
  /* Border Colors - Dark theme */
  --color-border: hsl(220, 15%, 20%); /* Dark border */
  --color-border-light: hsl(220, 15%, 25%); /* Lighter dark border */
  
  /* Shadow Values - Adjusted for dark theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  
  /* Transition Values */
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 400ms ease-out;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html {
  font-family: 'Inter', sans-serif;
}

body {
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}

code, pre {
  font-family: 'JetBrains Mono', monospace;
}

.btn-primary{
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 204 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(0 68 153 / var(--tw-bg-opacity, 1));
}

.card{
  border-radius: 0.5rem;
  padding: 1.5rem;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.text-gradient {
  background: linear-gradient(to right, var(--primary), var(--color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.border-border{
  --tw-border-opacity: 1;
  border-color: hsl(220 15% 20% / var(--tw-border-opacity, 1));
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-accent\/20{
  background-color: rgb(16 185 129 / 0.2);
}

.bg-background{
  --tw-bg-opacity: 1;
  background-color: rgb(4 10 23 / var(--tw-bg-opacity, 1));
}

.bg-primary\/20{
  background-color: hsl(217 91% 60% / 0.2);
}

.bg-secondary\/20{
  background-color: hsl(217 91% 60% / 0.2);
}

.bg-surface{
  --tw-bg-opacity: 1;
  background-color: hsl(220 25% 12% / var(--tw-bg-opacity, 1));
}

.bg-surface-100{
  --tw-bg-opacity: 1;
  background-color: hsl(220 25% 15% / var(--tw-bg-opacity, 1));
}

.bg-surface-200{
  --tw-bg-opacity: 1;
  background-color: hsl(220 25% 18% / var(--tw-bg-opacity, 1));
}

.bg-warning\/20{
  background-color: rgb(245 158 11 / 0.2);
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-background{
  --tw-gradient-from: #040A17 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(4 10 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500{
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-500{
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary{
  --tw-gradient-from: hsl(217, 91%, 60%) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(217 91% 60% / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/5{
  --tw-gradient-from: hsl(217 91% 60% / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(217 91% 60% / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-500{
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-primary\/10{
  --tw-gradient-to: hsl(217 91% 60% / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(217 91% 60% / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-surface{
  --tw-gradient-to: hsl(220 25% 12% / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(220, 25%, 12%) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-accent\/5{
  --tw-gradient-to: rgb(16 185 129 / 0.05) var(--tw-gradient-to-position);
}

.to-blue-600{
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-green-600{
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.to-orange-600{
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.to-primary-900{
  --tw-gradient-to: hsl(217, 91%, 40%) var(--tw-gradient-to-position);
}

.to-purple-600{
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-surface-200{
  --tw-gradient-to: hsl(220, 25%, 18%) var(--tw-gradient-to-position);
}

.fill-current{
  fill: currentColor;
}

.text-accent{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-blue-100{
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-primary{
  --tw-text-opacity: 1;
  color: hsl(217 91% 60% / var(--tw-text-opacity, 1));
}

.text-secondary{
  --tw-text-opacity: 1;
  color: hsl(217 91% 60% / var(--tw-text-opacity, 1));
}

.text-text-primary{
  --tw-text-opacity: 1;
  color: hsl(210 40% 98% / var(--tw-text-opacity, 1));
}

.text-text-secondary{
  --tw-text-opacity: 1;
  color: hsl(215 20% 65% / var(--tw-text-opacity, 1));
}

.text-warning{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-background {
  background-color: var(--background);
}

.bg-surface {
  background-color: var(--color-surface);
}
.input-field:focus {
  outline: none;
  border-color: hsl(217, 91%, 60%);
}
#categories-list {
  scrollbar-width: thin;
  scrollbar-color: #888 #23272f; /* thumb color, track color */
}

/* For Webkit browsers */
#categories-list::-webkit-scrollbar {
  width: 8px;
  background: #23272f; /* track color */
}
#categories-list::-webkit-scrollbar-thumb {
  background: #888;    /* thumb color */
  border-radius: 6px;
}
#categories-list::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

#categories-list .category-btn:hover, #categories-list .category-btn.active{
  color: #3c83f6;
}
#categories-list .category-btn.active .badge-success{
  opacity: 1;
}