/* ════════════════════════════════════════════════════════════════════════
   COCKTAIL LIBRARY — design tokens
   Single source of truth for type, color, spacing, rules, and motion.
   Load order: fonts/fonts.css → tokens.css → theme.css → components.css.
   Every color pair below passes WCAG AA (4.5:1) in both palettes — run the
   contrast script in docs/ before changing any value.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── TYPE ─────────────────────────────────────────────────────────────
     Two families only. Serif carries display + editorial italic voice;
     the grotesque carries body, nav, kickers, and labels. */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Modular scale, ratio 1.25, base 1rem. Use these steps only. */
  --fs-2xs: .64rem;
  --fs-xs:  .8rem;
  --fs-md:  1rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;
  --fs-4xl: 3.052rem;
  --fs-5xl: 3.815rem;

  /* Defined weights only. Serif ships 400/500/600 (+400/500 italic);
     sans ships 400/500/600. */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* Tracked caps for kickers / nav / tier labels. The hosted Playfair and
     Work Sans cuts carry no smcp glyphs, so small caps are set as tracked
     uppercase; font-synthesis is disabled below to prevent faked smcp. */
  --track-1: .08em;   /* nav links, larger caps runs */
  --track-2: .12em;   /* kickers, tags, tier labels, tiny meta */

  /* ── SPACING — 8px-based scale (1 step = .5rem) ─────────────────────── */
  --s-05: .25rem;
  --s-1:  .5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  2.5rem;
  --s-6:  3rem;
  --s-7:  3.5rem;
  --s-8:  4rem;
  --s-10: 5rem;
  --s-12: 6rem;

  /* ── RULES & RADII ──────────────────────────────────────────────────── */
  --hairline: 1px solid var(--rule);
  --hairline-soft: 1px solid var(--rule-soft);
  --radius: 2px;        /* the only radius; the tip float is exempt */

  /* ── MOTION — hover/focus only ──────────────────────────────────────── */
  --dur: .15s;
  --dur-slow: .2s;
  --ease: ease;

  /* ── COLOR — light edition (warm paper) ─────────────────────────────── */
  --paper:        #FBF9F5;
  --paper-deep:   #F3EFE7;
  --ink:          #20201E;
  --ink-soft:     #514E48;
  --ink-mute:     #6C675E;  /* 4.90:1 on paper-deep — AA for small text */
  --rule:         #E4E1DB;
  --rule-soft:    #EFEDE9;
  --accent:       #A0512C;
  --accent-2:     #A0512C;
  --accent-wash:  #F8F1EB;
  --nav-bg:       var(--paper);

  /* Canonical per-section accents. Anything tinting to a section must use
     these (never raw hexes) so dark mode re-tints in one place.
     Batched darkened #8B6F3D → #7D6334 to clear AA on its wash. */
  --accent-recipes:   #A0512C;  --wash-recipes:   #F8F1EB;
  --accent-spirits:   #516B47;  --wash-spirits:   #EEF2EC;
  --accent-technique: #3F5C6B;  --wash-technique: #ECF0F2;
  --accent-batched:   #7D6334;  --wash-batched:   #F5F0E6;
  --accent-ingredients: #65732F;  --wash-ingredients: #F1F2E4;

  /* Legacy colour names — kept as aliases; ~180 generated recipe pages and
     recipes-data.js still reference them (e.g. --card-accent: var(--olive)). */
  --orange: var(--accent);  --olive: var(--accent);   --cobalt: var(--accent);
  --mustard: var(--accent); --crimson: var(--accent); --tomato: var(--accent);
  --coral: var(--accent);   --steel: var(--accent);   --gold: var(--accent);
}

/* Per-section accent — a quiet colour shift across the sections. The
   --accent-* variables flip with the theme, so dark mode is covered. */
body.sec-recipes   { --accent: var(--accent-recipes);   --accent-2: var(--accent-recipes);   --accent-wash: var(--wash-recipes); }
body.sec-spirits   { --accent: var(--accent-spirits);   --accent-2: var(--accent-spirits);   --accent-wash: var(--wash-spirits); }
body.sec-technique { --accent: var(--accent-technique); --accent-2: var(--accent-technique); --accent-wash: var(--wash-technique); }
body.sec-batched   { --accent: var(--accent-batched);   --accent-2: var(--accent-batched);   --accent-wash: var(--wash-batched); }
/* Ingredients pages carry sec-technique for legacy layout rules plus
   sec-ingredient; this later rule gives the section its own identity. */
body.sec-ingredient { --accent: var(--accent-ingredients); --accent-2: var(--accent-ingredients); --accent-wash: var(--wash-ingredients); }

/* ── DARK MODE ──────────────────────────────────────────────────────────
   Opt-in via data-theme="dark" on <html>, set by theme-toggle.js before
   first paint. Same editorial palette inverted. */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #1B1815;
  --paper-deep:   #242019;
  --ink:          #EDE7DC;
  --ink-soft:     #C8C0B2;
  --ink-mute:     #948D80;
  --rule:         #3B362D;
  --rule-soft:    #2C2822;
  --accent:       #CE8757;
  --accent-2:     #CE8757;
  --accent-wash:  #29201A;
  --nav-bg:       #1B1815;

  --accent-recipes:   #CE8757;  --wash-recipes:   #29201A;
  --accent-spirits:   #8FAE81;  --wash-spirits:   #20261C;
  --accent-technique: #82A7BA;  --wash-technique: #1D242A;
  --accent-batched:   #C2A266;  --wash-batched:   #292317;
  --accent-ingredients: #A9B86B;  --wash-ingredients: #232614;
}

/* Print is always the light edition (menu-builder PDFs, recipe printouts). */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --paper:        #FBF9F5;
    --paper-deep:   #F3EFE7;
    --ink:          #20201E;
    --ink-soft:     #514E48;
    --ink-mute:     #6C675E;
    --rule:         #E4E1DB;
    --rule-soft:    #EFEDE9;
    --accent:       #A0512C;
    --accent-2:     #A0512C;
    --accent-wash:  #F8F1EB;
    --nav-bg:       var(--paper);
    --accent-recipes:   #A0512C;  --wash-recipes:   #F8F1EB;
    --accent-spirits:   #516B47;  --wash-spirits:   #EEF2EC;
    --accent-technique: #3F5C6B;  --wash-technique: #ECF0F2;
    --accent-batched:   #7D6334;  --wash-batched:   #F5F0E6;
    --accent-ingredients: #65732F;  --wash-ingredients: #F1F2E4;
  }
}

/* No faked small caps, no faked weights — defined cuts only. */
html { font-synthesis: none; }

/* Motion is hover/focus seasoning, never required. The tip float keeps its
   own reduced-motion guard in components.css. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; --dur-slow: 0s; }
}