/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* ══════════════════════════════════════════════════════════════════════════
     THEME-INDEPENDENT TOKENS
     ══════════════════════════════════════════════════════════════════════════ */

  /* Primary accent — Terracotta/Coral */
  --clay:           #e07856;
  --clay-hover:     #cf6447;
  --sage:           #6366f1;
  --sage-hover:     #4f46e5;
  --mustard:        #f59e0b;
  --orange:         #f97316;
  --purple:         #8b5cf6;
  --lavender:       #a78bfa;
  --lavender-subtle: rgba(167, 139, 250, 0.12);

  /* Favorites — Copper */
  --favorite:       #b87333;
  --favorite-subtle: rgba(184, 115, 51, 0.15);
  --favorite-hover: #a66429;

  /* Spice Rack — 8 food-world accent colors */
  --spice-0: #065f46;
  --spice-1: #7c3aed;
  --spice-2: #0891b2;
  --spice-3: #ea580c;
  --spice-4: #ca8a04;
  --spice-5: #be185d;
  --spice-6: #1d4ed8;
  --spice-7: #047857;

  /* Shopping category accent colors */
  --cat-veg:   #059669;
  --cat-fruit: #ea580c;
  --cat-meat:  #dc2626;
  --cat-dairy: #ca8a04;
  --cat-grain: #92400e;
  --cat-spice: #7c3aed;
  --cat-can:   #0891b2;
  --cat-bake:  #b45309;
  --cat-drink: #2563eb;
  --cat-snack: #e11d48;
  --cat-frost: #0ea5e9;
  --cat-house: #64748b;
  --cat-care:  #c026d3;
  --cat-pet:   #65a30d;
  --cat-misc:  #52525b;

  /* Semantic (base values) */
  --success:        #10b981;
  --warning:        #f59e0b;
  --error:          #ef4444;
  --strength-good:  #22c55e;

  /* Typography */
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-display:   'Inter', system-ui, sans-serif;

  /* Scale — 8px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Font sizes */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* Navigation dimensions */
  --bottom-nav-h:   72px;
  --topbar-h:       60px;
  --nav-rail-w:     72px;
  --list-panel-w:   360px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --safe-top:       env(safe-area-inset-top, 0px);
  --safe-left:      env(safe-area-inset-left, 0px);
  --safe-right:     env(safe-area-inset-right, 0px);

  /* Transition */
  --t-fast:   150ms ease-out;
  --t-base:   220ms ease-out;
  --t-slow:   320ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ══════════════════════════════════════════════════════════════════════════
     DARK THEME (Default)
     ══════════════════════════════════════════════════════════════════════════ */

  /* Surfaces */
  --s0:             #050505;
  --s1:             #111111;
  --s2:             #1a1a1a;
  --s3:             #262626;
  --border:         #2a2a2a;
  --border-subtle:  #1f1f1f;

  /* Glass surfaces */
  --surface-glass:  rgba(17, 17, 17, 0.88);
  --surface-glass-border: rgba(255, 255, 255, 0.06);

  /* Text */
  --ink:            #ffffff;
  --ink-secondary:  #a1a1aa;
  --ink-muted:      #71717a;
  --ink-on-clay:    #000000;

  /* Overlay & backdrop */
  --overlay-color:  0, 0, 0;
  --backdrop:       rgba(0, 0, 0, 0.5);
  --backdrop-heavy: rgba(0, 0, 0, 0.7);

  /* Subtle accent variants */
  --clay-subtle:    rgba(224, 120, 86, 0.12);
  --sage-subtle:    rgba(99, 102, 241, 0.12);
  --must-subtle:    rgba(245, 158, 11, 0.12);
  --accent-glow:    rgba(224, 120, 86, 0.3);

  /* Card & component borders */
  --card-border:    rgba(255, 255, 255, 0.06);
  --card-border-hover: rgba(224, 120, 86, 0.25);

  /* Focus rings */
  --focus-ring:     rgba(224, 120, 86, 0.25);
  --focus-ring-strong: rgba(224, 120, 86, 0.4);

  /* Danger/error backgrounds */
  --danger-bg:       rgba(239, 68, 68, 0.12);
  --danger-bg-hover: rgba(239, 68, 68, 0.18);

  /* Hover states */
  --hover-overlay:  rgba(255, 255, 255, 0.04);
  --active-overlay: rgba(255, 255, 255, 0.08);

  /* Shadows */
  --shadow-color: 0, 0, 0;
  --shadow-card:    0 2px 8px rgba(var(--shadow-color), 0.3), 0 0 1px rgba(var(--shadow-color), 0.2);
  --shadow-card-hover: 0 8px 32px rgba(var(--shadow-color), 0.4), 0 0 0 1px var(--card-border-hover);
  --shadow-btn:     0 2px 8px rgba(var(--shadow-color), 0.25);
  --shadow-btn-hover: 0 4px 16px rgba(var(--shadow-color), 0.35);
  --shadow-nav:     0 -1px 0 var(--surface-glass-border), 0 -8px 32px rgba(var(--shadow-color), 0.4);
  --shadow-modal:   0 24px 64px rgba(var(--shadow-color), 0.6);
  --shadow-input-focus: 0 0 0 3px var(--focus-ring);
  --shadow-accent:  0 4px 16px rgba(224, 120, 86, 0.25);
  --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.08);
  --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.1);

  /* Today highlight */
  --today-border:   var(--card-border-hover);
  --today-shadow:   0 1px 3px rgba(224, 120, 86, 0.12), 0 4px 16px rgba(224, 120, 86, 0.1);

  /* ── Aliases for old modular CSS that references --color-* tokens ─── */
  --color-bg:             var(--s0);
  --color-surface:        var(--s1);
  --color-primary:        var(--clay);
  --color-primary-hover:  var(--clay-hover);
  --color-primary-subtle: var(--clay-subtle);
  --color-text:           var(--ink);
  --color-text-muted:     var(--ink-muted);
  --color-text-light:     var(--ink-secondary);
  --color-border:         var(--border);
  --color-error:          var(--error);
  --color-success:        var(--success);
  --color-warning:        var(--warning);
  --color-strength-good:  var(--strength-good);
  --color-danger-bg:      var(--danger-bg);
  --color-accent-mustard: var(--mustard);
  --color-accent-sage:    var(--sage);
  --font-ui:              var(--font-body);
  --radius-sm:            var(--r-sm);
  --radius-md:            var(--r-md);
  --radius-lg:            var(--r-lg);
  --radius-full:          var(--r-pill);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --s0:             #f8f7f4;
  --s1:             #ffffff;
  --s2:             #f3f2ef;
  --s3:             #e8e6e1;
  --border:         #ddd9d2;
  --border-subtle:  #eae8e3;
  --surface-glass:  rgba(248, 247, 244, 0.88);
  --surface-glass-border: rgba(44, 36, 23, 0.08);
  --ink:            #1a1814;
  --ink-secondary:  #57534e;
  --ink-muted:      #78716c;
  --ink-on-clay:    #ffffff;
  --overlay-color:  44, 36, 23;
  --backdrop:       rgba(44, 36, 23, 0.45);
  --backdrop-heavy: rgba(44, 36, 23, 0.6);
  --clay-subtle:    rgba(224, 120, 86, 0.1);
  --sage-subtle:    rgba(99, 102, 241, 0.1);
  --must-subtle:    rgba(245, 158, 11, 0.1);
  --accent-glow:    rgba(224, 120, 86, 0.2);
  --card-border:    rgba(44, 36, 23, 0.08);
  --card-border-hover: rgba(224, 120, 86, 0.3);
  --focus-ring:     rgba(224, 120, 86, 0.2);
  --focus-ring-strong: rgba(224, 120, 86, 0.35);
  --danger-bg:       rgba(239, 68, 68, 0.08);
  --danger-bg-hover: rgba(239, 68, 68, 0.12);
  --hover-overlay:  rgba(44, 36, 23, 0.03);
  --active-overlay: rgba(44, 36, 23, 0.06);
  --shadow-color: 44, 36, 23;
  --shadow-card:    0 2px 8px rgba(var(--shadow-color), 0.06), 0 0 1px rgba(var(--shadow-color), 0.08);
  --shadow-card-hover: 0 8px 32px rgba(var(--shadow-color), 0.1), 0 0 0 1px var(--card-border-hover);
  --shadow-btn:     0 2px 8px rgba(var(--shadow-color), 0.08);
  --shadow-btn-hover: 0 4px 16px rgba(var(--shadow-color), 0.12);
  --shadow-nav:     0 -1px 0 var(--surface-glass-border), 0 -8px 32px rgba(var(--shadow-color), 0.08);
  --shadow-modal:   0 24px 64px rgba(var(--shadow-color), 0.15);
  --shadow-input-focus: 0 0 0 3px var(--focus-ring);
  --shadow-accent:  0 4px 16px rgba(224, 120, 86, 0.15);
  --today-border:   var(--card-border-hover);
  --today-shadow:   0 1px 3px rgba(224, 120, 86, 0.1), 0 4px 16px rgba(224, 120, 86, 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --s0:             #f8f7f4;
    --s1:             #ffffff;
    --s2:             #f3f2ef;
    --s3:             #e8e6e1;
    --border:         #ddd9d2;
    --border-subtle:  #eae8e3;
    --surface-glass:  rgba(248, 247, 244, 0.88);
    --surface-glass-border: rgba(44, 36, 23, 0.08);
    --ink:            #1a1814;
    --ink-secondary:  #57534e;
    --ink-muted:      #78716c;
    --ink-on-clay:    #ffffff;
    --overlay-color:  44, 36, 23;
    --backdrop:       rgba(44, 36, 23, 0.45);
    --backdrop-heavy: rgba(44, 36, 23, 0.6);
    --clay-subtle:    rgba(224, 120, 86, 0.1);
    --sage-subtle:    rgba(99, 102, 241, 0.1);
    --must-subtle:    rgba(245, 158, 11, 0.1);
    --accent-glow:    rgba(224, 120, 86, 0.2);
    --card-border:    rgba(44, 36, 23, 0.08);
    --card-border-hover: rgba(224, 120, 86, 0.3);
    --focus-ring:     rgba(224, 120, 86, 0.2);
    --focus-ring-strong: rgba(224, 120, 86, 0.35);
    --danger-bg:       rgba(239, 68, 68, 0.08);
    --danger-bg-hover: rgba(239, 68, 68, 0.12);
    --hover-overlay:  rgba(44, 36, 23, 0.03);
    --active-overlay: rgba(44, 36, 23, 0.06);
    --shadow-color: 44, 36, 23;
    --shadow-card:    0 2px 8px rgba(var(--shadow-color), 0.06), 0 0 1px rgba(var(--shadow-color), 0.08);
    --shadow-card-hover: 0 8px 32px rgba(var(--shadow-color), 0.1), 0 0 0 1px var(--card-border-hover);
    --shadow-btn:     0 2px 8px rgba(var(--shadow-color), 0.08);
    --shadow-btn-hover: 0 4px 16px rgba(var(--shadow-color), 0.12);
    --shadow-nav:     0 -1px 0 var(--surface-glass-border), 0 -8px 32px rgba(var(--shadow-color), 0.08);
    --shadow-modal:   0 24px 64px rgba(var(--shadow-color), 0.15);
    --shadow-input-focus: 0 0 0 3px var(--focus-ring);
    --shadow-accent:  0 4px 16px rgba(224, 120, 86, 0.15);
    --today-border:   var(--card-border-hover);
    --today-shadow:   0 1px 3px rgba(224, 120, 86, 0.1), 0 4px 16px rgba(224, 120, 86, 0.08);
  }
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  background: var(--s0);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
}

img, svg { display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

a { color: inherit; text-decoration: none; }