/* Design Tokens for Sneh Herbal */
:root {
  /* Color Tokens */
  --color-herbal-50: #f0fdf4;
  --color-herbal-100: #dcfce7;
  --color-herbal-200: #bbf7d0;
  --color-herbal-300: #86efac;
  --color-herbal-400: #4ade80;
  --color-herbal-500: #22c55e;
  --color-herbal-600: #16a34a;
  --color-herbal-700: #15803d;
  --color-herbal-800: #166534;
  --color-herbal-900: #14532d;

  --color-gold-50: #fffbeb;
  --color-gold-100: #fef3c7;
  --color-gold-200: #fde68a;
  --color-gold-300: #fcd34d;
  --color-gold-400: #fbbf24;
  --color-gold-500: #f59e0b;
  --color-gold-600: #d97706;
  --color-gold-700: #b45309;
  --color-gold-800: #92400e;
  --color-gold-900: #78350f;

  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;

  --color-sage-50: #f6f7f6;
  --color-sage-100: #e3e7e3;
  --color-sage-200: #c7d2c7;
  --color-sage-300: #a3b4a3;
  --color-sage-400: #7d937d;
  --color-sage-500: #5f7a5f;
  --color-sage-600: #4a614a;
  --color-sage-700: #3d4e3d;
  --color-sage-800: #334033;
  --color-sage-900: #2c352c;

  /* Typography Tokens */
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-display: 'Poppins', system-ui, sans-serif;
  --font-family-serif: 'Playfair Display', serif;

  --font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --font-size-fluid-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
  --font-size-fluid-5xl: clamp(3rem, 2.4rem + 3vw, 4rem);

  /* Spacing Tokens */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  /* Border Radius Tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Shadow Tokens */
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-large: 0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 2px 10px -2px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(34, 197, 94, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(245, 158, 11, 0.3);

  /* Animation Tokens */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-Index Tokens */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* Dark mode tokens (for future implementation) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-herbal-50: #14532d;
    --color-herbal-100: #166534;
    --color-herbal-200: #15803d;
    --color-herbal-300: #16a34a;
    --color-herbal-400: #22c55e;
    --color-herbal-500: #4ade80;
    --color-herbal-600: #86efac;
    --color-herbal-700: #bbf7d0;
    --color-herbal-800: #dcfce7;
    --color-herbal-900: #f0fdf4;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --transition-bounce: 0ms;
  }
}