/* Design tokens — the single source of truth for color, type, spacing, shape.
   Nothing else in the CSS layer may hardcode a color or a radius. */
:root {
  --bg: #f4f3ee;
  --surface: #FFFFFF;
  --surface-2: #F5EFE2;
  --border: #E8DFCC;

  --text: #1E2B22;
  --text-muted: #6E7A6A;

  --primary: #1F3D2B;
  --primary-hover: #2B4F39;
  --primary-soft: #E4ECE3;
  --on-primary: #FBF7F0;

  --sale: #A8433A;
  --sale-bg: #F7E3DD;

  --success: #2F6B4F;
  --warning: #8A6A1F;
  --warning-bg: #F6EDD4;
  --danger: #A8433A;

  --shadow-sm: 0 1px 2px rgba(30,43,34,.05), 0 1px 3px rgba(30,43,34,.06);
  --shadow-md: 0 4px 10px rgba(30,43,34,.06), 0 10px 24px rgba(30,43,34,.08);
  --shadow-lg: 0 10px 24px rgba(30,43,34,.10), 0 24px 48px rgba(30,43,34,.12);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --header-h: 128px;    /* two-row sticky header: logo row + search row */
  --card-height: 220px; /* fixed brand card height — prevents pagination jump */
  --content-max: 1120px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14201A; --surface: #1C2A22; --surface-2: #23332A; --border: #33443A;
    --text: #F2EDE2; --text-muted: #9AAA9C;
    --primary: #6FA987; --primary-hover: #85BC9C; --primary-soft: rgba(111,169,135,.16);
    --on-primary: #101A14;
    --sale: #E58479; --sale-bg: rgba(229,132,121,.15); --success: #6FA987;
    --warning: #E0C177; --warning-bg: rgba(224,193,119,.14); --danger: #E58479;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
    --shadow-md: 0 4px 10px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.28);
    --shadow-lg: 0 10px 24px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.34);
  }
}

:root[data-theme="dark"] {
  --bg: #14201A; --surface: #1C2A22; --surface-2: #23332A; --border: #33443A;
  --text: #F2EDE2; --text-muted: #9AAA9C;
  --primary: #6FA987; --primary-hover: #85BC9C; --primary-soft: rgba(111,169,135,.16);
  --on-primary: #101A14;
  --sale: #E58479; --sale-bg: rgba(229,132,121,.15); --success: #6FA987;
  --warning: #E0C177; --warning-bg: rgba(224,193,119,.14); --danger: #E58479;
}

@media (min-width: 720px) {
  :root { --header-h: 136px; --card-height: 232px; }
}