@tailwind components;
@tailwind utilities;
/* 
/* stylelint-disable */
/* 
/* 
/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}
/* Dark mode scrollbar */
  ::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(75, 85, 99, 0.7);
  }
/* CRITICAL CSS MARKER - Above styles are critical for above-the-fold */
  /* Color Theme Variables - CRITICAL for theme switching without flash */
/* CRITICAL CSS MARKER - Above theme variables are critical */
/* Hero Section Gradient - CRITICAL for above-the-fold */
/* NON-CRITICAL CSS MARKER - Below styles can be loaded asynchronously */
.conversion-gradient {
  background: linear-gradient(135deg, hsl(var(--theme-primary)) 0%, hsl(var(--theme-secondary)) 100%);
}
.clothing-gradient {
  background: linear-gradient(135deg, hsl(var(--theme-primary)) 0%, hsl(var(--theme-secondary)) 100%);
}
.shoe-gradient {
  background: linear-gradient(135deg, hsl(var(--theme-primary)) 0%, hsl(var(--theme-secondary)) 100%);
}
.scientific-gradient {
  background: linear-gradient(135deg, hsl(var(--theme-primary-dark)) 0%, hsl(var(--theme-primary)) 100%);
}
.everyday-gradient {
  background: linear-gradient(135deg, hsl(var(--theme-secondary)) 0%, hsl(var(--theme-secondary-light)) 100%);
}
/* Keep original gradients for home page conversion category cards */
.home-general-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.home-scientific-gradient {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.home-everyday-gradient {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.glass-effect {
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.95);
}
/* Themed Color Utilities */
  .bg-theme-secondary {
    background-color: hsl(var(--theme-secondary));
  }
  .bg-theme-secondary-light {
    background-color: hsl(var(--theme-secondary-light));
  }
  .text-theme-secondary {
    color: hsl(var(--theme-secondary));
  }
  .text-theme-secondary-light {
    color: hsl(var(--theme-secondary-light));
  }
  .border-theme-primary {
    border-color: hsl(var(--theme-primary));
  }
  .to-theme-primary-dark {
    --tw-gradient-to: hsl(var(--theme-primary-dark)) var(--tw-gradient-to-position);
  }
  .hover\:from-theme-primary-dark:hover {
    --tw-gradient-from: hsl(var(--theme-primary-dark)) var(--tw-gradient-from-position);
    --tw-gradient-to: hsl(var(--theme-primary-dark) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .hover\:to-theme-secondary-dark:hover {
    --tw-gradient-to: hsl(var(--theme-secondary-dark)) var(--tw-gradient-to-position);
  }
  .bg-theme-highlight {
    background-color: hsl(var(--theme-highlight-bg));
  }
  .text-theme-highlight {
    color: hsl(var(--theme-highlight));
  }
  .hover\:bg-theme-highlight:hover {
    background-color: hsl(var(--theme-highlight-bg));
  }
  .focus\:bg-theme-highlight:focus {
    background-color: hsl(var(--theme-highlight-bg));
  }
  .hover-bg-theme-primary-alpha:hover {
    background-color: hsl(var(--theme-primary) / 0.1);
  }