/* ============================================ VANTAPRISM — Theme Tokens Single source of truth for color roles, consumed as RGB triplets so Tailwind's `rgb(var(--x-rgb) / )` opacity syntax works (see tailwind.config.js `colors`). Toggled via [data-theme] on , set synchronously in views/partials/head.ejs before first paint. Dark values preserve today's site exactly; light values are new. ============================================ */ :root, :root[data-theme="dark"] { --surface-rgb: 0 0 0; --surface-raised-rgb: 17 24 39; --text-primary-rgb: 248 250 252; --text-secondary-rgb: 148 163 184; --accent-rgb: 242 102 37; --accent-hover-rgb: 216 84 26; --sand-fill-rgb: 255 255 255; --sand-rule-rgb: 255 255 255; --taupe-border-rgb: 255 255 255; --slate-fill-rgb: 255 255 255; --slate-line-rgb: 255 255 255; --slate-mid-rgb: 148 163 184; --slate-deep-rgb: 226 232 240; --positive-rgb: 74 222 128; --positive-fill-rgb: 74 222 128; --negative-rgb: 255 0 0; --negative-fill-rgb: 255 0 0; /* Shadows were authored for a black page: 100px blurs at 80% black read as depth there and as a grey cloud on paper. The hue barely matters, the alpha does — so shadow alphas are multiplied by this scale per theme. */ --shadow-rgb: 0 0 0; --shadow-alpha: 1; } :root[data-theme="light"] { --surface-rgb: 251 250 247; --surface-raised-rgb: 255 255 255; --text-primary-rgb: 38 38 36; --text-secondary-rgb: 79 79 73; --text-muted-rgb: 105 104 97; --surface-nested-rgb: 243 241 236; --border-rgb: 218 215 207; --control-border-rgb: 136 134 125; --accent-ink-rgb: 166 61 18; --data-ink-rgb: 62 81 102; --warning-rgb: 138 89 8; /* Opaque roles prevent stacked opacity from erasing small labels. Component fallbacks retain their exact authored dark appearance. */ --light-text-primary: rgb(var(--text-primary-rgb)); --light-text-secondary: rgb(var(--text-secondary-rgb)); --light-text-muted: rgb(var(--text-muted-rgb)); --light-accent-ink: rgb(var(--accent-ink-rgb)); --light-data-ink: rgb(var(--data-ink-rgb)); --light-positive: rgb(var(--positive-rgb)); --light-negative: rgb(var(--negative-rgb)); --light-warning: rgb(var(--warning-rgb)); --light-surface: rgb(var(--surface-raised-rgb)); --light-nested: rgb(var(--surface-nested-rgb)); --light-border: rgb(var(--border-rgb)); --light-control-border: rgb(var(--control-border-rgb)); --light-hover: #eeeae2; --light-selected: #fff0e4; --light-selected-border: #cb825d; --light-overlay: rgb(38 38 36 / 0.34); --light-shadow: 0 3px 12px rgb(32 26 18 / 0.045); --light-shadow-overlay: 0 12px 36px rgb(32 26 18 / 0.14); /* Sequential volume encodings; categorical ink never implies success or failure. Canvas renderers resolve these tokens at render time. */ --chart-sequential-0: #e6edf3; --chart-sequential-1: #d1deea; --chart-sequential-2: #b9cddd; --chart-sequential-3: #9db7cd; --chart-sequential-4: #7f9db6; --chart-category-0: #bf622e; --chart-category-1: #547b99; --chart-category-2: #8d789f; --chart-category-3: #a7814e; --chart-category-4: #5b8586; --chart-category-5: #827e73; --chart-category-6: #a47582; --chart-empty: #e9e7e1; --chart-grid: #dad7cf; --chart-map-low: #fbf1e4; --chart-map-mid: #e2611e; --chart-map-high: #8a1f1f; --accent-rgb: 242 102 37; --accent-hover-rgb: 216 84 26; /* Dark warm neutrals on purpose: templates apply these at low alphas (bg-sand-fill/5, border-sand-rule/10) because the dark theme built lift from white-over-black. On paper the same alphas only read if the base is dark, so these are the ink-side of the sand/taupe family. */ --sand-fill-rgb: 150 134 112; --sand-rule-rgb: 88 78 64; --taupe-border-rgb: 88 78 64; --slate-fill-rgb: 234 238 243; --slate-line-rgb: 195 206 218; --slate-mid-rgb: 107 132 160; --slate-deep-rgb: 62 81 102; --positive-rgb: 38 112 67; --positive-fill-rgb: 227 240 232; --negative-rgb: 184 46 37; --negative-fill-rgb: 251 234 231; --shadow-rgb: 32 26 18; --shadow-alpha: 0.16; } /* Semantic shadow utilities — replace the arbitrary shadow-[0_40px_100px_rgba(0,0,0,0.8)] classes the templates used, so panel depth scales with the theme instead of being baked for a black page. */ .vp-shadow-panel { box-shadow: 0 40px 100px rgb(var(--shadow-rgb) / calc(0.8 * var(--shadow-alpha))); } .vp-shadow-panel-strong { box-shadow: 0 40px 100px rgb(var(--shadow-rgb) / calc(0.9 * var(--shadow-alpha))); } .vp-shadow-panel-tall { box-shadow: 0 40px 110px rgb(var(--shadow-rgb) / calc(0.7 * var(--shadow-alpha))); } .vp-shadow-ring { box-shadow: 0 0 50px rgb(var(--shadow-rgb) / calc(0.6 * var(--shadow-alpha))); } /* Page ground behind the dashboard panels — the dark navy wash becomes paper, keeping the orange accent bloom that reads in both themes. */ :root[data-theme="light"] .dashboard-page main::before { background: radial-gradient(circle at 14% 8%, rgba(242, 102, 37, 0.10), transparent 36%), radial-gradient(circle at 86% 14%, rgba(242, 102, 37, 0.05), transparent 38%), linear-gradient(180deg, rgba(251, 250, 247, 0.92), rgba(251, 250, 247, 0.88)); } /* The dot-matrix mesh is a dark-mode CRT conceit: over paper it reads as a grey screen door across the whole page, so it sits out the light theme. */ :root[data-theme="light"] .particle-overlay { display: none; } /* The light component layer loads after theme.css. Keep foundations above independent of selector order in the historical component stylesheet. */