/* =========================================
   DESIGN TOKENS — Recipe to Grocery List
   Versi: 2.0 | 2026 — Premium Redesign
   ========================================= */

:root {
  /* ── COLOR PRIMITIVES ── */
  /* Emerald (brand) */
  --emerald-50:  #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7; --emerald-400: #34d399; --emerald-500: #10b981;
  --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46;
  --emerald-900: #064e3b; --emerald-950: #022c22;

  /* Neutral (slate-based, more modern than stone) */
  --neutral-50:  #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b;
  --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b;
  --neutral-900: #0f172a; --neutral-950: #020617;

  /* Accent colors */
  --amber-50:  #fffbeb; --amber-100: #fef3c7; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706;
  --rose-50:   #fff1f2; --rose-100:  #ffe4e6; --rose-400: #fb7185;  --rose-500: #f43f5e;  --rose-600: #e11d48;
  --violet-50: #f5f3ff; --violet-100:#ede9fe; --violet-400:#a78bfa;  --violet-500:#8b5cf6; --violet-600:#7c3aed;
  --blue-50:   #eff6ff; --blue-100:  #dbeafe; --blue-400: #60a5fa;  --blue-500: #3b82f6;  --blue-600: #2563eb;

  /* ── BORDER WIDTHS (missing variables — bug fix) ── */
  --border-thin:   1px;
  --border-normal: 1.5px;
  --border-thick:  2px;

  /* ── SEMANTIC COLOR TOKENS ── */
  --color-bg:             #f8fafc;
  --color-bg-subtle:      #f1f5f9;
  --color-bg-overlay:     rgb(15 23 42 / 0.06);
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-glass:  rgb(255 255 255 / 0.8);

  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;
  --color-border-brand:   #6ee7b7;

  --color-text:           #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted:     #94a3b8;
  --color-text-disabled:  #cbd5e1;
  --color-text-inverse:   #ffffff;
  --color-text-brand:     var(--emerald-600);

  --color-brand:          var(--emerald-500);
  --color-brand-hover:    var(--emerald-600);
  --color-brand-active:   var(--emerald-700);
  --color-brand-subtle:   var(--emerald-50);
  --color-brand-muted:    var(--emerald-100);

  --color-focus-ring:     var(--emerald-500);

  /* ── GRADIENTS ── */
  --gradient-brand:       linear-gradient(135deg, var(--emerald-500) 0%, #06b6d4 100%);
  --gradient-brand-soft:  linear-gradient(135deg, var(--emerald-50) 0%, #ecfeff 100%);
  --gradient-hero:        linear-gradient(135deg, #f0fdf4 0%, #ecfeff 50%, #f0f9ff 100%);
  --gradient-card-hover:  linear-gradient(135deg, var(--emerald-50) 0%, #f0f9ff 100%);
  --gradient-dark-hero:   linear-gradient(135deg, #0f2027 0%, #0f1a2e 50%, #0a1628 100%);
  --gradient-nav-active:  linear-gradient(135deg, var(--emerald-500) 0%, #06b6d4 100%);

  /* ── SEMANTIC STATUS ── */
  --success-bg:     #ecfdf5; --success-border: #6ee7b7; --success-text: #047857; --success-icon: #10b981;
  --warning-bg:     #fffbeb; --warning-border: #fcd34d; --warning-text: #92400e; --warning-icon: #f59e0b;
  --error-bg:       #fff1f2; --error-border:   #fda4af; --error-text:   #be123c;  --error-icon:   #f43f5e;
  --info-bg:        #eff6ff; --info-border:    #93c5fd; --info-text:    #1d4ed8;  --info-icon:    #3b82f6;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-2xs:  0.625rem;
  --text-xs:   0.694rem;
  --text-sm:   0.833rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.333rem;
  --text-xl:   1.777rem;
  --text-2xl:  2.369rem;
  --text-3xl:  3.157rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;

  /* ── SPACING ── */
  --space-px:  1px;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --space-2:   0.5rem;
  --space-2-5: 0.625rem;
  --space-3:   0.75rem;
  --space-3-5: 0.875rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── SIZING ── */
  --size-touch-min:         2.75rem;
  --size-touch-comfortable: 3rem;
  --icon-xs:  0.75rem;
  --icon-sm:  1rem;
  --icon-md:  1.25rem;
  --icon-lg:  1.5rem;
  --icon-xl:  2rem;
  --icon-2xl: 3rem;

  /* ── BORDER RADIUS ── */
  --radius-none:  0;
  --radius-sm:    0.3rem;
  --radius-md:    0.6rem;
  --radius-lg:    0.875rem;
  --radius-xl:    1.25rem;
  --radius-2xl:   1.75rem;
  --radius-3xl:   2.5rem;
  --radius-full:  9999px;

  /* ── SHADOW ── */
  --shadow-none: none;
  --shadow-xs:
    0 1px 2px rgb(0 0 0 / 0.03);
  --shadow-sm:
    0 1px 3px rgb(0 0 0 / 0.05),
    0 1px 2px rgb(0 0 0 / 0.03);
  --shadow-md:
    0 4px 6px  rgb(0 0 0 / 0.04),
    0 2px 4px  rgb(0 0 0 / 0.04),
    0 10px 15px rgb(0 0 0 / 0.05);
  --shadow-lg:
    0 10px 15px rgb(0 0 0 / 0.05),
    0 4px  6px  rgb(0 0 0 / 0.04),
    0 20px 25px rgb(0 0 0 / 0.04);
  --shadow-xl:
    0 20px 25px rgb(0 0 0 / 0.06),
    0 10px 10px rgb(0 0 0 / 0.04),
    0 40px 50px rgb(0 0 0 / 0.06);
  --shadow-2xl:
    0 25px 50px rgb(0 0 0 / 0.10),
    0 12px 20px rgb(0 0 0 / 0.06);
  --shadow-inner:
    inset 0 2px 4px rgb(0 0 0 / 0.05);
  --shadow-brand:
    0 4px 14px rgb(16 185 129 / 0.30),
    0 2px 6px  rgb(16 185 129 / 0.15);
  --shadow-brand-hover:
    0 8px 25px rgb(16 185 129 / 0.40),
    0 4px 10px rgb(16 185 129 / 0.20);
  --shadow-brand-glow:
    0 0 0 4px rgb(16 185 129 / 0.15),
    0 8px 25px rgb(16 185 129 / 0.35);

  /* ── MOTION ── */
  --duration-instant:    50ms;
  --duration-fast:      150ms;
  --duration-normal:    250ms;
  --duration-slow:      400ms;
  --duration-deliberate: 600ms;

  --ease-default: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --transition-fast:   var(--duration-fast)   var(--ease-default);
  --transition-base:   var(--duration-normal)  var(--ease-default);
  --transition-slow:   var(--duration-slow)   var(--ease-out);
  --transition-spring: var(--duration-normal)  var(--ease-spring);

  /* ── Z-INDEX ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:             #0a0f1e;
  --color-bg-subtle:      #111827;
  --color-bg-overlay:     rgb(255 255 255 / 0.03);
  --color-surface:        #131d2e;
  --color-surface-raised: #1a2540;
  --color-surface-glass:  rgb(19 29 46 / 0.85);

  --color-border:         #1e2d45;
  --color-border-strong:  #253552;
  --color-border-brand:   #065f46;

  --color-text:           #f0f6ff;
  --color-text-secondary: #8ea3c0;
  --color-text-muted:     #4d6480;
  --color-text-disabled:  #253552;
  --color-text-brand:     var(--emerald-400);

  --color-brand-subtle:  rgb(6 78 59 / 0.25);
  --color-brand-muted:   rgb(6 78 59 / 0.45);

  --gradient-brand-soft:  linear-gradient(135deg, rgb(6 78 59 / 0.3) 0%, rgb(8 51 68 / 0.3) 100%);
  --gradient-hero:        linear-gradient(135deg, #0a1628 0%, #0d1f38 50%, #0a1628 100%);
  --gradient-card-hover:  linear-gradient(135deg, rgb(6 78 59 / 0.1) 0%, rgb(8 51 68 / 0.1) 100%);
  --gradient-dark-hero:   linear-gradient(135deg, #060d1a 0%, #0a1628 50%, #071020 100%);

  --shadow-sm:   0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md:   0 4px 6px rgb(0 0 0 / 0.5), 0 10px 15px rgb(0 0 0 / 0.4);
  --shadow-lg:   0 10px 20px rgb(0 0 0 / 0.6), 0 4px 6px rgb(0 0 0 / 0.5);
  --shadow-xl:   0 20px 40px rgb(0 0 0 / 0.7), 0 10px 10px rgb(0 0 0 / 0.5);
  --shadow-2xl:  0 30px 60px rgb(0 0 0 / 0.8);
  --shadow-brand: 0 4px 14px rgb(16 185 129 / 0.25), 0 2px 6px rgb(16 185 129 / 0.15);
  --shadow-brand-hover: 0 8px 25px rgb(16 185 129 / 0.35), 0 4px 10px rgb(16 185 129 / 0.20);
  --shadow-brand-glow: 0 0 0 4px rgb(16 185 129 / 0.12), 0 8px 25px rgb(16 185 129 / 0.30);

  --success-bg:    rgb(6 78 59 / 0.2);  --success-border: #065f46;
  --warning-bg:    rgb(120 53 15 / 0.2); --warning-border: #92400e;
  --error-bg:      rgb(159 18 57 / 0.2); --error-border: #be123c;
  --info-bg:       rgb(29 78 216 / 0.2); --info-border: #1d4ed8;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}