/**
 * tokens.css — the ONLY home of raw values in this codebase (design-tokens skill §2;
 * design.md §0). Every value below is transcribed verbatim from the locked root
 * `design.md` (world NIGHT GANTRY). No other stylesheet, template or client script may
 * contain a raw hex, an arbitrary length, or a magic motion number — everything else
 * consumes these as `var(--token)`. `.claude/design_check.js` exempts this file by name
 * (`tokens.*`) from its hex-literal scan for exactly this reason.
 *
 * Section numbers in comments point back at design.md so a reviewer can trace every
 * line to its source. Component-token sections not yet consumed by any built screen
 * (forms, gauge, tier grid, modal, toast, player, back office, portal video grid, …)
 * are intentionally NOT transcribed here — the design-tokens skill's extension rule is
 * additive: the slice that first builds a component adds its tokens then, so this file
 * never carries a value nothing reads yet.
 */

:root {
  color-scheme: dark; /* design.md §13 — native controls/scrollbars render dark */

  /* ── §3.1 Colour primitives (never used directly in a component) ────────── */
  --graphite-900: #0a0a0a;
  --graphite-850: #15171a;
  --graphite-800: #1e2124;
  --graphite-700: #292d31;
  --graphite-600: #3a3e42;
  --graphite-550: #40444a;
  --graphite-500: #4a4e52;
  --chalk-100: #f2f3ef;
  --chalk-400: #a9ada6;
  --hazard-500: #ffc819;
  --hotsteel-500: #ff6a3d;

  /* ── §3.2 Semantic colour (components use ONLY these) ───────────────────── */
  --color-bg: var(--graphite-800);
  --color-surface: var(--graphite-700);
  --color-ink: var(--chalk-100);
  --color-ink-muted: var(--chalk-400);
  --color-accent: var(--hazard-500);
  --color-accent-2: var(--hotsteel-500);
  --color-rule: var(--graphite-600);
  --color-control-border: var(--chalk-400);
  --color-track: var(--graphite-550);
  --color-marker: var(--graphite-500);
  --color-chip-text: var(--color-bg);
  --color-invert-bg: var(--chalk-100);
  --color-invert-ink: var(--graphite-800);
  --color-invert-ink-2: var(--graphite-700);

  /* ── §3.3 Focus ───────────────────────────────────────────────────────────── */
  --color-focus: #ffc819;
  --color-focus-on-light: #1e2124;
  --focus-outline-width: 2px;
  --focus-outline-offset: 3px;
  --focus-inner-ring: 0 0 0 1px var(--color-bg);
  --focus-inner-ring-on-light: 0 0 0 1px var(--color-ink);

  /* ── §3.4 Functional / state colour ──────────────────────────────────────── */
  --color-state-warn: var(--color-accent-2);
  --color-state-info: var(--color-accent); /* single-instance contexts only */
  --color-state-info-repeat: var(--color-ink-muted); /* repeated-row contexts */
  --color-state-ok: var(--color-ink-muted);
  --color-state-neutral: var(--color-ink-muted);

  /* ── §3.6 Scrims ──────────────────────────────────────────────────────────── */
  --color-scrim-flat: rgb(30 33 36 / 0.72);
  --color-scrim-hero-top: linear-gradient(
    to bottom,
    rgb(30 33 36 / 0.96) 0,
    rgb(30 33 36 / 0.88) 64px,
    rgb(30 33 36 / 0) 136px
  );
  --color-scrim-modal: rgb(30 33 36 / 0.86);

  /* ── §4.1 Font stacks ─────────────────────────────────────────────────────── */
  --font-stack-display-lat:
    "Oswald", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  --font-stack-display-ar:
    "Changa", "Noto Kufi Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --font-stack-text-lat:
    "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-stack-text-ar:
    "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro",
    sans-serif;
  --font-stack-mono:
    "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font-stack-user-content:
    "Inter", "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ar-scale: 1.06;

  /* ── §4.2 Latin type ramp (size / leading / tracking / weight) ──────────── */
  --text-hero-lat-size: clamp(3.25rem, 11vw, 8.5rem);
  --text-hero-lat-leading: 0.92;
  --text-hero-lat-tracking: 0.02em;
  --text-hero-lat-weight: 500;
  --text-h2-lat-size: clamp(1.875rem, 5vw, 3.25rem);
  --text-h2-lat-leading: 1;
  --text-h2-lat-tracking: 0.02em;
  --text-h2-lat-weight: 500;
  --text-h3-lat-size: 1.375rem;
  --text-h3-lat-leading: 1.15;
  --text-h3-lat-tracking: 0.02em;
  --text-h3-lat-weight: 500;
  --text-body-lat-size: 17px;
  --text-body-lat-leading: 1.6;
  --text-body-lat-tracking: 0;
  --text-body-lat-weight: 400;
  --text-body-strong-lat-size: 17px;
  --text-body-strong-lat-leading: 1.6;
  --text-body-strong-lat-tracking: 0;
  --text-body-strong-lat-weight: 600;
  --text-label-lat-size: 13px;
  --text-label-lat-leading: 1.4;
  --text-label-lat-tracking: 0.08em;
  --text-label-lat-weight: 500;
  --text-legal-lat-size: 16px;
  --text-legal-lat-leading: 1.65;
  --text-legal-lat-tracking: 0;
  --text-legal-lat-weight: 400;
  --text-data-lat-size: 15px;
  --text-data-lat-leading: 1.5;
  --text-data-lat-tracking: 0.02em;
  --text-data-lat-weight: 400;
  --text-data-lg-lat-size: 18px;
  --text-data-lg-lat-leading: 1.4;
  --text-data-lg-lat-tracking: 0.02em;
  --text-data-lg-lat-weight: 500;
  --text-control-lat-size: 17px;
  --text-control-lat-leading: 1.4;
  --text-control-lat-tracking: 0;
  --text-control-lat-weight: 400;
  --text-nav-lat-size: 16px;
  --text-nav-lat-leading: 1.4;
  --text-nav-lat-tracking: 0;
  --text-nav-lat-weight: 400;
  --text-chip-lat-size: 18px;
  --text-chip-lat-leading: 1;
  --text-chip-lat-tracking: 0.04em;
  --text-chip-lat-weight: 500;

  /* ── §4.3 Arabic type ramp ────────────────────────────────────────────────
     Tracking is transcribed as documentation only — the §4.5 `:lang(ar)` base
     layer forces `letter-spacing: 0 !important` on every Arabic run regardless. */
  --text-hero-ar-size: clamp(2.75rem, 8.5vw, 6.5rem);
  --text-hero-ar-leading: 1.18;
  --text-hero-ar-weight: 700;
  --text-h2-ar-size: clamp(1.75rem, 4.4vw, 2.75rem);
  --text-h2-ar-leading: 1.3;
  --text-h2-ar-weight: 700;
  --text-h3-ar-size: 24px;
  --text-h3-ar-leading: 1.5;
  --text-h3-ar-weight: 700;
  --text-body-ar-size: 19px;
  --text-body-ar-leading: 1.85;
  --text-body-ar-weight: 400;
  --text-body-strong-ar-size: 19px;
  --text-body-strong-ar-leading: 1.85;
  --text-body-strong-ar-weight: 500;
  --text-label-ar-size: 15px;
  --text-label-ar-leading: 1.6;
  --text-label-ar-weight: 500;
  --text-legal-ar-size: 18px;
  --text-legal-ar-leading: 1.9;
  --text-legal-ar-weight: 400;
  --text-data-label-ar-size: 15px;
  --text-data-label-ar-leading: 1.6;
  --text-data-label-ar-weight: 500;
  --text-data-value-ar-size: 17px;
  --text-data-value-ar-leading: 1.7;
  --text-data-value-ar-weight: 400;
  --text-control-ar-size: 19px;
  --text-control-ar-leading: 1.5;
  --text-control-ar-weight: 400;
  --text-nav-ar-size: 17px;
  --text-nav-ar-leading: 1.5;
  --text-nav-ar-weight: 400;
  --text-chip-ar-size: 19px;
  --text-chip-ar-leading: 1.2;
  --text-chip-ar-weight: 700;

  /* ── §4.8 Measure ─────────────────────────────────────────────────────────── */
  --measure-lead-lat: 52ch;
  --measure-lead-ar: 48ch;
  --measure-body: 62ch; /* §4.8 — resolves against the active face, no per-script override */
  --measure-legal: 66ch;

  /* ── §5 Spacing — 8px base; only these steps exist ───────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;

  --container-max: 1360px;
  --gutter: 20px;
  --gutter-lg: 48px; /* >=1024px */
  --section-rhythm: 96px; /* mobile — constant */
  --section-rhythm-lg: 128px; /* >=1024px */
  --row-pad-block: 12px;
  --target-min: 44px;
  --target-gap-min: 8px;
  --edge-safe: 16px;

  /* ── §6 Radii / §7.1 Shadows — zero everywhere, an identity decision ────── */
  --radius: 0;
  --shadow: none;

  /* ── §7.2 Duration ladder / §7.3 Easing ──────────────────────────────────── */
  --duration-instant: 0ms;
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-slower: 700ms;
  --duration-cine: 900ms;
  --duration-deckshift: 380ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* ── §7.4 Motion vocabulary — the numeric values components read ────────── */
  --underline-offset: 5px;
  --underline-thickness: 2px;
  --shunt-distance: 40px;
  --stagger: 28ms;

  /* ── §9 Breakpoints (mobile-first; documentation only — CSS custom
     properties cannot appear inside an @media feature, so every @media rule
     in base.css / public.css hardcodes these same numbers and cites this
     comment) ───────────────────────────────────────────────────────────────
     bp-base: 390px   bp-md: 768px   bp-lg: 1024px   bp-xl: 1440px */

  /* ── §11.3a Stacking order (the whole scale: seam < rail < nav < skip link
     < loader) — the loader covers everything, briefly, on first paint. ────── */
  --nav-z: 60;
  --skip-link-z: 80;
  --loader-z: 90;

  /* ── §2.3 Power-up loader — the wordmark that types/wipes on first paint. The
     client set this to a flat 20px (nav-wordmark size); the loader mark is a
     first-impression display element, much larger. The per-script tracking
     (§2.3 loader-mark-tracking-*) was never transcribed; the mark also renders
     the wordmark, so it takes the same display WEIGHT (hero-*-weight) as
     `.wordmark` — without it the variable faces fell back to 400, a very
     visible drop for Changa 700. (design review, this session.) ──────────── */
  --loader-mark-size: clamp(2rem, 7vw, 4rem);
  --loader-mark-tracking-lat: 0.06em;
  --loader-mark-tracking-ar: 0;

  /* ── §11.2 Welded seam + stencil deck label ──────────────────────────────── */
  --seam-size: 1px;
  --seam-color: var(--color-rule);
  --seam-z: 5;
  --stencil-plate-bg: var(
    --color-bg
  ); /* seam--onsurface: var(--color-surface) */
  --stencil-pad-block: var(--space-8);
  --stencil-pad-inline: var(--space-16);
  --stencil-color: var(--color-accent);

  /* ── §11.7 Hazard chip (+ its ghost variant, used by the skip link) ──────── */
  --chip-block-size: 48px;
  --chip-pad-inline: var(--space-24);
  --chip-bg: var(--color-accent);
  --chip-color: var(--color-chip-text);
  --chip-hover-bg: var(--color-accent-2);
  --chip-ghost-bg: none;
  --chip-ghost-color: var(--color-ink);
  --chip-ghost-border-color: var(--color-control-border);
  --chip-ghost-hover-border-color: var(--color-ink);

  /* ── §11.9 Marked-copy (pending) token ────────────────────────────────────── */
  --pending-color: var(--color-ink);
  --pending-decoration-color: var(--color-accent-2);
  --pending-underline-offset: 4px;
  --pending-decoration-thickness: 1px;

  /* ── §11.19 Inline text link (running copy — S6/S8/S9, not the nav/footer
     index links, which follow the nav's own Live Wire convention below) ──── */
  --link-color: var(--color-ink);
  --link-decoration-color: var(--color-ink-muted);
  --link-hover-color: var(--color-accent);

  /* ── §2.4 Wordmark ────────────────────────────────────────────────────────── */
  --wordmark-size: 20px;
  --wordmark-size-lg: 22px; /* >=1024px */
  --wordmark-tracking-lat: 0.02em;

  /* ── §11.20 Portal/auth chrome — the lang-toggle control (used on every
     public surface per lang-toggle-scope, not only the portal) ──────────── */
  --lang-toggle-target: var(--target-min);
  --lang-toggle-gap: var(--target-gap-min);
  --lang-toggle-active-color: var(--color-ink);
  --lang-toggle-inactive-color: var(--color-ink-muted);

  /* ── §11.20 Portal chrome (B-1) — never sticky/fixed, no stencil label (the
     portal is "a signed-in reading tool, not a marketing surface"). ──────── */
  --portal-header-block-size: 64px;
  --portal-header-bg: var(--color-bg);
  --portal-header-seam: 1px solid var(--color-rule);
  --portal-header-pad-inline: var(--gutter);
  --portal-header-gap: var(--space-16);

  /* ── §11.20 Portal video grid (S13's own record — S12 is a single-column
     month view, no grid) ──────────────────────────────────────────────────── */
  --portal-video-grid-gap: 1px;
  --portal-video-grid-border: 1px solid var(--color-rule);
  --video-card-bg: var(--color-bg);
  --video-card-poster-bg: var(--color-surface);
  --video-card-body-pad: var(--space-16);
  --video-card-body-gap: var(--space-8);
  --video-card-caption-color: var(--color-ink-muted);

  /* ── §11.16/§11.20 Player (S13) — 9/16 master, capped so it never exceeds the
     viewport minus the header, and never forces horizontal scroll at 390px. ── */
  --player-aspect: 9 / 16;
  --player-max-inline-size: 420px;
  --player-max-block-size: calc(
    100svh - var(--portal-header-block-size) - var(--space-64)
  );
  --player-bg: var(--color-bg);
  --player-frame-border: 1px solid var(--color-rule);
  /* `grid2-columns-lg` (1fr 1fr) is explicitly wrong here — design.md's own
     note: a 9:16 master at 1fr of a 1360px container is 680px wide, taller
     than any laptop viewport. */
  --player-columns-lg: minmax(300px, 0.38fr) minmax(0, 1fr);

  /* ── §11.4 Hero nav band (the shared-chrome nav block-size only — the rest
     of §11.4's hero tokens belong to whichever slice builds S1's hero) ───── */
  --hero-nav-block-size: 64px;

  /* ── §11.11 Forms (slice A-2: S14, S29) — the fields, checkboxes and password
     reveal control S14/S29 are the first screens to actually render. ────── */
  --field-bg: var(--color-surface);
  --field-border-width: 1px;
  --field-border-color: var(--color-control-border);
  --field-radius: var(--radius);
  --field-min-block-size: 48px;
  /* The inline SVG select-chevron's own box (viewBox 0 0 16 16). It is an ICON
     width, not a spacing step, so it is its own token rather than a --space-*. */
  --select-chevron-size: 16px;
  --field-pad-inline: var(--space-16);
  --field-label-gap: var(--space-8);
  --field-stack-gap: var(--space-24);
  --field-error-color: var(--color-state-warn);
  /* §11.11 field-error-icon (required — errors are never colour-only). An
     achromatic warning triangle (§3.4) used as a CSS `mask`, so it takes
     `--field-error-color` via `background-color: currentColor` rather than
     hardcoding a fill; the exclamation is knocked out with fill-rule evenodd. */
  --field-error-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.2 L15 14.5 L1 14.5 Z M7.1 5.6 L8.9 5.6 L8.9 9.6 L7.1 9.6 Z M7.1 10.9 L8.9 10.9 L8.9 12.7 L7.1 12.7 Z'/%3E%3C/svg%3E");
  --field-disabled-bg: var(--color-surface);
  --field-disabled-border-color: var(--color-rule);
  --field-disabled-color: var(--color-ink-muted);
  --password-reveal-target: 44px;
  --password-reveal-color: var(--color-ink-muted);
  --password-reveal-hover-color: var(--color-ink);
  --field-pad-inline-end-with-reveal: calc(
    var(--space-16) + 44px + var(--space-12)
  );

  /* ── §11.11 Checkbox + radio (slice A-3, S6 — the first real consumer;
     A-2's own header comment over-promised these, only fields/password-reveal
     were actually added at the time) ──────────────────────────────────────── */
  --checkbox-size: 24px;
  --checkbox-border: 2px solid var(--color-control-border);
  --checkbox-checked-bg: var(--color-ink);
  --checkbox-checked-glyph: var(--color-bg);
  --checkbox-target: 44px;
  --checkbox-label-gap: var(--space-12);
  --radio-size: 24px;
  --radio-border: 2px solid var(--color-control-border);
  --radio-radius: 0; /* SQUARE — stated, not an oversight (design.md §6/§11.11) */
  --radio-checked-mark-size: 12px;
  --radio-checked-mark-color: var(--color-ink);
  --radio-target: 44px;
  --radio-label-gap: var(--space-12);
  --radio-group-gap: var(--space-12);

  /* ── §11.12 Busy, loading and progress (S14/S29's submit `busy-tick`) ───── */
  --busy-tick-color: var(--color-ink);
  --busy-tick-duration: 900ms;
  --busy-tick-positions: 12;
  --slow-threshold-ms: 8000;

  /* ── §11.13 Plates (S14's error plate; S28 is entirely plates) ──────────── */
  --plate-bg: var(--color-surface);
  --plate-pad: var(--space-24);
  --plate-standalone-pad: var(--space-32);
  --plate-border-inline-start-width: 2px;
  --plate-warn-color: var(--color-state-warn);
  --plate-neutral-color: var(--color-rule);
  /* S12's stale-metrics banner (design.md: "a single-instance context, so
     color-state-info (accent) is permitted here and only here on this screen") —
     `--color-state-info` is itself accent-scoped for exactly this reason. */
  --plate-info-color: var(--color-state-info);
  --plate-max-inline-size: 560px;

  /* ── §11.20 Portal/auth chrome — the single-column auth measure (S14's card
     uses plate-max-inline-size above; S29 uses this one — see design.md's own
     note on why the two, while both 560px today, are separate tokens). ───── */
  --form-column-max-inline-size: 480px;

  /* ── §11.5 Manifest row — item-row grid only (the smoke page's fact list is the
     first consumer; the rest of §11.5 — key/value colours, record-row-columns — is
     added by whichever slice first builds a real manifest table). ────────────── */
  --manifest-row-columns: minmax(96px, auto) 1fr;
  --record-row-columns: minmax(120px, auto) 1fr; /* §11.5 — the wider record-table variant, S8/S9 */

  /* Named ≥1024px column splits from design.md 815-817. These were shipped as
     raw literals in public.css/s4.css (the engineers' own comments even named
     the spec value beside the literal) — a §0 token-law violation the design
     review caught. Transcribed verbatim so the source of truth is design.md. */
  --hero-under-columns-lg: minmax(0, 1fr) minmax(320px, 0.55fr); /* S1/S3 headline : manifest */
  --proof-columns-lg: 1.6fr 1fr; /* S4 form : side manifest, deliberately asymmetric */
  --grid2-columns-lg: 1fr 1fr; /* S5 even split (its gap stays space-64 at the call site) */

  /* ── §11.18 Back office. A-2 added the minimal nav-shell subset for S28's
     "shell renders with the signed-in role's own nav"; A-4 (S23) is the first
     screen needing the rest — row/table, tab and stencil-status tokens. Values
     transcribed verbatim from §11.18's code block; every colour/spacing value
     re-points at an existing token rather than a new literal. ─────────────── */
  --bo-nav-inline-size: 240px;
  --bo-nav-bg: var(--color-surface);
  --bo-nav-edge-width: 1px;
  --bo-topbar-block-size: var(--space-64);
  --bo-stencil-color: var(--color-ink-muted);
  --bo-section-rhythm: var(--space-32);
  --bo-block-gap: var(--space-24);
  --bo-row-block-size: 44px;
  --bo-row-pad-block: var(--space-12);
  --bo-row-rule: 1px solid var(--color-rule);
  --bo-card-pad: var(--space-16);
  --bo-card-bg: var(--color-surface);
  --bo-card-border: 1px solid var(--color-rule);
  /* S20's board columns, design.md §11.18 — not tokenised until the board itself shipped. */
  --bo-board-column-min-inline-size: 240px;
  --bo-tab-gap: var(--space-8);
  --bo-tab-active-color: var(--color-ink);
  --bo-tab-active-underline: 2px solid var(--color-ink);
  --bo-tab-inactive-color: var(--color-ink-muted);
  --bo-status-mark-color: var(--color-ink-muted);
  --bo-status-mark-warn: var(--color-state-warn);
  --bo-status-mark-neutral: var(--color-state-info-repeat);
  --bo-content-max-inline-size: calc(
    var(--container-max) - var(--bo-nav-inline-size)
  );

  /* ── §11.4 Hero (slice A-3, S1) — the rest of the hero token set the A-1 note
     above deferred to "whichever slice builds S1's hero". ─────────────────── */
  --hero-media-block-size: calc(
    76svh * 0.58
  ); /* >=768px, min 340px enforced in CSS */
  --hero-media-block-size-min: 340px;
  --hero-media-block-size-mobile: 44svh; /* min 280px enforced in CSS */
  --hero-media-block-size-mobile-min: 280px;
  --hero-deck-min-block-size: clamp(220px, calc(76svh * 0.42), 380px);
  --hero-deck-pad-block: var(--space-24) var(--space-32);
  --hero-headline-bleed-lat: calc(var(--gutter) * -1 - 4px);
  /* design.md §11.4: `calc(var(--gutter) * -1)` — Arabic pulls flush to the
     start edge but does NOT overhang off-screen. The value `0` had been
     transcribed here from the DESCRIPTION ("does not bleed off-viewport")
     rather than the value; flush-to-gutter still needs the negative pull to
     cancel the deck's own gutter padding, or the AR headline sits a full
     gutter inboard of the Latin one. (design review, this session.) */
  --hero-headline-bleed-ar: calc(var(--gutter) * -1);
  --hero-under-gap-lg: var(--space-48);
  --hero-grade: grayscale(0.55) contrast(1.18) brightness(0.68);
  --hero-wash-color: var(--color-bg);
  --hero-wash-opacity: 0.34;
  --hero-crop-desktop: 50% 45%;
  --hero-crop-mobile: 50% 40%;
  --hero-scrim-height: 136px;

  /* ── §11.3 / §11.3a Fixed rail (S1–S10, >=1024px only, public site only) ─── */
  --rail-z: 40;
  --rail-plate-bg: var(--color-bg);
  --rail-plate-pad: 10px 5px;
  --rail-gap: 14px;
  --rail-position-block-start: 64%;
  --rail-position-inline-start: 2px;
  --rail-notch-inline-size: 14px;
  --rail-notch-block-size: 2px;
  --rail-notch-off: var(--color-track);
  --rail-notch-on: var(--color-ink);

  /* ── §11.5 Manifest row, continued (S1's eligibility + tier manifests were
     the first real consumers — A-1's smoke fact list used only the grid) ──── */
  --manifest-row-gap: var(--space-16);
  --manifest-key-color: var(--color-ink-muted);
  --manifest-value-color: var(--color-ink);

  /* ── §10 Deck rhythm — every public deck S1–S10 shares this section rhythm ── */
  --deck-pad-block: var(--space-96); /* >=1024px: var(--deck-pad-block-lg) */
  --deck-pad-block-lg: var(--space-128);

  /* ── §11.8 Tier block (S2) ────────────────────────────────────────────────── */
  --tier-bg: var(--color-surface);
  --tier-pad: var(--space-24);
  --tier-gap: var(--space-12);
  --tier-list-gap: var(--space-8);
  --tier-list-marker-color: var(--color-ink-muted);
  --tier-list-marker-color-inverted: var(--color-invert-ink-2);
  --tier-featured-bg: var(--color-invert-bg);
  --tier-featured-ink: var(--color-invert-ink);
  --tier-featured-secondary: var(--color-invert-ink-2);
  --price-type-size: 18px;
  --price-type-tracking: 0.02em;

  /* ── §11.7 Hazard chip, inverted variant (S2's featured tier — hazard yellow on
     chalk white is unreadable, so the featured tier's CTA inverts instead) ───── */
  --chip-invert-bg: var(--color-bg);
  --chip-invert-color: var(--color-ink);
  --chip-invert-hover-bg: var(--color-surface);
}