/* ============================================================
   Roots & Spices — Design tokens
   Single source of truth for the whole storefront.
   Every page links css/fonts.css, then THIS file, then styles.css.

   Provenance: the token blocks below are lifted VERBATIM from the
   launch page's embedded design-system styles. The LAUNCH-PAGE
   VALUES block at the bottom tokenises every value the launch page
   carried outside :root (inline styles, JS constants) at its exact
   value — nothing rounded, nothing substituted.
   ============================================================ */

:root {
  /* ---- Brand base scales ---- */
  /* Forest — primary brand green (the seal & "roots" wordmark ground) */
  --forest-900: #10322C;
  --forest-800: #163A34;
  --forest-700: #1E4A42;   /* primary */
  --forest-600: #2A5C52;
  --forest-500: #3B7064;

  /* Turmeric — the golden accent (dots, rules, "& spices") */
  --turmeric-700: #A97A15;
  --turmeric-600: #C08D1E;
  --turmeric-500: #CE9A2A;  /* accent gold */
  --turmeric-400: #DBAF4C;
  --turmeric-300: #E8CB84;

  /* Oxblood — deep chili maroon (heritage seal, packaging) */
  --oxblood-800: #451312;
  --oxblood-700: #5E1B1A;   /* deep accent */
  --oxblood-600: #74251F;
  --oxblood-500: #8C3227;

  /* Spice-red — bright terracotta chili */
  --spice-700: #9C3620;
  --spice-600: #BE4A2E;    /* bright accent */
  --spice-500: #CE6144;

  /* Ink — deep navy (stamp variant, cool dark) */
  --ink-900: #141E33;
  --ink-800: #1C2942;
  --ink-700: #2A3A57;

  /* ---- Warm neutrals (cream <-> charcoal) ---- */
  --cream-50:  #FBF7EC;
  --cream-100: #F6F0E0;
  --cream-200: #F1E9D6;   /* default page ground */
  --cream-300: #E7DCC5;
  --cream-400: #D6C8AC;   /* hairline / border on cream */
  --clay-500:  #6E6350;   /* muted-2 / faint text — darkened to meet AA on cream */
  --clay-600:  #685D4B;   /* muted text — darkened to meet AA on cream */
  --charcoal-700: #4A443B;
  --charcoal-800: #322E28;
  --charcoal-900: #221F1A;  /* near-black, warm */

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--cream-200);
  --color-bg-alt:        var(--cream-100);
  --color-surface:       var(--cream-50);
  --color-surface-sunken:var(--cream-300);
  --color-surface-inverse: var(--forest-700);

  --text-strong: var(--charcoal-900);
  --text-body:   var(--charcoal-800);
  --text-muted:  var(--clay-600);
  --text-faint:  var(--clay-500);
  --text-on-dark: var(--cream-100);
  --text-on-dark-muted: #C9BFA6;

  --brand-primary:        var(--forest-700);
  --brand-primary-hover:  var(--forest-800);
  --brand-primary-active: var(--forest-900);
  --on-primary:           var(--cream-50);

  --accent-gold:    var(--turmeric-500);
  --accent-red:     var(--spice-600);
  --accent-oxblood: var(--oxblood-700);
  --accent-ink:     var(--ink-800);

  --border-subtle:  var(--cream-400);
  --border-strong:  var(--charcoal-900);
  --border-brand:   var(--forest-700);
  --border-gold:    var(--turmeric-500);

  --focus-ring: var(--turmeric-500);
  --link:       var(--forest-700);
  --link-hover: var(--spice-600);

  /* Status */
  --success: var(--forest-700);
  --warning: var(--turmeric-600);
  --danger:  var(--spice-700);
  --info:    var(--ink-800);
  --success-surface: #E1E7DC;
  --warning-surface: #F3E6C4;
  --danger-surface:  #F1DDD2;
  --info-surface:    #DCE0E9;
}

