/* ============================================================ DESIGN TOKENS — the single machine-readable source of truth. `me/design.md` (in RichardOS) is the human spec; this file is the machine one. If they disagree, one of them is a bug — fix both. Consumed by: - global.css (@import, first line) - HomePageAmendedCopyV1.tsx (via src/styles/tokens.ts → var() strings) - bottleneck-scorecard.html ( in ) NEVER hardcode a font-size or section padding anywhere else. React inline styles can read these directly: fontSize: 'var(--fs-body)'. `npm run check:type` fails the build if a literal creeps back in. ============================================================ */ :root { /* ── Palette — light surface ──────────────────────────── */ --bg: #F8F7F4; --ink: #111111; --accent: #0D7680; --muted: #6A6A6A; --line: #DDDAD4; --portrait-bg: #E6E2DC; /* ── Palette — dark band ──────────────────────────────── */ --band: #111111; --band-ink: #F0EDE8; --band-muted: #999999; --band-accent: #0F8E99; /* ── Palette — teal closing band ──────────────────────── */ --teal: #0D7680; --teal-eyebrow: #BDE6E4; --teal-h2: #FFFFFF; --teal-body: #E4F1F0; --teal-note: #CFE8E6; /* ── Typefaces ────────────────────────────────────────── */ --f-display: "Libre Caslon Display", Georgia, serif; --f-body: "Plus Jakarta Sans", system-ui, sans-serif; /* ── Type scale (me/design.md → "Type scale") ─────────── */ --fs-h1: clamp(2.1rem, 6vw, 4rem); --fs-h2: clamp(1.5rem, 3vw, 2.1rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-deck: clamp(1.05rem, 1.6vw, 1.3rem); --fs-body: 1.05rem; --fs-eyebrow: 0.74rem; --fs-proof: 0.92rem; --fs-caption: 0.82rem; --fs-metric: clamp(1.5rem, 3vw, 2.2rem); --fs-metric-cap: 0.72rem; --fs-btn: 0.95rem; /* ── Line heights ─────────────────────────────────────── */ --lh-h1: 1.04; --lh-h2: 1.12; --lh-h3: 1.2; --lh-deck: 1.55; --lh-body: 1.6; --lh-caption: 1.4; --lh-metric: 1; /* ── Letter spacing ───────────────────────────────────── */ --ls-h1: -0.005em; --ls-eyebrow: 0.2em; --ls-metric-cap: 0.1em; /* ── Spacing (me/design.md → "Spacing", tightened June 2026) ── */ --pad-section: clamp(2rem, 4vw, 3.4rem); --pad-teal: clamp(2.4rem, 4.5vw, 4rem); --pad-hero-top: clamp(2.4rem, 5vw, 4rem); --pad-hero-bottom: clamp(1.3rem, 2.5vw, 2rem); /* matched to --pad-trustbar, 2026-08-09 (F2) */ --pad-trustbar: clamp(1.3rem, 2.5vw, 2rem); --pad-seam: clamp(1.4rem, 3vw, 2.2rem); --pad-x: clamp(1.3rem, 5vw, 3rem); /* ── Measures ─────────────────────────────────────────── */ --w-content: 1040px; --w-narrow: 72ch; }