/* === v4-build · tokens.css ===
   Locked palette + type stack + spacing scale.
   L83 ship pass · 2026-05-14
   See Color Contract Notion page 35fbddae-1bda-81e1-bd53-ea074b185181
*/

:root {
  /* Foundation [4-step charcoal scaffolding] */
  --bg:           #1e1e1e;   /* page background, locked 2026-05-15 [differentiates from system.mods.group #0a0a0a] */
  --bg-frame:     #121212;   /* wordmark frame, sits on bg */
  --bg-surface:   #1a1a1a;   /* cards, raised surfaces */
  --border:       #2a2a2a;   /* thin rules, dividers */

  /* Text scale */
  --text:         #f5f5f5;   /* primary body, wordmark text */
  --text-2:       #888888;   /* secondary, supporting prose */
  --text-muted:   #555555;   /* tertiary, fine print */
  --text-dim:     #444444;   /* deepest mute, runners */

  /* Text transparency ladder [2026-07-13] · 4 steps mirroring the 4-step tone
     scale above, so a box can be faded by LEVEL instead of an ad-hoc opacity.
     Collapses the scattered one-offs (0.85/0.88/0.92, 0.70/0.75, 0.40/0.50/0.55)
     into a clean ladder. Apply as `opacity: var(--text-op-soft)` on a text box. */
  --text-op-full:   1;       /* L1 · solid, no fade */
  --text-op-strong: 0.85;    /* L2 · supporting text */
  --text-op-soft:   0.70;    /* L3 · muted [current .row-credit level] */
  --text-op-faint:  0.50;    /* L4 · faint, fine print */

  /* Wordmark device [single-beat, wordmark only] */
  --seal:         #e02026;   /* Moses Red [L88c · updated to brand asset 2026-05-16] */

  /* Editorial secondaries */
  --brass:        #b08842;   /* labels, tags, kickers, principle anchors */
  --halation:     #d2b687;   /* motion/transitions only, tonal kin of brass */

  /* Type stack */
  --font-mark:    'Outfit', 'Arial Black', sans-serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type-size scale [L88c ship · 2026-05-16]
     17 tokens, grouped by role. Snap policy: literals collapse to nearest step.
     Mono = UI chrome / labels / runners. Body = serif prose. Tag = italic taglines.
     Display = mark-family titles. See CLAUDE.md for usage notes. */

  /* Mono · UI chrome, captions, kickers, runners */
  --fs-mono-xs:    9px;                       /* tags, peek labels, fine meta            */
  --fs-mono-sm:   10px;                       /* DEFAULT mono · kickers, links, captions */
  --fs-mono-md:   12px;                       /* mid mono · counters, frames-body        */
  --fs-mono-lg:   16px;                       /* page-chrome wordmark height             */
  --fs-mono-xl:   18px;                       /* page-chrome runner                      */

  /* Body · serif prose */
  --fs-body-sm:   14px;                       /* tile body, fine print                   */
  --fs-body:      15px;                       /* DEFAULT body                            */
  --fs-body-lg:   17px;                       /* .body-serif primitive                   */
  --fs-lead:      clamp(18px, 2vw, 24px);     /* italic .lead                            */

  /* Tagline · serif italic, between body and display */
  --fs-tag-sm:    clamp(16px, 1.6vw, 20px);   /* sub-titles, callouts                    */
  --fs-tag:       clamp(18px, 2vw, 24px);     /* row-sub, stage-zero-sub                 */
  --fs-tag-lg:    clamp(20px, 2.4vw, 28px);   /* principle-statement, sister-quote       */

  /* Display · titles, Outfit mark family */
  --fs-h-eyebrow: 22px;                       /* work-title, lane-name kickers, glyphs   */
  --fs-h-sm:      clamp(28px, 3vw, 40px);     /* tile titles                             */
  --fs-h-md:      clamp(32px, 4vw, 56px);     /* poster / canvas medium                  */
  --fs-h-lg:      clamp(40px, 5.5vw, 80px);   /* section titles                          */
  --fs-h-xl:      clamp(48px, 8vw, 112px);    /* hero h1 [frames, row-title]             */
  --fs-h-display: clamp(64px, 10vw, 160px);   /* mega display, row-nada / row-pose       */

  /* Spacing scale [editorial rhythm] */
  --sp-xs:        8px;
  --sp-sm:        16px;
  --sp-md:        24px;
  --sp-lg:        48px;
  --sp-xl:        80px;
  --sp-xxl:       120px;
  --sp-xxxl:      140px;

  /* Section inline padding · L96 · clears chip-nav reserve on right, mirrored on left.
     Desktop formula: vw - (chip_right_inset + chip_width + chip_right_inset) reserved.
     At 1392px viewport → 94px reserve → content max-width 1298px. */
  --section-inline-padding-mobile:   28px;
  --section-inline-padding-tablet:   64px;
  --section-inline-padding-desktop:  94px;

  /* === Page-level grid · L88c · 12-col substrate ===
     Editorial rows opt into this by setting display: grid + repeat(12, 1fr) + var(--grid-gap),
     then placing children with grid-column: N / M.
     Pair principle: POSE/NADA share 6+6, SISTERS/GOLDFISH share 5+4+3 (mirrored).
     Full-bleed escapes (cinematic, TBMC, frames cloud) do NOT opt in. */
  --grid-cols:      12;
  --grid-gap:       24px;

  /* Mobile viewport + typography contract */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --mobile-title-font: var(--font-mark);
  --mobile-title-size: 40px;
  --mobile-title-weight: 700;
  --mobile-title-line: 0.92;
  --mobile-title-letter: 0;

  --mobile-subtitle-font: var(--font-body);
  --mobile-subtitle-size: 18px;
  --mobile-subtitle-weight: 500;
  --mobile-subtitle-line: 1.25;
  --mobile-subtitle-style: italic;
  --mobile-subtitle-letter: 0;

  --mobile-body-font: var(--font-body);
  --mobile-body-size: clamp(15px, 4.1vw, 16px);
  --mobile-body-weight: 400;
  --mobile-body-line: 1.54;
  --mobile-body-max-width: 31ch;

  --mobile-title-subtitle-gap: 11px;
  --mobile-subtitle-body-gap: 12px;
  --mobile-body-meta-gap: 18px;
}