/* Roots & Spices — Typography tokens */
:root {
  /* Families
     display : warm editorial serif (ITC Garamond role) — headlines, wordmark-style
     sans    : friendly humanist grotesque (Aperçu role) — body & UI
     mono    : typewriter accent (GT Alpina Typewriter role) — tags, meta, "est."
     All faces are self-hosted woff2 extracted from the launch page
     bundle — see css/fonts.css. */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;

  /* Type scale (1.25-ish, tuned for a punchy display brand) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */
  --text-6xl:  5.25rem;   /* 84 */
  --text-7xl:  7rem;      /* 112 */

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

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.16em;  /* letter-spaced stamp caps */

  /* Semantic roles */
  --display-family: var(--font-display);
  --display-weight: var(--weight-semibold);
  --display-leading: var(--leading-tight);

  --heading-family: var(--font-display);
  --heading-weight: var(--weight-medium);

  --body-family: var(--font-sans);
  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-relaxed);

  --label-family: var(--font-sans);
  --label-weight: var(--weight-semibold);
  --label-tracking: var(--tracking-label);

  --eyebrow-family: var(--font-mono);
  --eyebrow-tracking: var(--tracking-label);
}

/* Roots & Spices — Spacing & layout tokens (4px base) */
:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Layout */
  --container-sm: 40rem;
  --container-md: 60rem;
  --container-lg: 75rem;
  --container-xl: 82.5rem;
  --gutter: var(--space-5);
  --section-y: var(--space-12);
}

/* Roots & Spices — Radii, borders, shadows, motion */
:root {
  /* Radius — soft rectangles + full circles (seals/pills) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths (the brand loves thin double-line frames) */
  --border-1: 1px;
  --border-2: 2px;
  --border-frame: 2px;      /* stamp/seal frame line */

  /* Shadows — warm, low, ink-tinted; the brand is mostly flat */
  --shadow-xs: 0 1px 2px rgba(34,31,26,0.06);
  --shadow-sm: 0 2px 6px rgba(34,31,26,0.08);
  --shadow-md: 0 6px 18px rgba(34,31,26,0.10);
  --shadow-lg: 0 16px 40px rgba(34,31,26,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.35);

  /* Motion — gentle, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Depth / interaction — ONE source of truth for the restrained lift on
     product cards and the press on controls. A card is an object you pick
     up (it rises toward you); a button is a surface you press (it sinks a
     touch). No bounce, no overshoot, no tilt. Timing is short-in / a touch
     slower-out via the two duration tokens. Tune the whole site here. */
  --depth-lift: -4px;          /* card rise on hover / keyboard focus — gentle */
  --depth-scale: 1.012;        /* a hair larger; felt, not loud */
  --depth-shadow: 0 12px 26px -12px rgba(34, 31, 26, 0.22);  /* soft elevation pool beneath a lifted card */
  --depth-shadow-rest: 0 0 0 0 rgba(34, 31, 26, 0);          /* invisible rest so box-shadow can ease */
  /* Click / tap: the lifted card dips quickly toward the surface (a press),
     then navigates to the product. */
  --depth-lift-press: 1px;
  --depth-scale-press: 0.997;
  --depth-shadow-press: var(--shadow-xs);
  --depth-press-y: 1px;        /* how far a pressed *control* (button) sinks */
  --depth-press-scale: 0.985;  /* how far a pressed *control* (button) squeezes */
  --depth-in: var(--dur-fast); /* quick to respond */
  --depth-out: var(--dur-base);/* a touch slower to settle back */

  /* The recurring dotted "postage perforation" pattern */
  --perf-dot: var(--cream-400);
}

/* ============================================================
   LAUNCH-PAGE VALUES
   Everything the launch page carried outside :root — hero inline
   styles, seal chrome, particle palettes — tokenised at its exact
   value. The 12 colour schemes themselves live (verbatim) in
   js/launch-fx-data.js; the engine writes the active scheme into
   the --cur-* variables below. Defaults = V1 "Forest — deep
   (baseline)" so a no-JS render is still on-brand.
   ============================================================ */
