/* * tokens.css - design tokens (colours, spacing, radii, fonts, shadows). * * Load order: tokens.css, base.css, components.css, layout.css. * * The dark palette is the default. A light palette is applied when the user * agent prefers a light colour scheme, and either palette can be forced with * or , which always wins * over the media query. Only colour tokens change between themes. */ :root { color-scheme: dark; /* Fonts */ --font-sans: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace; /* Radii and shadows */ --radius-s: 10px; --radius-m: 14px; --radius-l: 18px; --shadow-1: 0 20px 45px rgba(0, 0, 0, 0.32); --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.28); /* Page background */ --bg-0: #07111d; --bg-1: #0c1a2b; --bg-2: #12233a; --bg-deep: #060d17; --bg-glow-1: rgba(64, 132, 183, 0.22); --bg-glow-2: rgba(18, 185, 255, 0.16); /* Panels and surfaces (translucent tints layered over the page) */ --panel-top: rgba(17, 34, 56, 0.97); --panel-bottom: rgba(12, 27, 44, 0.97); --panel-glow: rgba(53, 210, 255, 0.12); --surface-0: rgba(8, 20, 33, 0.54); --surface-1: rgba(10, 22, 36, 0.72); --surface-2: rgba(13, 31, 49, 0.8); --surface-3: rgba(17, 35, 56, 0.84); --surface-solid: rgba(10, 22, 36, 0.92); --surface-raised: rgba(14, 32, 50, 0.85); --surface-input: rgba(10, 22, 36, 0.78); --surface-input-focus: rgba(9, 25, 40, 0.95); --logo-tint-top: rgba(26, 49, 73, 0.55); --logo-tint-bottom: rgba(13, 28, 45, 0.6); --table-head-top: rgba(23, 46, 72, 0.98); --table-head-bottom: rgba(16, 32, 50, 0.98); --row-line: rgba(29, 55, 80, 0.72); --row-hover: rgba(28, 53, 79, 0.5); --row-focus: rgba(39, 73, 106, 0.56); --overlay: rgba(3, 9, 16, 0.72); --overlay-soft: rgba(3, 9, 15, 0.48); --sticky-fade-from: rgba(12, 27, 44, 0.1); --sticky-fade-to: rgba(12, 27, 44, 0.96); --scroll-track: rgba(7, 17, 29, 0.65); --scroll-thumb-a: #2d597f; --scroll-thumb-b: #1e4060; --scroll-thumb-hover-a: #3678ac; --scroll-thumb-hover-b: #20537c; /* Lines */ --line: #274462; --line-soft: #1b334d; --line-strong: #3a5877; /* Text */ --text: #e9f5ff; --text-heading: #d6efff; --text-muted: #b7cee1; --text-soft: #8fb3cf; --text-placeholder: #7e9ab4; --text-on-accent: #03101a; --text-on-ok: #052219; --text-on-error: #ffe5e5; /* Accent */ --accent: #35d2ff; --accent-strong: #12b9ff; --accent-bright: #67e8ff; --accent-hover: #8de7ff; --accent-text: #8fd8ff; --accent-text-hover: #d7f4ff; --accent-soft: rgba(53, 210, 255, 0.2); --accent-ring: rgba(53, 210, 255, 0.17); --accent-border: rgba(103, 232, 255, 0.55); --accent-shadow: rgba(18, 185, 255, 0.3); --accent-shadow-strong: rgba(18, 185, 255, 0.36); --accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-strong) 100%); --link-underline: rgba(143, 220, 255, 0.6); --focus-ring: #7de5ff; --focus-ring-soft: #91eaff; --checkbox-checked: #39d6ff; --checkbox-checked-border: #89ebff; --loader: #58ddff; /* Status */ --ok: #2fd18a; --ok-bright: #92f0c0; --ok-mid: #4fce93; --ok-border: #9ff0c8; --ok-soft: rgba(67, 191, 130, 0.48); --ok-surface-top: rgba(20, 54, 44, 0.9); --ok-surface-bottom: rgba(12, 38, 31, 0.95); --warn: #ffc15a; --warn-soft: rgba(255, 193, 90, 0.5); --warn-surface-top: rgba(68, 50, 20, 0.86); --warn-surface-bottom: rgba(44, 32, 14, 0.96); --error: #ff6f6f; --error-text: #ff8d8d; --error-text-soft: #ffd8d8; --error-bright: #ff7f7f; --error-strong: #e94343; --error-border: #ff9e9e; --error-soft: rgba(255, 111, 111, 0.45); --error-surface: rgba(87, 22, 22, 0.45); --error-surface-top: rgba(73, 26, 26, 0.84); --error-surface-bottom: rgba(47, 19, 19, 0.96); --error-shadow: rgba(233, 67, 67, 0.35); --info: #87b0d1; --debug: #d687ff; } /* * Light palette. Only tokens that differ from the dark palette are listed. * The same block appears twice on purpose: once for the media query (skipped * when dark is forced with data-theme="dark") and once for the explicit * data-theme="light" override. Keep the two copies identical. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg-0: #e9eff5; --bg-1: #f5f8fb; --bg-2: #dfe7ef; --bg-deep: #dfe7ef; --bg-glow-1: rgba(64, 132, 183, 0.14); --bg-glow-2: rgba(18, 185, 255, 0.12); --panel-top: rgba(255, 255, 255, 0.97); --panel-bottom: rgba(246, 249, 252, 0.97); --panel-glow: rgba(18, 185, 255, 0.08); --surface-0: rgba(255, 255, 255, 0.55); --surface-1: rgba(255, 255, 255, 0.75); --surface-2: rgba(236, 243, 249, 0.85); --surface-3: rgba(232, 240, 247, 0.9); --surface-solid: rgba(255, 255, 255, 0.94); --surface-raised: rgba(228, 236, 244, 0.9); --surface-input: rgba(255, 255, 255, 0.85); --surface-input-focus: rgba(255, 255, 255, 1); --logo-tint-top: rgba(15, 31, 48, 0.96); --logo-tint-bottom: rgba(11, 23, 39, 0.98); --table-head-top: rgba(232, 240, 248, 0.98); --table-head-bottom: rgba(222, 232, 243, 0.98); --row-line: rgba(100, 130, 160, 0.3); --row-hover: rgba(0, 90, 150, 0.07); --row-focus: rgba(0, 90, 150, 0.14); --overlay: rgba(20, 35, 52, 0.5); --overlay-soft: rgba(20, 35, 52, 0.35); --sticky-fade-from: rgba(246, 249, 252, 0.1); --sticky-fade-to: rgba(246, 249, 252, 0.96); --scroll-track: rgba(200, 214, 228, 0.6); --scroll-thumb-a: #9fb6cb; --scroll-thumb-b: #7f9bb3; --scroll-thumb-hover-a: #7f9bb3; --scroll-thumb-hover-b: #61819c; --line: #b9cadb; --line-soft: #d3dfea; --line-strong: #9fb4c8; --text: #142434; --text-heading: #0f2033; --text-muted: #4a6379; --text-soft: #526a80; --text-placeholder: #58708a; --text-on-error: #4a0c0c; --accent: #0069a8; --accent-hover: #00517f; --accent-text: #0b6a95; --accent-text-hover: #003a5c; --accent-soft: rgba(0, 105, 168, 0.2); --accent-ring: rgba(0, 105, 168, 0.18); --accent-border: rgba(0, 105, 168, 0.5); --accent-shadow: rgba(0, 105, 168, 0.22); --accent-shadow-strong: rgba(0, 105, 168, 0.3); --link-underline: rgba(11, 106, 149, 0.5); --focus-ring: #0a7fc0; --focus-ring-soft: #0a7fc0; --checkbox-checked: #12b9ff; --checkbox-checked-border: #0a7fc0; --loader: #0a7fc0; --ok: #12734a; --ok-bright: #a9efcc; --ok-mid: #5fd39b; --ok-border: #4fb884; --ok-soft: rgba(18, 115, 74, 0.45); --ok-surface-top: rgba(226, 246, 235, 0.95); --ok-surface-bottom: rgba(208, 238, 222, 0.98); --warn: #7f5300; --warn-soft: rgba(183, 121, 31, 0.5); --warn-surface-top: rgba(253, 243, 224, 0.95); --warn-surface-bottom: rgba(248, 232, 200, 0.98); --error: #c62828; --error-text: #b02020; --error-text-soft: #8a1a1a; --error-bright: #f6a5a5; --error-strong: #e07575; --error-border: #d95c5c; --error-soft: rgba(198, 40, 40, 0.45); --error-surface: rgba(255, 220, 220, 0.6); --error-surface-top: rgba(253, 232, 232, 0.95); --error-surface-bottom: rgba(248, 214, 214, 0.98); --error-shadow: rgba(198, 40, 40, 0.25); --info: #3f6785; --debug: #7a35b5; } } :root[data-theme="light"] { color-scheme: light; --bg-0: #e9eff5; --bg-1: #f5f8fb; --bg-2: #dfe7ef; --bg-deep: #dfe7ef; --bg-glow-1: rgba(64, 132, 183, 0.14); --bg-glow-2: rgba(18, 185, 255, 0.12); --panel-top: rgba(255, 255, 255, 0.97); --panel-bottom: rgba(246, 249, 252, 0.97); --panel-glow: rgba(18, 185, 255, 0.08); --surface-0: rgba(255, 255, 255, 0.55); --surface-1: rgba(255, 255, 255, 0.75); --surface-2: rgba(236, 243, 249, 0.85); --surface-3: rgba(232, 240, 247, 0.9); --surface-solid: rgba(255, 255, 255, 0.94); --surface-raised: rgba(228, 236, 244, 0.9); --surface-input: rgba(255, 255, 255, 0.85); --surface-input-focus: rgba(255, 255, 255, 1); --logo-tint-top: rgba(15, 31, 48, 0.96); --logo-tint-bottom: rgba(11, 23, 39, 0.98); --table-head-top: rgba(232, 240, 248, 0.98); --table-head-bottom: rgba(222, 232, 243, 0.98); --row-line: rgba(100, 130, 160, 0.3); --row-hover: rgba(0, 90, 150, 0.07); --row-focus: rgba(0, 90, 150, 0.14); --overlay: rgba(20, 35, 52, 0.5); --overlay-soft: rgba(20, 35, 52, 0.35); --sticky-fade-from: rgba(246, 249, 252, 0.1); --sticky-fade-to: rgba(246, 249, 252, 0.96); --scroll-track: rgba(200, 214, 228, 0.6); --scroll-thumb-a: #9fb6cb; --scroll-thumb-b: #7f9bb3; --scroll-thumb-hover-a: #7f9bb3; --scroll-thumb-hover-b: #61819c; --line: #b9cadb; --line-soft: #d3dfea; --line-strong: #9fb4c8; --text: #142434; --text-heading: #0f2033; --text-muted: #4a6379; --text-soft: #526a80; --text-placeholder: #58708a; --text-on-error: #4a0c0c; --accent: #0069a8; --accent-hover: #00517f; --accent-text: #0b6a95; --accent-text-hover: #003a5c; --accent-soft: rgba(0, 105, 168, 0.2); --accent-ring: rgba(0, 105, 168, 0.18); --accent-border: rgba(0, 105, 168, 0.5); --accent-shadow: rgba(0, 105, 168, 0.22); --accent-shadow-strong: rgba(0, 105, 168, 0.3); --link-underline: rgba(11, 106, 149, 0.5); --focus-ring: #0a7fc0; --focus-ring-soft: #0a7fc0; --checkbox-checked: #12b9ff; --checkbox-checked-border: #0a7fc0; --loader: #0a7fc0; --ok: #12734a; --ok-bright: #a9efcc; --ok-mid: #5fd39b; --ok-border: #4fb884; --ok-soft: rgba(18, 115, 74, 0.45); --ok-surface-top: rgba(226, 246, 235, 0.95); --ok-surface-bottom: rgba(208, 238, 222, 0.98); --warn: #7f5300; --warn-soft: rgba(183, 121, 31, 0.5); --warn-surface-top: rgba(253, 243, 224, 0.95); --warn-surface-bottom: rgba(248, 232, 200, 0.98); --error: #c62828; --error-text: #b02020; --error-text-soft: #8a1a1a; --error-bright: #f6a5a5; --error-strong: #e07575; --error-border: #d95c5c; --error-soft: rgba(198, 40, 40, 0.45); --error-surface: rgba(255, 220, 220, 0.6); --error-surface-top: rgba(253, 232, 232, 0.95); --error-surface-bottom: rgba(248, 214, 214, 0.98); --error-shadow: rgba(198, 40, 40, 0.25); --info: #3f6785; --debug: #7a35b5; }