/* ============================================================================ TinyBrains Cobalt — the application's design tokens. APP SOURCE, and the only copy of these values in the repository. index.html loads it as /design-system/tokens.css, and it is copied into dist/ and into the nginx image with the rest of public/. Dark is the default HERE, and it is the fallback rather than the policy: lib/theme.ts sets data-theme on before the first paint, from the reader's stored choice if they have made one and from prefers-color-scheme if they have not. That file is the only thing that decides, so this stylesheet deliberately carries no media query of its own — two mechanisms choosing one palette is two mechanisms that will disagree. Every colour below is a role, so nothing in the app names a literal. ============================================================================ */ :root { color-scheme: dark; /* surfaces and ink */ /* --bg-base EXISTS FOR THE BOOK, and is the only token with a second name. mdBook's own variables.css sets --bg for a reader with JavaScript off, at a specificity a plain :root loses to -- so docs/theme/tokens.css re-asserts --bg from this, at a selector that wins. Deriving it means the page background is still written down exactly once. */ --bg-base: #090F1D; --bg: var(--bg-base); --surface: #121D32; --surface-raised: #1C2B46; --ink: #EEF3FF; --muted: #A6B5D1; --line: #344764; /* the one accent, and what reads on top of it */ --accent: #86B2FF; --accent-ink: #0B224A; /* labelled outcomes — never the only carrier of meaning */ --success: #62D6B0; --warning: #FFD079; --danger: #FF9A9A; /* the logo's regions, and the weight-class hues drawn from them */ --frontal: #76A7FF; --parietal: #50D6CE; --occipital: #A194FF; --temporal: #74C6F5; --cerebellum: #FF9776; --stem: #99ADC9; } :root[data-theme="light"] { color-scheme: light; --bg-base: #F5F8FF; --bg: var(--bg-base); --surface: #FFFFFF; --surface-raised: #EAF0FC; --ink: #142642; --muted: #536780; --line: #B9C9E1; --accent: #255FC5; --accent-ink: #FFFFFF; --success: #137858; --warning: #896009; --danger: #BF354D; --frontal: #3266C4; --parietal: #147F83; --occipital: #7555BD; --temporal: #287CB0; --cerebellum: #C0613A; --stem: #657991; } :root { --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; }