:root {
  /* Hero display type — the launch h1: 'Fraunces', Georgia, serif;
     weight 500; clamp(48px, 7vw, 104px); line-height 0.98;
     letter-spacing -0.015em; max-width 15ch */
  --font-display-hero: 'Fraunces', Georgia, serif;
  --hero-title-weight: 500;
  --hero-title-size: clamp(48px, 7vw, 104px);
  --hero-title-leading: 0.98;
  --hero-title-tracking: -0.015em;
  --hero-title-measure: 15ch;

  /* Hero rhythm — the launch page's own px values (deliberately not
     on the 4px token scale; kept verbatim) */
  --hero-pad: clamp(40px, 6vw, 96px);
  --hero-gap-kicker: 26px;
  --hero-gap-sub: 30px;
  --hero-gap-chips: 44px;
  --chip-gap: 14px;

  /* Kicker (stamp line) — mono 14px, 0.4em tracking, uppercase */
  --kicker-size: 14px;
  --tracking-stamp: 0.4em;

  /* Hero sub paragraph */
  --hero-sub-size: clamp(17px, 1.6vw, 22px);
  --hero-sub-leading: 1.5;
  --hero-sub-measure: 44ch;

  /* Chips */
  --chip-size: 12px;
  --chip-tracking: 0.24em;
  --chip-pad: 9px 16px;

  /* Background photo treatment */
  --bg-overscan: -7%;
  --bg-zoom-dur: 30s;

  /* Static copy of the V1 baseline scrim — the launch imagery treatment
     for panels that should NOT follow the live scheme (e.g. product
     photo placeholders). Identical value to the --cur-scrim default. */
  --scrim-forest: linear-gradient(90deg, rgba(30,74,66,0.97) 0%, rgba(30,74,66,0.91) 40%, rgba(30,74,66,0.56) 63%, rgba(30,74,66,0.18) 100%);

  /* Scheme-only colours (appear in V1–V12 but nowhere in the scales) */
  --scheme-cream-soft: #D8CFB8;   /* sub text on forest schemes (V1/V9/V11) */
  --scheme-gold-soft:  #F6D77A;   /* V8 "Night express" heading/chip gold */
  --scheme-ink-mist:   #B9C0D2;   /* V8 sub text */
  --scheme-blush:      #E2CFC0;   /* V12 sub text */

  /* Active scheme (written by js/launch-fx.js; defaults = V1) */
  --cur-tint: transparent;
  --cur-blend: normal;
  --cur-scrim: linear-gradient(90deg, rgba(30,74,66,0.97) 0%, rgba(30,74,66,0.91) 40%, rgba(30,74,66,0.56) 63%, rgba(30,74,66,0.18) 100%);
  --cur-heading: #F6F0E0;
  --cur-accent: #CE9A2A;
  --cur-sub: #D8CFB8;
  --cur-chip-bg: #CE9A2A;
  --cur-chip-text: #10322C;
  --cur-chip-border: rgba(206,154,42,0.55);

  /* Corner seal — 112px, launch offsets, 14s linear spin, chrome */
  --seal-size: 112px;
  --seal-top: clamp(24px, 3vw, 44px);
  --seal-right: clamp(24px, 3vw, 48px);
  --seal-spin-dur: 14s;
  --seal-emboss: 0 0.5px 1px rgba(24,16,6,0.30), 0 3px 7px rgba(24,16,6,0.20), 0 10px 24px rgba(24,16,6,0.15);
  --seal-sheen: radial-gradient(circle at 34% 28%, rgba(255,250,236,0.24) 0%, rgba(255,250,236,0.09) 30%, rgba(255,250,236,0) 52%), linear-gradient(146deg, rgba(255,250,236,0.11) 0%, rgba(255,250,236,0) 38%, rgba(40,29,14,0.07) 72%, rgba(40,29,14,0.17) 100%);
  --seal-bevel: inset 0 0 0 0.5px rgba(40,29,14,0.34), inset 0 0.75px 0 rgba(255,250,236,0.50), inset 0 -0.75px 0.5px rgba(40,29,14,0.40), inset 0 0 0 2px rgba(255,250,236,0.07), inset 0 0 6px rgba(40,29,14,0.11);

  /* Wheel cursor */
  --wheel-shadow: drop-shadow(0 1px 3px rgba(10,18,14,0.45));

  /* Particle palettes (the JS uses these same literal values) */
  --fx-dust-1: #CE9A2A; --fx-dust-2: #BE4A2E; --fx-dust-3: #9C3620;
  --fx-dust-4: #2A2622; --fx-dust-5: #8A6A3A; --fx-dust-6: #5E1B1A;
  --fx-dust-7: #E8CB84; --fx-dust-8: #C97B2E;
  --fx-spark-1: #FFE9A8; --fx-spark-2: #FFB347; --fx-spark-3: #F2B455;
  --fx-spark-4: #E8A33C; --fx-spark-5: #D97A22;
  --fx-spark-glow: 0 0 5px 1.5px rgba(255,179,71,0.7), 0 0 11px 3px rgba(217,122,34,0.3);
}

