/* GENERATED FILE — do not edit by hand.
 * Source of truth: shared/brand/tokens.ts
 * Regenerate with:  node shared/brand/build.mjs
 */

:root {
  /* Color */
  --color-cream: #F1EAD9;
  --color-cream-deep: #E8DFC9;
  --color-ink: #1A1410;
  --color-ink-soft: #3D332A;
  --color-ink-mute: #6B5E52;
  --color-terracotta: #C2491D;
  --color-terracotta-soft: #E8B89F;
  --color-walnut: #704620;
  --color-walnut-soft: #C8A083;
  --color-line: rgba(26, 20, 16, 0.12);
  --color-line-strong: rgba(26, 20, 16, 0.25);

  /* Spacing (px) — exposed for raw-CSS consumers; Tailwind reads from its own scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Type sizes (px) */
  --font-size-caption: 12px;
  --font-size-small: 14px;
  --font-size-body: 16px;
  --font-size-lede: 18px;
  --font-size-title: 24px;
  --font-size-display1: 32px;
  --font-size-display2: 48px;
  --font-size-display3: 64px;

  /* Line height (unitless) */
  --line-height-display: 1.05;
  --line-height-title: 1.15;
  --line-height-body: 1.45;
  --line-height-caption: 1.5;

  /* Letter spacing (em) */
  --tracking-tight-display: -0.04em;
  --tracking-tight-title: -0.02em;
  --tracking-body: 0em;
  --tracking-loose: 0.06em;
  --tracking-looser: 0.14em;

  /* Motion (ms) — restraint, not flourish */
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;

  /* Legacy color aliases — used by landing/index.html (102 references as of
   * 2026-05-22). New code MUST use the --color-* names above. These aliases
   * are removable once landing migrates. Do not add new entries here. */
  --cream: var(--color-cream);
  --cream-deep: var(--color-cream-deep);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --ink-mute: var(--color-ink-mute);
  --terracotta: var(--color-terracotta);
  --terracotta-soft: var(--color-terracotta-soft);
  --walnut: var(--color-walnut);
  --walnut-soft: var(--color-walnut-soft);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
}

/* Fraunces variable font. Drop the woff2 into each consumer's public/fonts/. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces.woff2') format('woff2-variations'),
       url('/fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Stage 3 landing-modernization additions (2026-06-15).
 *
 * Added directly to the landing copy of brand-tokens.css to unblock the
 * Stage 3 work. These need to be backported into shared/brand/tokens.ts the
 * next time that source-of-truth file is touched — see the generated-file
 * note at the top. Strictly additive; no existing token is mutated.
 *
 * Scope: hero display scale, photo/video overlay tokens for the future
 * real-kitchen hero asset, and a scroll-linked motion easing curve that
 * extends --motion-* without replacing it.
 * --------------------------------------------------------------------------- */
:root {
  /* Hero display — used by the oversized H1 in the restructured single-column
   * hero. Clamp bounds tuned for 390px mobile (~64px) → 1440px desktop (~180px). */
  --font-size-hero-display: clamp(64px, 12vw, 180px);

  /* Overlay tokens for the future .hero--photo / .hero--video variants.
   * The variants stay inactive in markup until a real-kitchen still or
   * loop lands (see NEEDS_REAL_PHOTO_FROM / NEEDS_REAL_VIDEO_FROM hooks in
   * index.html). The gradient gives the H1 legibility over warm-toned
   * kitchen footage without flattening the photo itself. */
  --hero-overlay-top: rgba(241, 234, 217, 0.92);    /* ~cream, near opaque at the top edge */
  --hero-overlay-bottom: rgba(241, 234, 217, 0.55); /* ~cream, half-veiled at the bottom edge */

  /* Scroll-linked motion. Same easing family as the existing rise / reveal
   * animations; the duration sits between --motion-base and --motion-slow. */
  --motion-scroll-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-scroll: 540ms;
}

