/* ============================================================ THE POSITION — Design Tokens (single source of truth) Linked first in every page's , before any inline CSS. Only tokens live here: colors, type, spacing, motion. No component or layout rules, so values can never drift between pages. Reference these vars instead of raw hex / rgba. ============================================================ */ :root { /* — Surfaces — */ --c-ground: #111111; /* dark cinematic sections, page base */ --c-ground-alt: #1D1D1D; /* alternating dark sections */ /* — Ink (bone on dark) — */ --c-bone: #F9F7F2; /* primary text / headlines */ --c-bone-soft: rgba(249, 247, 242, 0.72); /* body copy */ --c-bone-dim: rgba(249, 247, 242, 0.62); /* secondary text */ --c-bone-mute: rgba(249, 247, 242, 0.50); /* de-emphasised labels */ --c-bone-faint: rgba(249, 247, 242, 0.38); /* faint captions */ --c-rule: rgba(249, 247, 242, 0.12); /* hairline dividers / borders */ /* — Accents — */ --c-signal: #FF8C00; /* stakes, emotional core, highlights, CTA */ --c-teal: #005A5B; /* observation, worldview, section tags (fills/chips/icons/borders) */ --c-teal-text: #2E9D98; /* AA-safe teal for TEXT on dark (~5.3:1); use when teal can't be a chip */ /* — Type — */ --f-serif: "Serifon", Georgia, serif; --f-sans: "Seragil", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* — Spacing scale — */ --s-section: 160px; --s-block: 80px; --s-element: 40px; --s-tight: 24px; --s-micro: 12px; /* — Layout — */ --nav-h: 72px; /* — Motion — */ --t-instant: 100ms; --t-fast: 200ms; --t-reveal: 500ms; --t-settle: 700ms; --ease-reveal: cubic-bezier(0.25, 0, 0.15, 1); --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); }