/* statecraft design tokens — the single source of visual truth. Pages link this file; raw hex/px in etalons outside var(--…) is a lint error. One token — one declaration: every color is defined ONCE via light-dark(). Theme switching is a single color-scheme flip on ; dark is the primary, code-centric voice. */ :root { /* auto by prefers-color-scheme; an explicit data-theme on overrides */ color-scheme: light dark; /* type */ --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-lg: 1.375rem; --text-xl: 1.875rem; --text-2xl: 2.25rem; --text-hero: clamp(2.4rem, 6vw, 3.6rem); --leading-body: 1.65; --leading-tight: 1.25; /* space scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; /* layout */ --measure-col: 960px; --radius-sm: 6px; --radius-md: 10px; --border-w: 1px; --border-w-strong: 2px; --focus-ring: 2px; --focus-offset: 2px; --blur-header: 6px; /* derived accent surfaces: one accent, mixed down for tints */ --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent); --ok-soft: color-mix(in oklab, var(--ok) 12%, transparent); --warn-soft: color-mix(in oklab, var(--warn) 10%, transparent); --shadow-window: 0 var(--space-2) var(--space-6) color-mix(in oklab, light-dark(#14181d, #000000) 18%, transparent); --grid-line: color-mix(in oklab, var(--border) 55%, transparent); /* surfaces and text: light-dark(light, dark) */ --bg: light-dark(#ffffff, #101318); --bg-raised: light-dark(#f6f7f9, #171c24); --bg-code: light-dark(#f3f4f6, #0b0e13); --border: light-dark(#d9dde3, #2a3140); --text: light-dark(#2a2f36, #d7dde6); --text-muted: light-dark(#6b7280, #8b94a3); --heading: light-dark(#14181d, #f2f5f9); /* the single brand accent — ruby red, dosed: CTA, step numbers, links */ --accent: light-dark(#cc342d, #e2504c); --accent-contrast: #ffffff; /* status colors — data semantics only (race diagram), never decoration */ --ok: light-dark(#1f8a4c, #4cbf7a); --warn: light-dark(#9a6b13, #d9a13b); /* minimal code highlighting: three voices, no rainbow */ --code-text: light-dark(#30363d, #ced7e2); --code-keyword: light-dark(#0550ae, #8fb8f6); --code-symbol: light-dark(#953800, #e2b06c); --code-string: light-dark(#116329, #9fce8f); --code-comment: light-dark(#5d6771, #6b7484); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Static fallbacks for browsers without light-dark() (Chrome <123, Safari <17.5, Firefox <120): the main :root above keeps every token declared exactly once; this block re-declares plain values only where light-dark() would otherwise leave the token invalid — and the primary CTA invisible. color-mix() derivatives are left alone: on the affected range they resolve, and where they do not, only decorative tints fade. */ @supports not (color: light-dark(#fff, #000)) { :root { --shadow-window: 0 var(--space-2) var(--space-6) rgba(20, 24, 29, 0.18); --bg: #ffffff; --bg-raised: #f6f7f9; --bg-code: #f3f4f6; --border: #d9dde3; --text: #2a2f36; --text-muted: #6b7280; --heading: #14181d; --accent: #cc342d; --ok: #1f8a4c; --warn: #9a6b13; --code-text: #30363d; --code-keyword: #0550ae; --code-symbol: #953800; --code-string: #116329; --code-comment: #5d6771; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-window: 0 var(--space-2) var(--space-6) rgba(0, 0, 0, 0.18); --bg: #101318; --bg-raised: #171c24; --bg-code: #0b0e13; --border: #2a3140; --text: #d7dde6; --text-muted: #8b94a3; --heading: #f2f5f9; --accent: #e2504c; --ok: #4cbf7a; --warn: #d9a13b; --code-text: #ced7e2; --code-keyword: #8fb8f6; --code-symbol: #e2b06c; --code-string: #9fce8f; --code-comment: #6b7484; } } :root[data-theme="dark"] { --shadow-window: 0 var(--space-2) var(--space-6) rgba(0, 0, 0, 0.18); --bg: #101318; --bg-raised: #171c24; --bg-code: #0b0e13; --border: #2a3140; --text: #d7dde6; --text-muted: #8b94a3; --heading: #f2f5f9; --accent: #e2504c; --ok: #4cbf7a; --warn: #d9a13b; --code-text: #ced7e2; --code-keyword: #8fb8f6; --code-symbol: #e2b06c; --code-string: #9fce8f; --code-comment: #6b7484; } }