/* themes.css — the palette layer. One block per theme, nothing else. * * Every other stylesheet reads colour only through the tokens defined * here, so a new theme is a new block in this file plus a registry entry * in app/core/themes.py — no other CSS changes. * * The active theme is stamped on as data-theme by * partials/theme_boot.html before first paint, so each palette is * written exactly once (no prefers-color-scheme duplicate). With * JavaScript disabled no attribute is stamped and the bare :root block * below applies, which is why "light" doubles as the fallback. * * TOKEN CONTRACT — a theme block must define all of these. tests/ * test_phase21.py fails the build if two themes disagree on the set. * * Surfaces --color-bg --color-surface --color-surface-raised * --color-border --color-text --color-text-muted * --color-muted-soft * Accent --color-accent --color-accent-hover --color-accent-soft * --color-accent-faint --color-on-accent --color-focus-ring * Accent 2 --color-accent-2 --color-accent-2-hover * --color-accent-2-soft --color-accent-2-border * --color-on-accent-2 * Status --color-danger --color-danger-hover --color-danger-soft * --color-on-danger --color-success --color-success-soft * --color-warning --color-warning-soft * Content --color-code-bg --color-code-text * --color-overlay --color-overlay-strong * Elevation --shadow-sm --shadow-md --shadow-lg * Charts --color-chart-1 --color-chart-2 --color-chart-3 * --color-chart-grid * Assets --select-chevron * * Rules for a new palette: * - --color-on-* must be readable on its matching fill (4.5:1+). * - --color-accent is the interactive hue: links, focus, primary * buttons. --color-accent-2 is the emphasis hue: capability marks, * active pills, the second chart series. Never swap their jobs. * - color-scheme must match the palette so native form controls, * scrollbars and the caret follow it. */ /* ---------------------------------------------------------------- */ /* Light — the original palette, and the no-JavaScript fallback */ /* ---------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; --color-bg: #f8f9fa; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-border: #dee2e6; --color-text: #1a1a2e; --color-text-muted: #6c757d; --color-muted-soft: rgba(108, 117, 125, 0.15); --color-accent: #4361ee; --color-accent-hover: #3a56d4; --color-accent-soft: rgba(67, 97, 238, 0.08); --color-accent-faint: rgba(67, 97, 238, 0.04); --color-on-accent: #ffffff; --color-focus-ring: rgba(67, 97, 238, 0.15); --color-accent-2: #8338ec; --color-accent-2-hover: #7028d8; --color-accent-2-soft: rgba(131, 56, 236, 0.10); --color-accent-2-border: rgba(131, 56, 236, 0.35); --color-on-accent-2: #ffffff; --color-danger: #e5383b; --color-danger-hover: #c92e31; --color-danger-soft: rgba(229, 56, 59, 0.08); --color-on-danger: #ffffff; --color-success: #2a9d8f; --color-success-soft: rgba(42, 157, 143, 0.12); --color-warning: #d98324; --color-warning-soft: rgba(217, 131, 36, 0.12); --color-code-bg: #1e1e2e; --color-code-text: #e6e6ef; --color-overlay: rgba(0, 0, 0, 0.55); --color-overlay-strong: rgba(0, 0, 0, 0.85); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.35); --color-chart-1: #2a78d6; --color-chart-2: #eb6834; --color-chart-3: #1baf7a; --color-chart-grid: #e9ecef; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------------- */ /* Dark — near-black with a cool cast, teal interactive, */ /* orange emphasis */ /* ---------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --color-bg: #0e1416; --color-surface: #151d20; --color-surface-raised: #1c2529; --color-border: #26333a; --color-text: #e4edf0; --color-text-muted: #94a7ae; --color-muted-soft: rgba(148, 167, 174, 0.16); --color-accent: #2ec4b6; --color-accent-hover: #4fd8c9; --color-accent-soft: rgba(46, 196, 182, 0.14); --color-accent-faint: rgba(46, 196, 182, 0.07); --color-on-accent: #04211f; --color-focus-ring: rgba(46, 196, 182, 0.30); --color-accent-2: #ff8f3c; --color-accent-2-hover: #ffa763; --color-accent-2-soft: rgba(255, 143, 60, 0.14); --color-accent-2-border: rgba(255, 143, 60, 0.38); --color-on-accent-2: #2a1503; --color-danger: #ff6b6b; --color-danger-hover: #ff8787; --color-danger-soft: rgba(255, 107, 107, 0.14); --color-on-danger: #2a0d0d; --color-success: #3ddc97; --color-success-soft: rgba(61, 220, 151, 0.14); --color-warning: #f5b544; --color-warning-soft: rgba(245, 181, 68, 0.14); --color-code-bg: #0a1012; --color-code-text: #dfe9ec; --color-overlay: rgba(0, 0, 0, 0.66); --color-overlay-strong: rgba(0, 0, 0, 0.88); /* Dark surfaces need depth from a darker, wider shadow — the light theme's 8% black is invisible against #0e1416. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.70); --color-chart-1: #2ec4b6; --color-chart-2: #ff8f3c; --color-chart-3: #7aa2ff; --color-chart-grid: #26333a; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a7ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }