/* Axion design tokens * * Extracted from the design/ prototype. Pulse is the locked default brand; * Obsidian and Filament are preserved as alternate themes for future use. * Switch by setting `data-brand="obsidian"` or `data-brand="filament"` on . */ :root { /* Pulse (default) */ --bg-0: oklch(11% 0.005 260); --bg-1: oklch(14% 0.006 260); --bg-2: oklch(18% 0.008 260); --bg-3: oklch(22% 0.010 260); --line: oklch(26% 0.010 260); --line-soft: oklch(20% 0.009 260); --fg-0: oklch(96% 0.005 80); --fg-1: oklch(82% 0.008 80); --fg-2: oklch(64% 0.010 80); --fg-3: oklch(46% 0.012 80); --accent: oklch(80% 0.14 220); --accent-2: oklch(88% 0.10 220); --accent-dim: oklch(45% 0.08 220); --accent-glow: oklch(80% 0.14 220 / 0.32); /* Tinted background wash for accent-coloured CTAs / banners on dark * surfaces. Originally added in the marketing-site prototype; lifted * to the shared tokens so app + site stay coherent. */ --accent-wash: oklch(80% 0.14 220 / 0.08); /* Foreground colour for text/icons placed ON the accent fill. In dark * themes the accent is bright, so this is dark; flipped in Daylight. */ --on-accent: oklch(15% 0.02 260); --ok: oklch(72% 0.14 150); --warn: oklch(80% 0.14 80); --err: oklch(68% 0.20 25); --ui-font: 'Geist Variable', ui-sans-serif, system-ui, sans-serif; --mono-font: 'Geist Mono Variable', ui-monospace, monospace; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --shadow-1: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 0 0 1px oklch(0% 0 0 / 0.4), 0 4px 14px oklch(0% 0 0 / 0.35); --shadow-2: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 0 0 1px oklch(0% 0 0 / 0.45), 0 10px 30px oklch(0% 0 0 / 0.50); --bevel-top: inset 0 1px 0 oklch(100% 0 0 / 0.05); --bevel-bot: inset 0 -1px 0 oklch(0% 0 0 / 0.4); } /* Obsidian — warm copper, originally the designer's default. */ [data-brand='obsidian'] { --bg-0: oklch(13% 0.005 270); --bg-1: oklch(16% 0.006 270); --bg-2: oklch(20% 0.007 270); --bg-3: oklch(24% 0.008 270); --line: oklch(28% 0.008 270); --line-soft: oklch(22% 0.007 270); --accent: oklch(74% 0.13 60); --accent-2: oklch(82% 0.10 60); --accent-dim: oklch(45% 0.08 60); --accent-glow: oklch(74% 0.13 60 / 0.30); --accent-wash: oklch(74% 0.13 60 / 0.08); } /* Filament — acid lime, technical and confident. */ [data-brand='filament'] { --bg-0: oklch(13% 0.008 60); --bg-1: oklch(16% 0.010 50); --bg-2: oklch(20% 0.012 50); --bg-3: oklch(24% 0.014 45); --line: oklch(28% 0.012 45); --line-soft: oklch(22% 0.010 45); --accent: oklch(85% 0.18 130); --accent-2: oklch(92% 0.14 130); --accent-dim: oklch(50% 0.12 130); --accent-glow: oklch(85% 0.18 130 / 0.30); --accent-wash: oklch(85% 0.18 130 / 0.08); } /* Daylight — light theme for bright environments. The bg-0..3 scale * here is the only one that goes from light (page background) to less * light (most-raised surface), inverting the elevation direction of the * dark themes. Components built around dark-mode 3D shading * conventions therefore read slightly flatter here — a known trade-off * (see docs/ROADMAP.md "Light theme"). */ [data-brand='daylight'] { --bg-0: oklch(97% 0.003 80); --bg-1: oklch(94% 0.004 80); --bg-2: oklch(90% 0.005 80); --bg-3: oklch(85% 0.007 80); --line: oklch(78% 0.010 80); --line-soft: oklch(86% 0.008 80); --fg-0: oklch(20% 0.010 80); --fg-1: oklch(35% 0.012 80); --fg-2: oklch(50% 0.012 80); --fg-3: oklch(60% 0.010 80); --accent: oklch(55% 0.16 220); --accent-2: oklch(48% 0.18 220); --accent-dim: oklch(72% 0.10 220); --accent-glow: oklch(55% 0.16 220 / 0.20); --accent-wash: oklch(55% 0.16 220 / 0.06); /* Light text on a darker accent button. */ --on-accent: oklch(98% 0.005 80); --ok: oklch(50% 0.18 150); --warn: oklch(60% 0.16 70); --err: oklch(55% 0.22 25); --shadow-1: 0 1px 0 oklch(100% 0 0 / 0.5) inset, 0 0 0 1px oklch(0% 0 0 / 0.06), 0 4px 14px oklch(0% 0 0 / 0.10); --shadow-2: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 0 0 1px oklch(0% 0 0 / 0.08), 0 10px 30px oklch(0% 0 0 / 0.14); --bevel-top: inset 0 1px 0 oklch(100% 0 0 / 0.6); --bevel-bot: inset 0 -1px 0 oklch(0% 0 0 / 0.06); }