/* ---------------------------------------------------------------------------
 * Stage 4 landing-modernization additions (2026-06-15).
 *
 * Companion to D-025 (AI-photo placeholder override). Same backport posture
 * as Stage 3: these tokens live in the generated landing copy and need to
 * port up to shared/brand/tokens.ts the next time that file is touched.
 * Strictly additive; no existing token is mutated.
 *
 * Scope: the moment-scale type system (one bold claim per screen — see the
 * Stage 4 plan), viewport-moment geometry (each moment fills ~100vh on
 * desktop), and the gradient anchors that keep overlay type legible on the
 * full-bleed kitchen photos without flattening them into a card. The
 * gradients sit at the corner where the type lives; the rest of the photo
 * stays untouched so the documentary warmth comes through.
 *
 * Stage 5 (2026-06-15) — type-cascade tightening.
 * Stage 4 sized nearly every moment headline at near-hero scale, which
 * read as oversold when the operator looked at the live page. The clamps
 * below are Stage 5's tightened cascade. Only the hero (moment-mega) keeps
 * the previous values; the display / heading / quote / lede tiers all
 * drop one notch. The intent is a clear hierarchy — hero > moment
 * headlines > body > metadata — instead of "every moment shouts."
 *
 * Stage 6 (2026-06-15) — paragraph-scale lede.
 * The Stage 5 lede clamp (max 42px) still read as a marketing display
 * when the canonical D-024 paragraph wants to sit at editorial body
 * scale. The lede clamp drops one more tier here so the paragraph reads
 * like a beautifully-typeset book passage instead of a headline. Hero
 * stays locked; the rest of the Stage 5 cascade is unchanged.
 *
 * Stage 7 (2026-06-15) — editorial quiet across non-hero moments.
 * Operator feedback after Stage 6: "all these sections are still far
 * too big." The display / heading / quote tiers all drop hard so only
 * the hero reads as heroic-scale. Place names recede to label tier;
 * moment headlines recede to section-label tier; quote bodies recede
 * to readable editorial quote. The lede stays as-is (Stage 6 already
 * landed it at paragraph scale). The mental model: one cover headline,
 * everything else composed-but-quiet. Per-element overrides in
 * landing/index.html (footer wordmark, pullquote, signup, library
 * demo, etc.) drop in parallel — see the Stage 7 plan.
 * --------------------------------------------------------------------------- */
:root {
  /* Moment-scale type. The H1 IS the hero; every other moment headline
   * sits well below it. Clamp bounds tuned so the lower end stays
   * readable on a 390px viewport and the upper end stops shouting on
   * a 1440px screen.
   *
   * Stage 7 cascade (only -mega is locked; everything else is editorial-quiet):
   *   mega    > display      > heading      > quote        > lede
   *   hero      places         section        cook quote +    canonical
   *                            headings       tutor question  paragraph
   */
  --font-size-moment-mega: clamp(96px, 22vw, 360px);    /* Hero H1 — LOCKED Stage 5 */
  --font-size-moment-display: clamp(36px, 4.5vw, 72px); /* Stage 7: place names — featured but not loud */
  --font-size-moment-heading: clamp(28px, 3.5vw, 52px); /* Stage 7: section headings — label scale, not display */
  --font-size-moment-quote: clamp(20px, 2.4vw, 32px);   /* Stage 7: cook + tutor quote bodies — readable editorial */
  --font-size-moment-lede: clamp(22px, 2.6vw, 36px);    /* Stage 6: canonical paragraph + library body at editorial reading scale */

  /* Moment geometry. min(100vh, 920px) keeps short laptops from feeling
   * over-tall, while still hitting a true viewport on standard desktops.
   * The padding clamps give every moment generous breathing room without
   * crowding on mobile. */
  --moment-min-height: min(100vh, 920px);
  --moment-padding-y: clamp(80px, 14vh, 200px);
  --moment-padding-x: clamp(28px, 6vw, 96px);

  /* Photo overlay — a directional corner gradient that darkens only where
   * the overlay type sits (typically bottom-left). The rest of the photo
   * stays at its native warmth. Composed in the moment's own ::before so
   * it can be flipped per-photo if a frame's negative space wants a
   * different corner. */
  --photo-overlay-corner: linear-gradient(135deg,
    rgba(26, 20, 16, 0) 0%,
    rgba(26, 20, 16, 0) 35%,
    rgba(26, 20, 16, 0.55) 100%);

  /* Reveal motion for the per-moment compose-in. Same family as
   * --motion-scroll above but slower (the eye should catch it). */
  --motion-moment: 900ms;
}

/* ---------------------------------------------------------------------------
 * Stage 8 landing-modernization additions (2026-06-15).
 *
 * Same backport posture as Stage 3/4/5/6/7: lives in the generated landing
 * copy of brand-tokens.css; folds back into shared/brand/tokens.ts the next
 * time that source-of-truth file is touched. Strictly additive.
 *
 * Scope: one global behavior fix — reserve the vertical scrollbar gutter
 * always, so that when the library modal engages body { overflow: hidden }
 * (the standard scroll-lock pattern) the viewport doesn't widen by ~15px
 * and reflow every element to the left of the modal. Without this, the
 * M6 content visibly shifted right when the modal opened — the operator
 * flagged the shift as "elemental text shift" in Stage 8 feedback.
 *
 * Browser support: Safari 16+, Chrome 94+, Firefox 97+. Older browsers
 * silently ignore the rule and exhibit the prior (Stage 7) shift behavior
 * — no regression.
 * --------------------------------------------------------------------------- */
html {
  scrollbar-gutter: stable;
}

