/* ONYX design tokens — carried from the approved prototype (hifi/tokens.css). Mode + typography swap via data attributes on ; the AI accent --ai is set inline on from the user's preference and is never defined here. */ :root { /* ---- light (default) ---- */ --bg: #f6f5f1; --surface: #ffffff; --surface-2: #efeee9; --ink: #191814; --ink-2: #56534b; --ink-3: #8d897f; --line: #e2e0d8; --line-2: #d0cdc3; --ai-tint: color-mix(in oklab, var(--ai) 11%, var(--surface)); --ai-tint-2: color-mix(in oklab, var(--ai) 20%, var(--surface)); --ai-ink: color-mix(in oklab, var(--ai) 78%, var(--ink)); --ok: #2b9a66; --ok-tint: #e4f3ec; --info: #5b7c99; --info-tint: #e9eff4; --warn: #b97d18; --warn-tint: #f8efdc; --bad: #c4452f; --bad-tint: #f9e8e4; --shadow-1: 0 1px 2px rgba(25, 24, 20, 0.05); --shadow-2: 0 1px 3px rgba(25, 24, 20, 0.06), 0 6px 20px -6px rgba(25, 24, 20, 0.1); --shadow-3: 0 2px 6px rgba(25, 24, 20, 0.08), 0 16px 40px -12px rgba(25, 24, 20, 0.22); --radius-input: 9px; --radius-menu: 12px; --radius-island: 14px; --radius-card: 16px; --radius-pill: 99px; --font-ui: "Space Grotesk", sans-serif; --font-display: "Space Grotesk", sans-serif; --font-mono: "IBM Plex Mono", monospace; } /* ---- dark ---- KEEP IN SYNC with the html[data-mode="system"] block below — CSS cannot share one declaration block across an attribute selector and a media query without a preprocessor. */ html[data-mode="dark"] { --bg: #121214; --surface: #1b1b1e; --surface-2: #232327; --ink: #ebeae6; --ink-2: #a4a19a; --ink-3: #6f6d67; --line: #2a2a2f; --line-2: #38383e; --ai-tint: color-mix(in oklab, var(--ai) 16%, var(--surface)); --ai-tint-2: color-mix(in oklab, var(--ai) 26%, var(--surface)); --ai-ink: color-mix(in oklab, var(--ai) 85%, white); --ok: #4cc38a; --ok-tint: #15281f; --info: #84a8c4; --info-tint: #1c242c; --warn: #d9a13c; --warn-tint: #2c2415; --bad: #e0654f; --bad-tint: #2e1a16; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.35), 0 6px 20px -6px rgba(0, 0, 0, 0.5); --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65); } @media (prefers-color-scheme: dark) { html[data-mode="system"] { --bg: #121214; --surface: #1b1b1e; --surface-2: #232327; --ink: #ebeae6; --ink-2: #a4a19a; --ink-3: #6f6d67; --line: #2a2a2f; --line-2: #38383e; --ai-tint: color-mix(in oklab, var(--ai) 16%, var(--surface)); --ai-tint-2: color-mix(in oklab, var(--ai) 26%, var(--surface)); --ai-ink: color-mix(in oklab, var(--ai) 85%, white); --ok: #4cc38a; --ok-tint: #15281f; --info: #84a8c4; --info-tint: #1c242c; --warn: #d9a13c; --warn-tint: #2c2415; --bad: #e0654f; --bad-tint: #2e1a16; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.35), 0 6px 20px -6px rgba(0, 0, 0, 0.5); --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65); } } /* ---- type sets ---- */ html[data-type="technical"] { --font-ui: "Space Grotesk", sans-serif; --font-display: "Space Grotesk", sans-serif; } html[data-type="humanist"] { --font-ui: "Albert Sans", sans-serif; --font-display: "Albert Sans", sans-serif; } html[data-type="editorial"] { --font-ui: "Archivo", sans-serif; --font-display: "Source Serif 4", serif; }