/* DeltaSignal theme tokens — the single source of color truth for every page, in light and dark. Only themable color/elevation lives here; layout tokens (--maxw, --radius, spacing, fonts) stay in each page's own :root. Dark mode is opt-in via , set FOUC-free by shared/theme.js before first paint. Pages reference these via var(); the [data-theme="dark"] block re-points the same names, so the whole UI re-themes with no per-component dark rules. */ :root { color-scheme: light; --bg: #ffffff; --bg-1: #f5f7fa; --bg-2: #edf1f6; --bg-3: #ffffff; --surface: #ffffff; --text: #14171c; --text-2: #586273; --text-3: #8a94a3; --border: #e6eaef; --border-2: #d4dae2; --hairline: #eef1f6; --accent: #0062dd; --accent-2: #0a55bd; --accent-bright: #1f7bff; --accent-ink: #0356c2; --accent-soft: #eef4ff; --accent-glow: #eef4ff; --accent-bd: #cfe0ff; --ink: #0a0d14; --ink-line: rgba(255, 255, 255, .09); --ink-text: #f3f6fa; --ink-2text: #aeb7c4; --ink-3text: #7c8694; --spy: #8a94a6; --qqq: #e0892b; --danger: #dc2626; --danger-soft: #fef2f2; --danger-bd: #fecaca; --chart-grid: #e6eaef; --chart-axis: #71717a; --subnav-bg: rgba(255, 255, 255, .85); --pill-active-bg: #0a1019; } [data-theme="dark"] { color-scheme: dark; --bg: #0b0e14; --bg-1: #121620; --bg-2: #0e1219; --bg-3: #232a38; --surface: #121620; --text: #e7ecf3; --text-2: #a6b0c0; --text-3: #707b8d; --border: #232a36; --border-2: #2e3744; --hairline: #1b212c; --accent: #2f74e6; --accent-2: #2766cf; --accent-bright: #4f8ff7; --accent-ink: #93b8ff; --accent-soft: #14213b; --accent-glow: #14213b; --accent-bd: #21345a; --ink: #0e131c; --ink-line: rgba(255, 255, 255, .09); --ink-text: #f3f6fa; --ink-2text: #aeb7c4; --ink-3text: #7c8694; --spy: #8a94a6; --qqq: #e0892b; --danger: #f17171; --danger-soft: #2a1518; --danger-bd: #4a2226; --chart-grid: #232a36; --chart-axis: #8a94a6; --subnav-bg: rgba(15, 19, 28, .82); --pill-active-bg: #323b4a; } /* Theme toggle button. Base style suits the dark header bars (index/performance/dashboard); the .on-surface modifier suits a light page (login). Icons are injected + swapped by shared/theme.js. */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm, 8px); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: var(--ink-2text); cursor: pointer; touch-action: manipulation; transition: color .15s var(--ease, ease), background .15s var(--ease, ease), border-color .15s var(--ease, ease); } .theme-toggle:hover { color: var(--ink-text); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle.on-surface { border-color: var(--border-2); background: var(--surface); color: var(--text-3); } .theme-toggle.on-surface:hover { color: var(--text); border-color: var(--text-3); background: var(--bg-2); }