/* ============================================================ Console — design tokens (Obsidian palette, dark + light) Theme is swapped via data-theme on : dark | light. ============================================================ */ :root { /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --font-size-base: 13px; --font-size-sm: 12px; --font-size-xs: 11px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-2xl: 18px; --line-tight: 1.35; --line-normal: 1.5; --tracking-tight: -0.011em; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; /* Layout */ --rail-w: 52px; --sidebar-w: 232px; --header-h: 48px; --btn-h: 30px; --input-h: 30px; --nav-item-h: 30px; --content-max-w: 880px; /* content inner max width */ --dur-fast: 100ms; --dur: 180ms; --ease: cubic-bezier(.4,0,.2,1); /* Status colors — theme-agnostic, live in :root so every mode inherits */ --c-danger: 220 70 70; --c-danger-fg: 255 255 255; --c-warning: 220 150 60; --c-warning-fg: 20 15 10; --c-info: 90 150 230; --c-info-fg: 255 255 255; --c-success: 132 196 128; --c-success-fg: 10 15 10; } /* Dark — v4 "Rail" palette */ html[data-theme="dark"] { --bg: 0 0 0; --surface: 10 10 10; --surface-2: 21 21 21; --surface-3: 30 30 30; --sidebar: 0 0 0; --border: 28 28 28; --border-strong: 48 48 48; --fg: 250 250 250; --fg-muted: 130 130 130; --fg-subtle: 74 74 74; --accent: 132 196 128; --accent-fg: 10 15 10; --accent-hover: 118 180 114; --accent-soft: 132 196 128 / .10; --ring: 132 196 128; --shadow-sm: 0 1px 2px rgba(0,0,0,.6); --shadow-lg: 0 12px 28px rgba(0,0,0,.55); color-scheme: dark; } /* Light — inverted */ html[data-theme="light"] { --bg: 255 255 255; --surface: 252 252 252; --surface-2: 244 244 244; --surface-3: 232 232 232; --sidebar: 255 255 255; --border: 228 228 228; --border-strong: 206 206 206; --fg: 15 15 15; --fg-muted: 100 100 100; --fg-subtle: 150 150 150; --accent: 100 172 95; --accent-fg: 255 255 255; --accent-hover: 88 158 84; --accent-soft: 100 172 95 / .12; --ring: 100 172 95; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-lg: 0 10px 24px rgba(0,0,0,.1); color-scheme: light; }