/* ---- Storefront structure (new; no equivalent on the launch page) ---- */
:root {
  --nav-bg: rgba(241, 233, 214, 0.82);          /* cream-200 @ .82 */
  --nav-bg-scrolled: rgba(241, 233, 214, 0.94);
  --nav-blur: 10px;
  --nav-height: 5rem;            /* mobile two-row nav; also seal offset */

  --dur-reveal: 640ms;           /* section reveal fades */
  --reveal-shift: 14px;
}
@media (min-width: 48em) {
  :root { --nav-height: 4.5rem; }
}

/* ============================================================
   TIME-OF-DAY THEME VARIATIONS
   Driven by js/theme.js (seal click + slow auto-cycle). Each theme
   just re-values the BASE SCALE tokens (creams, charcoals, clays,
   gold) plus the few literals that don't derive from them (nav bg,
   hero photo tint). Because the semantic tokens (--color-bg,
   --text-*, --brand-primary, --border-*, …) all resolve FROM these
   scales at use time, the whole page shifts together — no component
   is touched. Forest green is deliberately held constant across all
   themes: it's the brand anchor (buttons, wordmark), so identity
   holds while the light changes around it.

   "day" is the baseline above (no [data-theme] block needed).
   Every variation's text was contrast-checked against its own
   grounds (AA 4.5:1 for body/secondary text) — see the checker in
   the commit. Nothing here leaves the green / cream / gold family.

   TO ADD A VARIATION (e.g. "midnight"):
     1. Copy one block below, rename [data-theme="midnight"].
     2. Change the token values (stay in-family; keep charcoal text
        dark enough on your creams — re-run the contrast check).
     3. Add 'midnight' to the THEMES array in js/theme.js. Done.
   ============================================================ */

/* Golden hour — warmer, amber ground, richer gold (late-afternoon sun) */
:root[data-theme="golden"] {
  --cream-50:#FBF2DD; --cream-100:#F8EBCF; --cream-200:#F4E5C2; --cream-300:#ECD7AE; --cream-400:#DCC194;
  --charcoal-700:#4E4436; --charcoal-800:#352C21; --charcoal-900:#241D15;
  --clay-500:#6C5D42; --clay-600:#65583F;
  --turmeric-500:#C68A1C; --turmeric-600:#AE7813;
  --nav-bg: rgba(244,229,194,0.82); --nav-bg-scrolled: rgba(244,229,194,0.94);
  /* hero: warm oxblood scrim + gold type (launch scheme V3) */
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: linear-gradient(90deg, rgba(94,27,26,0.97) 0%, rgba(94,27,26,0.91) 40%, rgba(94,27,26,0.54) 64%, rgba(94,27,26,0.16) 100%);
  --cur-heading: #DBAF4C; --cur-accent: #E8CB84; --cur-sub: #E8CB84;
  --cur-chip-bg: #DBAF4C; --cur-chip-text: #451312; --cur-chip-border: rgba(219,175,76,0.5);
}

