/* ============================================================ Design tokens — one source of truth for colour, type, depth. Light is the default; `[data-theme="dark"]` on flips it. ============================================================ */ :root { /* --- brand ramp --- */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --accent-400: #fbbf24; --accent-500: #f59e0b; --accent-600: #d97706; /* --- semantic --- */ --ok-bg: #ecfdf5; --ok-fg: #047857; --ok-line: #6ee7b7; --bad-bg: #fef2f2; --bad-fg: #b91c1c; --bad-line: #fca5a5; --warn-bg: #fffbeb; --warn-fg: #92400e; --warn-line: #fcd34d; /* --- surfaces (light) --- */ --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f3f4f6; --line: #e5e7eb; --line-strong:#d1d5db; --text: #111827; --text-2: #4b5563; --text-3: #9ca3af; --brand: var(--brand-600); --brand-soft: var(--brand-50); --brand-text: var(--brand-700); /* A meter's unfilled track is a lighter step of the *same* ramp, not a neutral grey — that is what makes the state read across the whole bar. */ --meter-track: var(--brand-100); --on-brand: #ffffff; /* --- sidebar (its own scale — stays dark in both themes) --- */ --nav-bg: #101725; --nav-bg-2: #18203200; --nav-hover: #1c2740; --nav-line: #263149; --nav-text: #e5e9f2; --nav-text-2: #8d99b0; /* --- shape & depth --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); --shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04); --shadow-lg: 0 18px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06); --shadow-xl: 0 30px 70px rgba(15, 23, 42, .18); /* --- type --- */ --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; /* --- layout --- */ --sidebar-w: 300px; --rightbar-w: 300px; /* the Recent updates rail */ --topbar-h: 60px; --ease: cubic-bezier(.4, 0, .2, 1); } [data-theme="dark"] { --bg: #0b1017; --surface: #131a25; --surface-2: #182130; --surface-3: #1f2937; --line: #26303f; --line-strong:#374151; --text: #eef2f7; --text-2: #a6b1c2; --text-3: #6b7688; --brand: var(--brand-400); --brand-soft: #1c2438; --brand-text: var(--brand-300); /* Chosen for the dark surface rather than flipped from the light step. */ --meter-track: #2c3557; --on-brand: #0b1017; --nav-bg: #080c13; --nav-hover: #161f2f; --nav-line: #1d2637; --nav-text: #dfe5ef; --nav-text-2: #7b869b; --ok-bg: #0d2b21; --ok-fg: #6ee7b7; --ok-line: #157a5b; --bad-bg: #2c1416; --bad-fg: #fca5a5; --bad-line: #9b2c2c; --warn-bg: #2b2210; --warn-fg: #fcd34d; --warn-line: #92400e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 40px rgba(0, 0, 0, .55); --shadow-xl: 0 30px 70px rgba(0, 0, 0, .65); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }