/* ============================================================
   DABBA — design tokens (verbatim from DESIGN-SPEC-V1-WEB Ch.2)
   Do not alter hex values. Copy exactly.
   ============================================================ */

:root {
  /* SURFACES — cream */
  --cream-50:  #FDFBF7;   /* lightest surface, cards on cream */
  --cream-100: #FAF6EF;   /* app background (default canvas) */
  --cream-200: #F0E6D9;   /* dividers, card borders */
  --cream-300: #DFCDB8;   /* disabled, muted fills, track of empty fill meter */

  /* BRAND — terracotta (customer chrome, primary action) */
  --terra-100: #F7E4D8;   /* tints, selected chips */
  --terra-500: #C4622D;   /* primary buttons, links (large text only) */
  --terra-600: #A34E22;   /* pressed state; small text on cream (AA-safe) */
  --terra-700: #833E1B;   /* high-contrast text on cream */

  /* CHEF — forest (chef chrome, success, headings) */
  --forest-500: #4A7360;  /* success, "batch confirmed" */
  --forest-700: #2D4739;  /* headings, chef-mode chrome */
  --forest-100: #E3EDE7;  /* success backgrounds */

  /* URGENCY — turmeric (countdowns, "almost there") */
  --turmeric-500: #E8B84B;
  --turmeric-100: #FCF3DC;

  /* DANGER — paprika (errors, allergy warnings; reserve for true danger) */
  --paprika-600: #B3402B;
  --paprika-100: #FBE6E1;

  /* TEXT — ink */
  --ink-900: #1C1917;     /* primary text */
  --ink-700: #44403C;     /* secondary */
  --ink-500: #6B625C;     /* tertiary, captions, meta */
  --white:   #FFFFFF;     /* cards sit on cream, text on terra/forest buttons */

  /* Semantic roles — customer vs chef chrome swap the accent */
  --accent:       var(--terra-600);
  --accent-strong:var(--terra-700);
  --accent-soft:  var(--terra-100);
  --accent-500:   var(--terra-500);
  --mode-chrome:  var(--terra-700);
  --mode-ink:     var(--ink-900);

  /* TYPOGRAPHY */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display: clamp(2rem, 4vw, 2.5rem);   /* 32–40px, Fraunces 600 */
  --fs-h1:      1.75rem;                    /* 28px  Fraunces 600 */
  --fs-h2:      1.375rem;                   /* 22px  Fraunces 600 */
  --fs-h3:      1.25rem;                    /* 20px  Inter 600 */
  --fs-body:    1.125rem;                   /* 18px  Inter 400  ← minimum body */
  --fs-body-sm: 1rem;                       /* 16px  Inter 400  tabular numbers/meta only */
  --fs-caption: 0.875rem;                   /* 14px  Inter 500, uppercase labels */
  --fs-num:     1.125rem;                   /* tabular figures for counts & timers */

  /* SPACING (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;   --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;
  --gutter-mobile: 1rem;  --gutter-desktop: 2rem;
  --page-max: 72rem;      /* 1152px content column */

  /* RADII */
  --radius-input: 0.5rem;    /* 8px  — inputs, chips, small */
  --radius-card-sm: 0.75rem; /* 12px — nested surfaces */
  --radius-card: 1rem;       /* 16px — cards, buttons large */
  --radius-sheet: 1.5rem;    /* 24px — modals, bottom sheets, dropdowns */
  --radius-pill: 999px;      /* pills, toggle, fill meter cap */

  /* SHADOWS & ELEVATION */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 2px 8px rgba(28, 25, 23, 0.06);
  --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.10);
  --ring-focus: 0 0 0 3px rgba(163, 78, 34, 0.35);

  /* MOTION */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --fill-meter-dur: 700ms;
  --tier-drop-dur: 450ms;

  /* Z-INDEX & FOCUS */
  --z-card: 1; --z-sticky: 20; --z-overlay: 40; --z-modal: 50; --z-toast: 60;
  --min-touch: 44px;
}

body.chef-mode {
  --accent: var(--forest-500);
  --accent-strong: var(--forest-700);
  --accent-soft: var(--forest-100);
  --accent-500: var(--forest-500);
}