/* ============================================================================ TIER design tokens — the single source of truth (#393) Extracted verbatim from the two approved design artifacts. Do not hard-code colors, fonts, or radii in page/component CSS — reference these custom properties so a token change propagates everywhere at once. Theming: dark is the default palette (bare :root). Light comes two ways and both must agree: 1. @media (prefers-color-scheme: light) — follows the OS/browser setting. 2. :root[data-theme="light" | "dark"] — an explicit override wins over the media query (a viewer's manual toggle stamps data-theme on ). ========================================================================== */ :root { /* neutrals — cool, slightly blue-biased, chosen not defaulted */ --ink: #0c1116; --ink-panel: #121a21; --ink-raised: #16212a; --line: rgba(150,170,185,0.14); --line-strong:rgba(150,170,185,0.26); --fg: #e9eef2; --fg-soft: #b4c1cb; --fg-mute: #7d8c98; /* accent — measured jade / yield green (not acid) */ --yield: #22c08a; --yield-deep: #17aa78; --yield-soft: rgba(34,192,138,0.12); /* semantic burn — muted clay, the contrast to yield */ --burn: #d98a46; --burn-soft: rgba(217,138,70,0.12); --ground: var(--ink); --panel: var(--ink-panel); --raised: var(--ink-raised); --serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif; --sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono: ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace; --maxw: 1120px; --measure: 66ch; --r: 4px; } @media (prefers-color-scheme: light) { :root { --ink: #f5f7f5; --ink-panel: #ffffff; --ink-raised: #ffffff; --line: rgba(30,50,60,0.12); --line-strong:rgba(30,50,60,0.22); --fg: #101820; --fg-soft: #364650; --fg-mute: #5d6d78; --yield: #0f9d6b; /* --yield-deep is the plain-link / eyebrow / .btn.solid color on the light #f5f7f5 background. #0b895c was 4.11:1 there — below the WCAG AA 4.5:1 floor for normal text. #0a8055 is 4.61:1 on #f5f7f5 (4.96:1 on the #fff panel): the minimal darkening that clears AA while keeping the jade hue. Keep in sync with the [data-theme="light"] block below. */ --yield-deep: #0a8055; --yield-soft: rgba(15,157,107,0.10); --burn: #b96a24; --burn-soft: rgba(185,106,36,0.10); } } :root[data-theme="dark"] { --ink:#0c1116; --ink-panel:#121a21; --ink-raised:#16212a; --line:rgba(150,170,185,0.14); --line-strong:rgba(150,170,185,0.26); --fg:#e9eef2; --fg-soft:#b4c1cb; --fg-mute:#7d8c98; --yield:#22c08a; --yield-deep:#17aa78; --yield-soft:rgba(34,192,138,0.12); --burn:#d98a46; --burn-soft:rgba(217,138,70,0.12); } :root[data-theme="light"] { --ink:#f5f7f5; --ink-panel:#ffffff; --ink-raised:#ffffff; --line:rgba(30,50,60,0.12); --line-strong:rgba(30,50,60,0.22); --fg:#101820; --fg-soft:#364650; --fg-mute:#5d6d78; --yield:#0f9d6b; --yield-deep:#0a8055; --yield-soft:rgba(15,157,107,0.10); --burn:#b96a24; --burn-soft:rgba(185,106,36,0.10); }