/* The house face, self-hosted (FASCIA.PRIVACY: no third-party request on any
 * route). These are the variable Roboto Mono woff2 files the 2026-10-02 design
 * drop ships (docs/design-reference), latin and latin-ext subsets only; the
 * build copies fonts/ into dist/fonts/. One face covers weights 300-700. */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/roboto-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/roboto-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NEW DAWN — design tokens (DESIGN.md §3.6).
 *
 * The ONLY file in this repo allowed to carry a hex colour literal inside a
 * <style> context — the build gate rejects `#[0-9a-fA-F]{3,8}` inside any
 * view's <style scoped> block, but this plain stylesheet is loaded once by
 * ui/host/index.html via <link rel="stylesheet"> and every component reaches
 * these values only through var(--…) lookups.
 *
 * Section 1 is the minimal set the vendored/reused primitives (button, field,
 * table, empty-state, skeleton, pill, kv, toggle, stat) actually reference —
 * verbatim names from docs/research/ignis-build.md §7. Section 2 is New
 * Dawn's own additions: one accent, the 11 story + 5 epic status colour
 * pairs, a neutral status pair, and the four dawn-lab-inspector colours.
 *
 * Palette: warm off-white canvas + ink text + one sunrise-orange accent —
 * New Dawn's own values, not a copy of any reference console's cool-gray scheme.
 */