/* ---------------------------------------------------------------------------
 * Stage 9.0 landing-modernization additions (2026-06-15).
 *
 * Tactical fix pass after the operator read the Stage-8 live page as still
 * too big across non-hero moments and too tall in section heights. Hero
 * (--font-size-moment-mega) stays locked; everything else drops one more
 * meaningful notch. Same backport posture as Stage 3-8: lives in the
 * generated landing copy; folds back into shared/brand/tokens.ts when
 * that source-of-truth file is next touched. Re-declaration in a later
 * :root block — the cascade resolves these as the active values.
 *
 * Hierarchy preserved:
 *   mega (hero, locked) > display (place names) > heading (sections) >
 *   quote (cook + tutor question) > lede (canonical paragraph + library)
 *
 * --moment-min-height drop is the single biggest win on vertical density.
 * Photo moments (the M1 hero, plus the places rail's photo cards —
 * Bologna/Brittany/Munich/Seoul/Kyoto, collapsed 2026-06-22 from the
 * former full-bleed M8/M9/M10 place chapters) carry their own sizing;
 * the hero keeps its min-height: 100vh override. The curriculum and footer carry
 * min-height: auto. The token drop only affects M2 lede, M4 cook,
 * M5 tutor, M6 library, M11 signup — exactly the moments that read as
 * "too much air" on the live page.
 *
 * See docs/plans/landing-modernization-stage-9-0-plan.md for the full
 * rationale, before/after captures, and per-element override list.
 * --------------------------------------------------------------------------- */
:root {
  /* Type cascade (Stage 9.0 — tightened across the board, hero locked) */
  --font-size-moment-display: clamp(32px, 3.6vw, 56px); /* Place names — editorial label, not display */
  --font-size-moment-heading: clamp(22px, 2.4vw, 36px); /* Section headings — composed-but-quiet */
  --font-size-moment-quote:   clamp(18px, 1.8vw, 26px); /* Cook quote, tutor question, cook pullquote */
  --font-size-moment-lede:    clamp(18px, 1.8vw, 24px); /* Canonical paragraph + library body — book scale */

  /* Moment geometry (Stage 9.0 — sections recede to fit content) */
  --moment-min-height: min(70vh, 640px);
  --moment-padding-y:  clamp(64px, 10vh, 140px);
}

/* ---------------------------------------------------------------------------
 * Stage 9 cookbook-scroll redesign (2026-06-15).
 *
 * Same backport posture as Stage 3-9.0: lives in the generated landing copy
 * of brand-tokens.css; folds back into shared/brand/tokens.ts when that
 * source-of-truth file is next touched. Strictly additive — Stage 9.0
 * tokens above are not mutated.
 *
 * Scope: a small set of cookbook-vocabulary tokens that let the chapter
 * shell express folio numerals, drop caps, marginalia, pull-quotes, body
 * measure, and the closing colophon. Brand-spine colors are unchanged;
 * the cookbook treatment lives in typography + rhythm, not new hues.
 *
 * Mental model:
 *   chapter folio (small terracotta rule + roman numeral + italic title)
 *   drop cap (terracotta Fraunces, ~9vw, kerned to wrap the first lines)
 *   body at chapter-measure (~62ch cap, generous leading)
 *   optional pull-quote (larger Fraunces italic, indented, thin rule)
 *   optional marginalia (right column on desktop, stacked on mobile)
 *   colophon (small wordmark + rule + metadata; reads as back-page imprint)
 *
 * See docs/plans/landing-modernization-stage-9-plan.md for the full
 * chapter-by-chapter design + rationale.
 * --------------------------------------------------------------------------- */
:root {
  /* Body-prose measure cap. Comfortable cookbook line length. */
  --chapter-measure: min(62ch, 100%);

  /* Chapter vertical padding on prose chapters. Place chapters keep their
   * own min-height: 100vh because the photo IS the page. */
  --chapter-pad-y: clamp(96px, 16vh, 180px);

  /* Width of the small terracotta rule before / after the folio numeral. */
  --chapter-folio-rule: 32px;

  /* Chapter-heading scale. Above moment-heading (Stage 9.0 clamps to 36px)
   * because the chapter heading IS the section anchor. Stays well below
   * the hero mega clamp so the hierarchy reads cleanly. */
  --font-size-chapter-heading: clamp(26px, 2.6vw, 40px);

  /* Drop-cap scale. Generous enough to wrap the first ~3 lines of body
   * under it; tuned for 390px mobile (~72px) → 1440px desktop (~132px). */
  --font-size-chapter-drop: clamp(72px, 9vw, 132px);

  /* Pulled-sentence scale. Larger than body, smaller than chapter heading. */
  --font-size-chapter-pullquote: clamp(22px, 2.4vw, 32px);

  /* Marginalia scale. Captions sit at body-caption tier; on desktop they
   * float to the side column, on mobile they stack as a quoted note. */
  --font-size-chapter-marginalia: clamp(14px, 1.1vw, 16px);

  /* Closing wordmark scale. Stage 9.0 dropped from clamp(48px, 10vw, 140px)
   * to clamp(40px, 7vw, 96px); Stage 9 drops further to colophon scale
   * because the wordmark sits in the metadata row, not above it. */
  --font-size-colophon: clamp(28px, 4vw, 56px);
}