/* Dusk — deeper, dustier tan, evening light coming down, deep gold */
:root[data-theme="dusk"] {
  --cream-50:#EFE6CF; --cream-100:#E9DCC1; --cream-200:#E2D4B4; --cream-300:#D3C29F; --cream-400:#BEA98D;
  --charcoal-700:#453E31; --charcoal-800:#2E271E; --charcoal-900:#1E1810;
  --clay-500:#665A43; --clay-600:#594E3A;
  --turmeric-500:#B47D18; --turmeric-600:#9C6C12;
  --nav-bg: rgba(226,212,180,0.82); --nav-bg-scrolled: rgba(226,212,180,0.94);
  /* hero: deep night-ink scrim + warm gold type (launch scheme V8) */
  --cur-tint: #141E33; --cur-blend: color;
  --cur-scrim: linear-gradient(90deg, rgba(20,30,51,0.95) 0%, rgba(20,30,51,0.84) 44%, rgba(20,30,51,0.44) 68%, rgba(20,30,51,0.14) 100%);
  --cur-heading: #F6D77A; --cur-accent: #CE9A2A; --cur-sub: #B9C0D2;
  --cur-chip-bg: #F6D77A; --cur-chip-text: #141E33; --cur-chip-border: rgba(246,215,122,0.45);
}

/* Cool morning — cooler, cleaner ground toward pale grey-green, cooler gold */
:root[data-theme="cool"] {
  --cream-50:#F7F7EE; --cream-100:#F0F1E4; --cream-200:#E9EBDB; --cream-300:#DBDECB; --cream-400:#C3C7B0;
  --charcoal-700:#43473F; --charcoal-800:#2C302A; --charcoal-900:#1D211B;
  --clay-500:#666B58; --clay-600:#58604D;
  --turmeric-500:#C0942F; --turmeric-600:#A87F22;
  --nav-bg: rgba(233,235,219,0.82); --nav-bg-scrolled: rgba(233,235,219,0.94);
  /* hero: light cream "daylight" scrim + forest type (launch scheme V2) */
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: linear-gradient(90deg, rgba(241,233,214,0.97) 0%, rgba(241,233,214,0.93) 42%, rgba(241,233,214,0.58) 64%, rgba(241,233,214,0.14) 100%);
  --cur-heading: #1E4A42; --cur-accent: #5E1B1A; --cur-sub: #4A443B;
  --cur-chip-bg: #1E4A42; --cur-chip-text: #F6F0E0; --cur-chip-border: rgba(94,27,26,0.4);
}

/* ---- Restored launch hero schemes ("beautiful combinations") ----
   These keep the baseline cream ground and only recolour the HERO + seal,
   the way the original scheme cycle did — pure hero variations, all values
   verbatim from the launch page's tested schemes. A hero-only theme is a
   valid variation: set just the --cur-* here and add its name to THEMES in
   js/theme.js. */

/* Grove — deep forest hero (launch V7) */
:root[data-theme="grove"] {
  --cur-tint: #1E4A42; --cur-blend: color;
  --cur-scrim: linear-gradient(90deg, rgba(16,50,44,0.94) 0%, rgba(16,50,44,0.82) 42%, rgba(16,50,44,0.40) 66%, rgba(16,50,44,0.10) 100%);
  --cur-heading: #F6F0E0; --cur-accent: #CE9A2A; --cur-sub: #C9BFA6;
  --cur-chip-bg: #CE9A2A; --cur-chip-text: #10322C; --cur-chip-border: rgba(206,154,42,0.55);
}

/* Plum — deep oxblood hero (launch V12) */
:root[data-theme="plum"] {
  --cur-tint: #5E1B1A; --cur-blend: color;
  --cur-scrim: linear-gradient(90deg, rgba(69,19,18,0.95) 0%, rgba(69,19,18,0.84) 42%, rgba(69,19,18,0.44) 66%, rgba(69,19,18,0.12) 100%);
  --cur-heading: #F1E9D6; --cur-accent: #DBAF4C; --cur-sub: #E2CFC0;
  --cur-chip-bg: #DBAF4C; --cur-chip-text: #451312; --cur-chip-border: rgba(219,175,76,0.5);
}