:root {
  /* ---- 0a. The house palette (docs/design-reference/fascia-dc.html, the
     /system page's own swatch names). Every view reaches these through var():
     ink is the page ground, char the raised surface, the three mutes carry
     metadata / supporting prose / body text, amber is the single accent, bone
     is headings. The hairlines are mute-soft at the design's alphas. ---- */
  --ink: #1A1A1D;
  --char: #2A2A2D;
  --mute-deep: #6B6B6B;
  --mute: #A3A0A0;
  --mute-soft: #D7D4CE;
  --amber-deep: #C18120;
  --amber: #E89B2C;
  --amber-soft: #F5C684;
  --bone: #EDE9E2;
  --paper: #FFFFFF;
  /* The grounds the lab's evidence block shows a raw image on. An artefact is drawn for one
     theme (the console's dark icon is near-white strokes, its light icon near-black), so the
     plate follows the artefact, not the page: the leaf picks dark-ground or light-ground from
     the theme the task asked for. Both are static on purpose — daylight.ts never rewrites
     them, which is what makes the artefact legible at every hour. */
  --raw-ground-dark: #1A1A1D;
  --raw-ground-light: #FFFFFF;
  /* Amber as text (the design's --at) and text on an amber fill (--oa, ink in
     both themes). At runtime view/lib/daylight.ts rewrites this whole section
     and the legacy ramp below on the document so the theme follows the sun;
     these are the dark pole it starts from. */
  --amber-ink: #E89B2C;
  --on-amber: #1A1A1D;
  --hair-7: rgba(215, 212, 206, 0.07);
  --hair-8: rgba(215, 212, 206, 0.08);
  --hair-12: rgba(215, 212, 206, 0.12);
  --hair-14: rgba(215, 212, 206, 0.14);
  --hair-16: rgba(215, 212, 206, 0.16);
  --hair-18: rgba(215, 212, 206, 0.18);
  --hair-22: rgba(215, 212, 206, 0.22);
  --hair-24: rgba(215, 212, 206, 0.24);
  --hair-28: rgba(215, 212, 206, 0.28);
  --hair-30: rgba(215, 212, 206, 0.30);
  --header-veil: rgba(26, 26, 29, 0.94);
  --overlay-veil: rgba(18, 18, 20, 0.86);
  --amber-grid: rgba(232, 155, 44, 0.06);
  --amber-stroke: rgba(232, 155, 44, 0.38);
  --amber-tint: rgba(232, 155, 44, 0.12);

  /* ---- 0. Breakpoints (story #2795): the three named responsive boundaries.
     mobile ≤ 600px, tablet 601–1024px, desktop ≥ 1025px.
     --bp-mobile-max is the upper bound of the mobile range (600px), used in
     media queries as (max-width: var(--bp-mobile-max)) or the complementary
     (min-width: calc(var(--bp-mobile-max) + 1px)) for tablet/desktop.
     --bp-tablet-max is the upper bound of the tablet range (1024px), used
     in media queries as (max-width: var(--bp-tablet-max)) or the complementary
     (min-width: calc(var(--bp-tablet-max) + 1px)) for desktop.
     --bp-desktop-max is the upper bound for the 1920px readability cap,
     used on main's max-inline-size so line length does not stretch past
     75 characters above that width. ---- */
  --bp-mobile-max: 600px;
  --bp-tablet-max: 1024px;
  --bp-desktop-max: 1920px;

  /* ---- 1. Minimal set the reused primitives reference (ignis-build.md §7) ---- */

  --border-hairline: #3a3a3d;

  --elevation-0: 0 1px 2px rgba(0, 0, 0, 0.30);
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.55);

  --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-sans: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace;

  --motion-duration-instant: 80ms;
  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 360ms;
  --motion-duration-slower: 520ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --motion-easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-easing-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --motion-easing-ease-out: cubic-bezier(0, 0, 0.58, 1);
  --motion-easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --motion-easing-ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);
  --motion-easing-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-easing-ease-back-in-out: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --motion-stagger-tight: 40ms;
  --motion-stagger-base: 80ms;
  --motion-stagger-loose: 160ms;
  --motion-stagger-fade-in: 50ms;
  --motion-stagger-slide-up: 75ms;
  --motion-stagger-scale-pop: 100ms;
  --motion-fill: .3s ease;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-2xl: 13px;
  --radius-full: 50%;

  /* The hero headline: 66px at desktop per the design reference (the measured
     h1), clamped down to 40px on small screens. Used by home-hero; hex-free
     type sizing lives here, not in a view. */
  --size-title-hero: clamp(40px, 6vw + 20px, 66px);
  --size-title: 29px;
  --size-item: 12.5px;
  --size-prose: 13.5px;
  --size-body: 14px;
  --size-small: 12px;
  --size-tiny: 11.5px;
  --size-micro: 10.5px;
  --size-label: 10px;
  --size-kicker: 9.5px;

  --space-1: 2px;
  --space-2: 3px;
  --space-3: 6px;
  --space-4: 7px;
  --space-5: 9px;
  --space-6: 13px;
  --space-7: 16px;
  --space-8: 22px;
  --space-9: 28px;
  --space-10: 44px;

  --status-good-fg: #7fd6a4;
  --status-good-bg: #1f2a24;
  --status-good-border: #2c4436;
  --status-bad-fg: #e88a80;
  --status-bad-bg: #2c1f1e;
  --status-bad-border: #4a2c2a;
  --status-warn-fg: #e89b2c;
  --status-warn-bg: #2a2418;
  --status-warn-border: #4a3d20;

  --surface-canvas: #1a1a1d;
  --surface-card: #2a2a2d;
  --surface-track: #2a2a2d;
  --surface-well: #2a2a2d;

  --text-primary: #ede9e2;
  --text-secondary: #d7d4ce;
  --text-tertiary: #a3a0a0;
  --text-quaternary: #6b6b6b;
  --text-inverse: #1a1a1d;

  /* ---- 2. New Dawn additions (DESIGN.md §3.6) ---- */

  --accent: #e89b2c;

  /* Story statuses (11): backlog refined ready in_progress development
     testing code_review ready_for_deployment deployed done cancelled.
     Epic statuses (5): planning in_progress review done cancelled — the
     three names shared with story status reuse the same pair below. */
  --status-backlog-fg: #d7d4ce;
  --status-backlog-bg: #2a2a2d;
  --status-refined-fg: #8fb8d8;
  --status-refined-bg: #1e242b;
  --status-ready-fg: #7fd6c0;
  --status-ready-bg: #1c2a27;
  --status-in_progress-fg: #e89b2c;
  --status-in_progress-bg: #2a2418;
  --status-development-fg: #a89fe0;
  --status-development-bg: #232130;
  --status-testing-fg: #c99fd8;
  --status-testing-bg: #2a2130;
  --status-code_review-fg: #8fd0e0;
  --status-code_review-bg: #1c2a2e;
  --status-ready_for_deployment-fg: #8fb8d8;
  --status-ready_for_deployment-bg: #1e242b;
  --status-deployed-fg: #7fd6a4;
  --status-deployed-bg: #1f2a24;
  --status-done-fg: #7fd6a4;
  --status-done-bg: #1f2a24;
  --status-cancelled-fg: #e88a80;
  --status-cancelled-bg: #2c1f1e;
  --status-planning-fg: #a8b0c8;
  --status-planning-bg: #23252c;
  --status-review-fg: #c99fd8;
  --status-review-bg: #2a2130;

  /* A neutral status conveyed by text alone — no background/border chosen for it. */
  --status-neutral-fg: #d7d4ce;
  --status-neutral-bg: transparent;

  /* ---- 2a. StatusSemantics (story #2779): the five closed-set status pairs
     the StatusSemantics module (view/status-semantics.ui.ig) maps to, plus the
     shared accent token the selected filter-chip state, the venture-card
     primary action and the ledger-row current indicator all resolve to.
     venture-card, filter-chip and ledger-row reach these only through
     var(--…) — no colour, font or spacing literal lives in their source. */
  --status-active-fg: #7fd6a4;
  --status-active-bg: #1f2a24;
  --status-archived-fg: #a8b0c8;
  --status-archived-bg: #23252c;
  --status-deprecated-fg: #e88a80;
  --status-deprecated-bg: #2c1f1e;
  --status-in-progress-fg: #e89b2c;
  --status-in-progress-bg: #2a2418;
  --status-shippable-fg: #7fd6c0;
  --status-shippable-bg: #18262a;

  /* Manifesto route (story #2401): doctrine row and empty-state colours. */
  --doctrine-row-gap: 22px;
  --doctrine-row-ordinal-fg: #A79E86;
  --doctrine-row-title-fg: #201C16;
  --doctrine-row-statement-fg: var(--text-secondary);
  --manifesto-empty-fg: var(--text-tertiary);
  --manifesto-empty-bg: var(--surface-card);
  --manifesto-empty-border: var(--border-hairline);

  /* dawn-lab-inspector: wire direction, warn and wedge (stuck-dispatch) states. */
  --dawn-wire-out: #8fb8d8;
  --dawn-wire-in: #7fd6c0;
  --dawn-warn: #e89b2c;
  --dawn-wedge: #e88a80;

  /* ---- 2b. Design-system route (story #2810): token-usage linting rules ---- */

  /* The design-system route's lint-rule cards: the pass/fail state of each
     linting rule (hex codes, rem units, z-index values outside the tokens
     file) renders through these pairs, never a literal in a view. */
  --lint-pass-fg: #2F7A52;
  --lint-pass-bg: #EAF5EE;
  --lint-pass-border: #C3E2CD;
  --lint-fail-fg: #C0524A;
  --lint-fail-bg: #FBEEED;
  --lint-fail-border: #E6C3BF;

  /* The design-system route's rule list: the vertical rule that separates
     each linting rule from the next. */
  --lint-rule: #E2DCCE;
  --lint-rule-dot: #C1652B;

  /* ---- 3. Shared shell (story #2751): site-header, site-footer, beacon-indicator ---- */

  /* Beacon indicator: the live-status dot in the site-header. Amber semantics
     from the design reference become named tokens here, never a literal in a view. */
  --beacon-live-fg: #B06A12;
  --beacon-live-bg: #FBF1E4;
  --beacon-live-border: #EBCE9D;
  --beacon-idle-fg: var(--text-tertiary);
  --beacon-idle-bg: var(--surface-card);
  --beacon-idle-border: #E2DCCE;
  --beacon-error-fg: #C0524A;
  --beacon-error-bg: #FBEEED;
  --beacon-error-border: #E6C3BF;

  /* Shell chrome: header/footer hairline separation and the page-body slot. */
  --shell-header-bg: var(--surface-canvas);
  --shell-footer-bg: var(--surface-canvas);
  --shell-footer-fallback-bg: var(--surface-canvas);
  --shell-footer-fallback-color: var(--text-secondary);
  --shell-footer-fallback-font: 'IBM Plex Sans', system-ui, sans-serif;
  --shell-footer-fallback-padding: 22px 28px;
  --shell-border: #E2DCCE;
  --shell-page-body-bg: var(--surface-canvas);

  /* Site-footer (story #2766): the shared footer's own text, link and
     divider colours. Body text and links meet WCAG AA (>= 4.5:1) against
     --shell-footer-bg; the divider meets the 3:1 non-text threshold. */
  --footer-text-fg: var(--text-secondary);
  --footer-text-bg: transparent;
  --footer-link-fg: #201C16;
  --footer-link-bg: transparent;
  --footer-link-hover-fg: #C1652B;
  --footer-link-hover-bg: #FBF1E4;
  --footer-divider: #E2DCCE;

  /* Site-footer (story #2766): the minimum legible text size the footer
     holds at every breakpoint, and the 44x44 CSS pixel tap-target floor
     that applies below 768px per WCAG 2.5.5. */
  --footer-text-min: 14px;
  --footer-tap-target: 44px;

  /* ---- 4. Router (story #2752): focus ring, active nav, not-found state ---- */

  /* Keyboard focus ring: the router moves focus to the main content region on
     every route change; the ring is drawn through this token pair, never a
     literal in a view. */
  --focus-ring: #C1652B;
  --focus-ring-soft: rgba(193, 101, 43, 0.28);

  /* Focus-ring geometry (story #2796, AC-9): the ring's width and offset are
     token-driven so every focusable component — links, buttons, inputs, chips,
     cards — draws one identical visible indicator via var() lookups, never a
     per-view literal. --focus-ring (#C1652B) meets the 3:1 contrast floor
     against both --surface-canvas (#F7F4EE) and --surface-well (#FBF9F4). */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Active in-app nav control: the route the address bar currently shows. */
  --nav-active-fg: #FFD9B3;
  --nav-active-bg: #3A2A17;
  --nav-active-border: #5A4329;
  --nav-idle-fg: #D7D4CE;
  --nav-idle-bg: transparent;
  --nav-idle-border: transparent;

  /* Not-found view (unknown path): the status indicator renders state
     "not-found" through this pair. */
  --not-found-fg: #FFB4AC;
  --not-found-bg: #3D1E1B;
  --not-found-border: #5E2E29;

  /* ---- 5. /now route (story #2753): live-status strip, pulse, timeline ---- */

  /* The /now route's live-status strip: the "what is happening right now"
     banner. Amber semantics from the design reference become named tokens
     here, never a literal in a view. */
  --now-strip-fg: #B06A12;
  --now-strip-bg: #FBF1E4;
  --now-strip-border: #EBCE9D;

  /* The /now route's pulse dot: the animated live indicator beside the
     strip's status text. */
  --now-pulse-fg: #B06A12;
  --now-pulse-bg: #FBF1E4;
  --now-pulse-border: #EBCE9D;

  /* The /now route's timeline: the vertical rule that separates each entry
     from the next. */
  --now-timeline-rule: #E2DCCE;
  --now-timeline-dot: #C1652B;

  /* ---- 6. /spec/:slug route (story #2975): spec detail, malformed-slug state ---- */

  /* The spec detail page's header band: the title strip above the spec's
     body. Amber semantics from the design reference become named tokens
     here, never a literal in a view. */
  --spec-header-fg: var(--text-primary);
  --spec-header-bg: var(--surface-canvas);
  --spec-header-border: var(--border-hairline);

  /* The spec detail page's body: the card that carries the spec's sections. */
  --spec-body-bg: var(--surface-card);
  --spec-body-border: var(--border-hairline);

  /* The spec detail page's section headings: the kicker above each section. */
  --spec-section-fg: var(--text-secondary);
  --spec-section-bg: transparent;
  --spec-section-border: transparent;

  /* The spec detail page's malformed-slug state: a slug that fails
     sanitization (traversal, control chars, over-length) renders this
     state instead of the spec body. */
  --spec-malformed-fg: #FFB4AC;
  --spec-malformed-bg: #3D1E1B;
  --spec-malformed-border: #5E2E29;

  /* ---- 7. Root shell (story #2754): skip link, main outlet, reserved chrome ---- */

  /* The shell's skip-to-main-content link: visually hidden until focused,
     then drawn through this pair so the focus ring and the link's own
     surface stay in step with the rest of the chrome. */
  --shell-skip-fg: #FFFFFF;
  --shell-skip-bg: #5A3515;
  --shell-skip-border: #C1652B;

  /* The shell's main content outlet: the region the skip link targets and
     every route view mounts into. */
  --shell-main-bg: var(--surface-canvas);
  --shell-main-border: #E2DCCE;

  /* The shell's reserved header height: downstream page components offset
     scroll anchors by this token so the sticky header never covers them. */
  --shell-header-height: 64px;

  /* The shell's reserved status-bar height: the thin strip between the
     site-header and the main outlet that carries the beacon-indicator. */
  --shell-status-bar-height: 32px;

  /* The shell's reserved footer height: the same reservation, for the
     footer, so anchor math stays consistent at the bottom of the page. */
  --shell-footer-height: 48px;

  /* ---- 8. /colophon route (story #1587): typography system ---- */

  /* The typography system's three font families (story #1587): sans is the
     primary UI face, serif is the editorial/long-form face, mono is the
     code/numerics face. Each is exposed as a CSS custom property here and as
     a matching JSON entry in the design-token manifest; a rename in one place
     propagates to both. */
  --font-family-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-family-serif: 'Source Serif 4', 'Georgia', serif;
  --font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* The Major Third (1.250) modular scale, nine named steps. The scale is
     generated from a base size of 16px at ratio 1.250: step n = 16 * 1.250^(n-1).
     Each step is exposed as a CSS custom property (--text-{step}) and a
     matching utility class (text-{step}); the fluid clamp() forms below cover
     steps 2 through 8 between 320px and 2560px viewports, where preferred =
     min + (max - min) * ((100vw - 320) / 1280). */
  --text-1: 16px;
  --text-2: 20px;
  --text-3: 25px;
  --text-4: 31.25px;
  --text-5: 39.0625px;
  --text-6: 48.828125px;
  --text-7: 61.03515625px;
  --text-8: 76.2939453125px;
  --text-9: 95.367431640625px;

  /* Fluid clamp() sizing for steps 2 through 8: the output never exceeds
     the step's defined max and never drops below its defined min at any
     supported viewport width (320px-2560px). */
  --text-2-fluid: clamp(20px, 20px + (25px - 20px) * ((100vw - 320px) / 1280px), 25px);
  --text-3-fluid: clamp(25px, 25px + (31.25px - 25px) * ((100vw - 320px) / 1280px), 31.25px);
  --text-4-fluid: clamp(31.25px, 31.25px + (39.0625px - 31.25px) * ((100vw - 320px) / 1280px), 39.0625px);
  --text-5-fluid: clamp(39.0625px, 39.0625px + (48.828125px - 39.0625px) * ((100vw - 320px) / 1280px), 48.828125px);
  --text-6-fluid: clamp(48.828125px, 48.828125px + (61.03515625px - 48.828125px) * ((100vw - 320px) / 1280px), 61.03515625px);
  --text-7-fluid: clamp(61.03515625px, 61.03515625px + (76.2939453125px - 61.03515625px) * ((100vw - 320px) / 1280px), 76.2939453125px);
  --text-8-fluid: clamp(76.2939453125px, 76.2939453125px + (95.367431640625px - 76.2939453125px) * ((100vw - 320px) / 1280px), 95.367431640625px);

  /* The constrained weight set {400, 500, 600, 700}: no other weight value is
     valid in the token set. A fontWeight value outside this set is rejected
     with a validation error referencing the allowed values {400, 500, 600,
     700}. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Named line-height pairs: tight (1.15), snug (1.3), normal (1.5),
     relaxed (1.7). Each text-{step} token resolves line-height automatically
     by its step role: display sizes use tight, body sizes use normal,
     long-form uses relaxed. An unknown step role raises a StepRoleNotFound
     error and no line-height pair is returned. */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Letter-spacing tokens: tracking-tight (-0.02em), tracking-normal (0),
     tracking-wide (0.04em). Applied automatically for steps >= 6 (the
     display sizes). */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* The five-step breakpoint model: sm 640px, md 768px, lg 1024px,
     xl 1280px, 2xl 1536px. Steps 1 through 9 each define rem sizes for
     base, md, and xl breakpoints; intermediate steps interpolate. */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Dark-mode weight shift: body text (steps 1 through 5, >= 16px) steps down
     one notch in dark mode to reduce glare; display sizes (steps 6 through 9)
     and small captions are not shifted. The shift is applied automatically
     via the token layer, never a literal in a view. */
  --weight-shift-dark: -100;

  /* The /colophon route's specimen band: the card that carries the live
     token table and the responsive demo. The token table renders the nine
     named steps of the Major Third modular scale, each with its px value and
     its step role. */
  --colophon-specimen-bg: var(--surface-card);
  --colophon-specimen-border: var(--border-hairline);

  /* The /colophon route's token table: the hairline rule between rows. The
     table renders the nine named steps of the Major Third modular scale,
     each with its px value and its step role. */
  --colophon-table-rule: var(--border-hairline);

  /* The /colophon route's code sample: the well surface behind the
     copy-as-CSS / copy-as-JSON sample. */
  --colophon-code-bg: var(--surface-well);
  --colophon-code-border: var(--border-hairline);

  /* ---- 9. /ventures route (story #2755): venture-card, filter-chip, status-pill ---- */

  /* The /ventures route's venture-card: the card that carries one venture's
     name, status and summary. */
  --venture-card-bg: #FFFFFF;
  --venture-card-border: #E2DCCE;

  /* The /ventures route's filter-chip: the toggle that narrows the card
     list by status. */
  --filter-chip-fg: var(--text-secondary);
  --filter-chip-bg: transparent;
  --filter-chip-border: #E2DCCE;
  --filter-chip-active-fg: #C1652B;
  --filter-chip-active-bg: #FBF1E4;
  --filter-chip-active-border: #EBCE9D;

  /* The /ventures route's status-pill: the small status indicator on each
     card. */
  --status-pill-fg: var(--text-secondary);
  --status-pill-bg: var(--surface-card);
  --status-pill-border: #E2DCCE;

  /* ---- 9a. /manifesto route (story #2780): doctrine-value-row, page-section-header ---- */

  /* The /manifesto route's doctrine-value-row: the editorial row that carries
     one declared value's ordinal, title and statement. The row's surface,
     hairline divider between rows, and the three text fields. Colours meet
     WCAG 2.1 AA against --surface-card; the focus ring reuses the router's
     --focus-ring pair so it is visible in both themes. */
  --doctrine-row-bg: var(--surface-canvas);
  --doctrine-row-border: var(--border-hairline);
  --doctrine-row-ordinal-fg: var(--accent);
  --doctrine-row-ordinal-bg: transparent;
  --doctrine-row-title-fg: var(--text-primary);
  --doctrine-row-title-bg: transparent;
  --doctrine-row-statement-fg: var(--text-secondary);
  --doctrine-row-statement-bg: transparent;
  --doctrine-row-tag-fg: var(--text-tertiary);
  --doctrine-row-tag-bg: transparent;
  --doctrine-row-focus-fg: #C1652B;
  --doctrine-row-focus-bg: transparent;
  --doctrine-row-gap: 16px;
  --doctrine-row-padding: 22px 28px;
  --doctrine-row-radius: 8px;

  /* The /manifesto route's page-section-header: the kicker, heading and
     lede that open the page above the doctrine-value-row list. */
  --manifesto-header-kicker-fg: var(--accent);
  --manifesto-header-kicker-bg: transparent;
  --manifesto-header-title-fg: var(--text-primary);
  --manifesto-header-title-bg: transparent;
  --manifesto-header-lede-fg: var(--text-secondary);
  --manifesto-header-lede-bg: transparent;
  --manifesto-empty-fg: var(--text-tertiary);
  --manifesto-empty-bg: var(--surface-card);
  --manifesto-empty-border: var(--border-hairline);

  /* ---- 10. Legacy token fallbacks (story #2809): pre-#1586 variable names
     that components written before the token set landed may still reference.
     Each legacy name aliases the new token it maps to, so a component that
     has not yet been migrated renders identically under both light and dark
     modes. The alias is the fallback; the new token is the source of truth.
     A migration utility (view/lib/token-fallback.ts) reads this table and
     rewrites legacy var() references to their new-token equivalents. */

  /* Legacy colour aliases: pre-token-set names that map to the current
     semantic tokens. A component written against --primary, --bg, --fg,
     --border, --muted or --accent-soft before #1586 still resolves to the
     same value it was designed against. */
  --primary: var(--accent);
  --bg: var(--surface-canvas);
  --fg: var(--text-primary);
  --border: var(--border-hairline);
  --muted: var(--text-tertiary);
  --accent-soft: var(--status-warn-bg);

  /* Legacy spacing aliases: pre-token-set names that map to the current
     spacing scale. A component written against --gap, --pad or --margin
     before #1586 still resolves to the same value. */
  --gap: var(--space-4);
  --pad: var(--space-6);
  --margin: var(--space-8);

  /* Legacy radius aliases: pre-token-set names that map to the current
     radius scale. */
  --radius: var(--radius-md);

  /* Legacy elevation aliases: pre-token-set names that map to the current
     elevation scale. */
  --shadow: var(--elevation-1);
  --shadow-lg: var(--elevation-2);

  /* Venture-card (story #2776): the /ventures listing's card surface, its
     hover/focus/active states, and the 1/2/3-column grid breakpoints.
     Colours meet WCAG 2.1 AA against --surface-card; the focus ring reuses
     the router's --focus-ring pair so it is visible in both themes. */
  --venture-card-bg: var(--surface-card);
  --venture-card-border: var(--border-hairline);
  --venture-card-hover-bg: var(--surface-well);
  --venture-card-hover-border: #C1652B;
  --venture-card-active-bg: #FBF1E4;
  --venture-card-active-border: #C1652B;
  --venture-card-name-fg: #201C16;
  --venture-card-tagline-fg: var(--text-secondary);
  --venture-card-action-fg: #C1652B;
  --venture-card-action-bg: transparent;
  --venture-card-action-hover-bg: #FBF1E4;
  --venture-card-grid-gap: 16px;
  --venture-card-radius: 8px;

  /* Legacy z-index aliases: pre-token-set names that map to the current
     z-index scale. */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1050;
  --z-toast: 1100;

  /* ---- 11. /colophon route (story #2781): person-card, page-section-header,
     empty state. Colours meet WCAG 2.1 AA against --surface-card; the focus
     ring reuses the router's --focus-ring pair so it is visible in both
     themes. No colour, font or spacing literal lives in the view. */
  --colophon-header-kicker-fg: var(--accent);
  --colophon-header-kicker-bg: transparent;
  --colophon-header-title-fg: var(--text-primary);
  --colophon-header-title-bg: transparent;
  --colophon-header-lede-fg: var(--text-secondary);
  --colophon-header-lede-bg: transparent;

  --person-card-bg: var(--surface-card);
  --person-card-border: var(--border-hairline);
  --person-card-hover-bg: var(--surface-well);
  --person-card-hover-border: var(--accent);
  --person-card-name-fg: var(--text-primary);
  --person-card-name-bg: transparent;
  --person-card-role-fg: var(--text-secondary);
  --person-card-role-bg: transparent;
  --person-card-link-fg: var(--accent);
  --person-card-link-bg: transparent;
  --person-card-link-hover-bg: var(--surface-well);
  --person-card-dash-fg: var(--text-tertiary);
  --person-card-dash-bg: transparent;
  --person-card-focus-fg: var(--accent);
  --person-card-focus-bg: transparent;
  --person-card-radius: 8px;
  --person-card-padding: 22px 28px;
  --person-card-grid-gap: 16px;
  --person-card-name-max: 32ch;

  --colophon-empty-fg: var(--text-tertiary);
  --colophon-empty-bg: var(--surface-card);
  --colophon-empty-border: var(--border-hairline);
}