/* ============================================================ tokens.css — single source of truth for every color, radius, space, font, shadow and motion value. Components reference ONLY these tokens. Theme switching = data-theme on . Whitelabel: --accent, --accent-solid + /static/logo.svg are the only brand carriers. ============================================================ */ /* ---------- theme-independent: type, shape, motion ---------- */ :root { --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-data: "JetBrains Mono", Consolas, monospace; /* type scale */ --fs-base: 14px; /* all UI text */ --fs-label: 12px; /* field labels, helper text */ --fs-title: 15px; /* section titles, weight 600 */ --fs-hero: 22px; /* page greeting, weight 600 — nothing larger */ /* shape */ --radius: 14px; /* tiles, cards, modals, panels — THE tile radius */ --radius-sm: 10px; /* inputs, menus */ --radius-pill: 999px;/* buttons, badges, score pills */ /* motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-hover: 120ms; --dur-open: 200ms; } /* ---------- dark (default + design priority) ---------- */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0B0B0D; /* cinematic near-black */ --surface: #131316; --surface-2: #1B1B1F; --hairline: #26262B; --text: #F4F4F0; --text-muted: #8E8C86; --text-faint: #5C5B57; --accent: #C9F542; /* fibula volt — interactive text, borders, focus */ --accent-solid: #C9F542; /* filled buttons */ --accent-ink: #0E1206; /* text on filled buttons */ --success: #55C98F; /* teal-leaning so it never reads as the volt accent */ --danger: #D96A5B; --warn: #D9B655; /* added: score pills 7–8, active statuses (theme spec had no warn token) */ --shadow: 0 8px 24px rgb(0 0 0 / .4); --cta-glow: 0 4px 16px color-mix(in srgb, var(--accent-solid) 35%, transparent); /* derived tints — always via color-mix so whitelabel holds */ --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent); --success-tint: color-mix(in srgb, var(--success) 14%, transparent); --warn-tint: color-mix(in srgb, var(--warn) 14%, transparent); --danger-tint: color-mix(in srgb, var(--danger) 14%, transparent); --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent); --scrim: rgb(0 0 0 / .55); /* modal backdrop */ --video-scrim: rgb(0 0 0 / .72); /* chips over video */ --watermark: color-mix(in srgb, var(--accent) 5%, transparent); /* dashboard wordmark */ } /* ---------- light (warm paper) ---------- */ [data-theme="light"] { color-scheme: light; --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F1F0EC; --hairline: #E4E2DC; --text: #1C1B19; --text-muted: #6E6C66; --text-faint: #A3A19A; --accent: #4E6B00; /* darkened volt (olive), AA on white */ --accent-solid: #C9F542; /* filled buttons keep the volt + dark ink */ --accent-ink: #0E1206; --success: #22855C; --danger: #C2452F; --warn: #9A6700; --shadow: 0 4px 16px rgb(20 20 20 / .08); --cta-glow: none; --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent); --success-tint: color-mix(in srgb, var(--success) 12%, transparent); --warn-tint: color-mix(in srgb, var(--warn) 12%, transparent); --danger-tint: color-mix(in srgb, var(--danger) 12%, transparent); --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent); --scrim: rgb(20 20 20 / .38); --video-scrim: rgb(0 0 0 / .65); --watermark: color-mix(in srgb, var(--accent) 7%, transparent); }