/* Ember — ink-blue hero with a warm spice-red accent (launch V4) */
:root[data-theme="ember"] {
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: linear-gradient(90deg, rgba(28,41,66,0.97) 0%, rgba(28,41,66,0.91) 40%, rgba(28,41,66,0.55) 64%, rgba(28,41,66,0.16) 100%);
  --cur-heading: #F6F0E0; --cur-accent: #CE6144; --cur-sub: #C9BFA6;
  --cur-chip-bg: #CE6144; --cur-chip-text: #141E33; --cur-chip-border: rgba(206,97,68,0.5);
}

/* Clear — forest vignette; the locomotive photo glows through the centre
   (launch V11) */
:root[data-theme="clear"] {
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: radial-gradient(ellipse at 50% 46%, rgba(30,74,66,0.22) 0%, rgba(30,74,66,0.78) 52%, rgba(16,50,44,0.97) 100%);
  --cur-heading: #F6F0E0; --cur-accent: #CE9A2A; --cur-sub: #D8CFB8;
  --cur-chip-bg: #CE9A2A; --cur-chip-text: #10322C; --cur-chip-border: rgba(206,154,42,0.55);
}

/* Sunset — spice-terracotta hero, cream type (launch V5) */
:root[data-theme="sunset"] {
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: linear-gradient(90deg, rgba(190,74,46,0.96) 0%, rgba(190,74,46,0.90) 40%, rgba(190,74,46,0.54) 64%, rgba(190,74,46,0.16) 100%);
  --cur-heading: #F6F0E0; --cur-accent: #F6F0E0; --cur-sub: #F3E6C4;
  --cur-chip-bg: #F6F0E0; --cur-chip-text: #9C3620; --cur-chip-border: rgba(246,240,224,0.5);
}

/* Linen — light cream hero, oxblood + gold type (launch V6) */
:root[data-theme="linen"] {
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: linear-gradient(90deg, rgba(246,240,224,0.97) 0%, rgba(246,240,224,0.93) 42%, rgba(246,240,224,0.58) 64%, rgba(246,240,224,0.14) 100%);
  --cur-heading: #5E1B1A; --cur-accent: #CE9A2A; --cur-sub: #4A443B;
  --cur-chip-bg: #5E1B1A; --cur-chip-text: #F6F0E0; --cur-chip-border: rgba(94,27,26,0.35);
}

/* Candid — photo-forward: forest fades up from the foot so the locomotive
   shows through the top, cream + gold type (launch V9) */
:root[data-theme="candid"] {
  --cur-tint: transparent; --cur-blend: normal;
  --cur-scrim: linear-gradient(180deg, rgba(30,74,66,0.10) 0%, rgba(30,74,66,0.48) 42%, rgba(30,74,66,0.97) 100%);
  --cur-heading: #F6F0E0; --cur-accent: #CE9A2A; --cur-sub: #D8CFB8;
  --cur-chip-bg: #CE9A2A; --cur-chip-text: #10322C; --cur-chip-border: rgba(206,154,42,0.55);
}

/* Chalk — light cream hero, ink + spice type, gold-warmed photo (launch V10) */
:root[data-theme="chalk"] {
  --cur-tint: #CE9A2A; --cur-blend: color;
  --cur-scrim: linear-gradient(90deg, rgba(243,230,196,0.96) 0%, rgba(243,230,196,0.90) 42%, rgba(243,230,196,0.52) 66%, rgba(243,230,196,0.12) 100%);
  --cur-heading: #1C2942; --cur-accent: #9C3620; --cur-sub: #4A443B;
  --cur-chip-bg: #1C2942; --cur-chip-text: #F3E6C4; --cur-chip-border: rgba(28,41,66,0.35);
}