/* ========================================================================== GENERATED FILE — do not hand-edit. Source of truth: src/_data/tokens.json (DTCG-style $value/$type). Rendered at build time by this Nunjucks template into plain CSS custom properties on :root. Regenerate by running the Eleventy build — editing this file directly will be overwritten on the next `npm run build`. ========================================================================== */ :root { /* ------------------------------------------------------------------------ Primitive color tokens (raw values, named by what they are) ------------------------------------------------------------------------ */ --color-ink: #031926; --color-ink-2: #0A2635; --color-teal: #468189; --color-teal-deep: #2C656B; --color-teal-muted: #77ACA2; --color-ash: #9DBEBB; --color-faint: #7E9A98; --color-chrome: #4C6168; --color-paper: #F4E9CD; --color-paper-2: #EFE2C4; --color-line: #E3D8BC; --color-line-strong: #C9B98E; --color-sand-deep: #8A7549; --color-terracotta: #C2553F; --color-terracotta-ink: #A8442F; --color-white: #FFFFFF; --color-ink-line: #5A6D6B; /* ------------------------------------------------------------------------ Semantic color tokens — light sections (on paper) ------------------------------------------------------------------------ */ --color-surface: var(--color-paper); --color-surface-alt: var(--color-paper-2); --color-text: var(--color-ink); --color-text-secondary: var(--color-chrome); --color-border: var(--color-line); --color-border-strong: var(--color-line-strong); --color-border-ui: var(--color-sand-deep); --color-accent: var(--color-teal); --color-accent-strong: var(--color-teal-deep); --color-focus: var(--color-teal-deep); --color-spark: var(--color-terracotta-ink); --color-spark-large: var(--color-terracotta); --color-error: var(--color-terracotta-ink); /* ------------------------------------------------------------------------ Semantic color tokens — dark sections (on ink: hero, footer) ------------------------------------------------------------------------ */ --color-surface-inv: var(--color-ink); --color-surface-inv-raised: var(--color-ink-2); --color-text-inv: var(--color-paper); --color-text-inv-secondary: var(--color-teal-muted); --color-text-inv-eyebrow: var(--color-ash); --color-border-inv: var(--color-ink-line); --color-accent-inv: var(--color-ash); --color-focus-inv: var(--color-terracotta-ink); /* ------------------------------------------------------------------------ Semantic color tokens — the terracotta BAND (Direction 2.0 §2/§4.1/§6). A third ground, distinct from both "light" (paper) and "dark" (ink): the mid-home structural band uses terracotta-ink as its own surface, so its text/focus pairs are declared on their own terms rather than reused from .on-ink (proposal §10 #3/#4/#6 — see tokens.json comments). ------------------------------------------------------------------------ */ --color-surface-band: var(--color-terracotta-ink); --color-text-band: var(--color-paper); --color-focus-band: var(--color-paper); /* ------------------------------------------------------------------------ Rail tokens — the numbered sticky marginalia shared by About + case pages (Direction 2.0 §2). ------------------------------------------------------------------------ */ --color-rail-number: var(--color-chrome); --color-rail-tether: var(--color-terracotta-ink); --rail-rule-width: 40px; --rail-sticky-offset: 1rem; --rail-header-height: 4.75rem; --rail-sticky-top: calc(var(--rail-header-height) + var(--rail-sticky-offset)); /* ------------------------------------------------------------------------ Legacy --wf-* aliases — kept so the wireframe markup needs zero class churn for this visual pass. Names are "inert" (wireframe-era), values now point at the real design-token system above. ------------------------------------------------------------------------ */ --wf-ink: var(--color-text); --wf-ink-muted: var(--color-text-secondary); --wf-ink-subtle: var(--color-text-secondary); --wf-line: var(--color-border-strong); --wf-line-soft: var(--color-border); --wf-surface: var(--color-surface); --wf-surface-2: var(--color-surface-alt); --wf-focus: var(--color-focus); /* Layout tokens — unchanged from the wireframe pass */ --wf-container-max: 72rem; --wf-container-pad: 1rem; --wf-container-pad-lg: 2rem; --wf-bp-md: 48rem; /* 768px */ --wf-bp-lg: 64rem; /* 1024px */ /* Spacing scale — unchanged from the wireframe pass */ --wf-space-0: 0; --wf-space-1: 0.25rem; --wf-space-2: 0.5rem; --wf-space-3: 1rem; --wf-space-4: 1.5rem; --wf-space-5: 2rem; --wf-space-6: 3rem; --wf-space-7: 4rem; --wf-measure: 66ch; /* Page-top rhythm (header rule -> first h1 on interior pages) — named rather than reused inline because "distance from header to first heading" is its own semantic decision (layout addendum §1). --wf-space-page-top-lg intentionally equals --wf-space-7 (4rem): an alias of intent, not a new magnitude. */ --wf-space-page-top: 2.5rem; --wf-space-page-top-lg: 4rem; /* ------------------------------------------------------------------------ Type — Roboto (body/UI) + Noto Serif (display) — Direction 2.0 (v2.1). Roboto still does every body/UI job (nav, buttons, forms, captions, card titles) — see proposal §1.2's table for the exact split. Noto Serif is ADDED as a second, display-only voice: hero H1, case-page H1, home section heads, stat numerals, and pull-quotes (italic). It never appears in body copy, nav, or any label at/below 18px (proposal §1.4 floor rule) — enforced by only ever assigning --font-serif to the handful of display tokens below, never to --font-body/-small/-eyebrow. ------------------------------------------------------------------------ */ --font-sans: "Roboto", "Roboto-fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Noto Serif", "Noto Serif-fallback", Georgia, "Times New Roman", serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Serif-only weight instances (see proposal §1.4 per-level table). These are `wght`-axis instances of the single Noto Serif variable file, not extra font files — declared as named tokens so no component hard-codes a raw weight number for a serif element. */ --font-serif-weight-hero: 400; /* hero H1 / case H1 — regular */ --font-serif-weight-head: 500; /* section heads — medium, holds at 1.75-2.25rem */ --font-serif-weight-stat: 325; /* stat numerals — light, the "expensive" beat (safe only >=3rem) */ --font-serif-weight-quote: 400; /* pull-quotes — regular, but italic style */ /* Split scale (proposal §1.3): body steps stay on the current calm ~1.2 ratio (unchanged, untouched reading comfort); display steps (below) jump on a ~1.6 ratio — Noto Serif has no optical-size axis, so the scale itself, not the face, carries the editorial drama. */ --font-display: clamp(2.875rem, 6.5vw, 6rem); /* hero H1 — Noto Serif 400, -0.02em, lh 1.05 */ --font-h1: clamp(2.375rem, 4.25vw, 3.75rem); /* case-page H1 — Noto Serif 400, -0.018em, lh 1.1 */ --font-h2: clamp(1.75rem, 2.5vw, 2.25rem); /* section heads — Noto Serif 500, -0.012em, lh 1.15 */ --font-h3: 1.25rem; /* card/sub-heads — stays Roboto 500 */ --font-stat: clamp(3rem, 5.5vw, 4.5rem); /* stat numerals — Noto Serif 300-350, -0.02em, lh 1.0 */ --font-body-lg: 1.125rem; --font-body: 1rem; --font-small: 0.9375rem; --font-eyebrow: 0.75rem; /* Tracking (letter-spacing) per display level — proposal §1.4. Named so no component hard-codes a bare em value. */ --tracking-display: -0.02em; --tracking-h1: -0.018em; --tracking-h2: -0.012em; --tracking-stat: -0.02em; --tracking-quote: -0.005em; /* italic wants looser tracking than upright display */ /* legacy alias — the wireframe used a single system-font stack */ --wf-font: var(--font-sans); --wf-text-base: var(--font-body); --wf-text-lh: 1.6; /* ------------------------------------------------------------------------ Radii ------------------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ------------------------------------------------------------------------ Shadows — soft, large, ink-tinted ------------------------------------------------------------------------ */ --shadow-sm: 0 2px 8px rgba(3,25,38,0.06); --shadow-md: 0 8px 20px rgba(3,25,38,0.08); --shadow-lg: 0 14px 30px rgba(3,25,38,0.10); --shadow-hover: 0 18px 36px rgba(3,25,38,0.14); /* ------------------------------------------------------------------------ Motion ------------------------------------------------------------------------ */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 250ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); }