/* GENERATED by scripts/build-tokens.mjs — do not hand-edit.
   Brand values come from brand/brand.json (v01, transcribed from
   guidelines/LS_Brand-Guidelines_v01.pdf). Values brand.json marks null come from
   site/data/invented.json and are disclosed in INVENTED.md. */

:root {
  /* ---- palette: brand.json color.palette, verbatim ---------------------- */
  --c-hot-pink: #F20A88;
  --c-hot-pink-rgb: 242 10 136;
  --c-deep-purple: #4B1557;
  --c-deep-purple-rgb: 75 21 87;
  --c-electric-blue: #1296DB;
  --c-electric-blue-rgb: 18 150 219;
  --c-sunny-yellow: #F5C21E;
  --c-sunny-yellow-rgb: 245 194 30;
  --c-base-cream: #FFF8EF;
  --c-base-cream-rgb: 255 248 239;
  --c-dark: #0D0D0F;

  /* Role names, so a component never reaches for a colour by its own name.
     Roles follow brand.json color.usageRule and the page-17 hierarchy. */
  --c-brand: var(--c-hot-pink);            /* dominant brand field */
  --c-structure: var(--c-deep-purple);     /* contrast and structure */
  --c-accent: var(--c-electric-blue);      /* energy */
  --c-highlight: var(--c-sunny-yellow);    /* energy */
  --c-reading: var(--c-base-cream);        /* reading areas */
  --c-category: var(--c-hot-pink);         /* page 17: CATEGORY TITLE */
  --c-item: var(--c-deep-purple);          /* page 17: Menu Item */
  --c-body: #4a4448;                       /* page 17: description, measured #716C68–#787276 */
  /* page 17's supporting-detail grey samples around #948F8B. That is 3.0:1 on
     cream and fails AA at any size, so it is darkened to the lightest value that
     passes — 5.15:1. The hue is kept. See INVENTED.md. */
  --c-muted: #6f686b;
  --c-note: var(--c-electric-blue);        /* page 17: the blue note line */

  /* ---- typography: brand.json typography ------------------------------- */
  /* brand.json's own fallback stack, with two metric-matched stand-ins inserted
     after the real face. They are not new typefaces — they are Helvetica Neue and
     Arial, which the stack already names, stretched to occupy exactly the space
     Noto Sans will so the webfont swap cannot move the layout. Measured, not
     guessed; the numbers and the reason are in styles/fonts.css. */
  --font: 'Noto Sans', 'Noto Sans metric Helvetica', 'Noto Sans metric Arial', 'Helvetica Neue', Arial, sans-serif;
  --w-body: 400;
  --w-bold: 600;

  /* THE DISPLAY FACE. brand.json typography.display — corrected 2026-08-25 —
     asks for a rounded, playful display face for headings and names Fredoka and
     Baloo as references. It does not lock one ("or a comparable rounded display
     typeface"), so the specific pick is an invention and is disclosed in
     INVENTED.md. Everything read here still comes out of brand.json: the family
     order, and both weights. Nothing is typed. */
  --font-display: Fredoka, 'Trebuchet MS', Verdana, sans-serif;
  --w-display: 700;
  --w-semi: 600;

  /* ---- everything below: brand.json says null. See INVENTED.md. -------- */
  --fs-item: clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem);
  --fs-desc: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --fs-note: 0.6875rem;
  --fs-section: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  --fs-display: clamp(2.75rem, 1.2rem + 6.4vw, 7rem);
  --lh-desc: 1.35;
  --lh-tight: 1.05;
  --tracking-caps: 0.06em;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
  --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px;

  /* Page 17's card padding is 6.0% of the card's own width. Container-query
     units keep that true at any card size, with a floor for small phones. */
  --pad-card: max(14px, 6cqw);

  --r-card: 10px;
  --r-tile: 16px;
  --r-panel: 24px;
  --r-pill: 999px;
  --r-motif: 23%;

  --grad-brand: linear-gradient(160deg, var(--c-hot-pink) 0%, var(--c-deep-purple) 100%);

  --shadow-card: 0 1px 2px rgb(var(--c-deep-purple-rgb) / .06), 0 8px 24px -8px rgb(var(--c-deep-purple-rgb) / .14);
  --shadow-lift: 0 2px 6px rgb(var(--c-deep-purple-rgb) / .10), 0 24px 48px -16px rgb(var(--c-deep-purple-rgb) / .26);
  --shadow-food: drop-shadow(0 18px 22px rgb(var(--c-deep-purple-rgb) / .22));

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 560ms;

  /* Footer logo clear space — an over-estimate of one mascot-bow height,
     because the bow has not been measured. The clamp mirrors the footer logo's
     own rendered width so the two cannot drift apart. See INVENTED.md. */
  --foot-clear: calc(clamp(250px, 22vw, 300px) * 0.20);

  --maxw: 1480px;
  --gutter: clamp(16px, 4vw, 64px);

  /* ---- the approved design's own values. brand.json says null for all of
     them: it publishes no type sizes, no letter-spacing, no radii and no
     motion timing. Every one is disclosed in INVENTED.md. ---------------- */
  --tr-caps: 0.06em;      /* = --tracking-caps, kept as one name per role */
  --tr-wide: 0.14em;
  --tr-wider: 0.20em;
  --tr-widest: 0.24em;
  --tr-display: -0.012em;
  --tr-slab: -0.022em;

  --fs-tiny: 11px;
  --fs-chip: 12px;
  --fs-tag: 13px;
  --fs-lede: 19px;

  --r-sign: clamp(20px, 3vw, 44px);
  --r-panel-lg: 26px;
  --r-tile-lg: 20px;

  --drip-h: 6px;
  --bulb-cycle: 2.6s;
  --tick-cycle: 68s;
  --case-cycle: 74s;
  --dust-cycle: 56s;
  --bob-cycle: 7s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}