/* ═══════════════════════════════════════════════════════════════ timesys — shared theme token layer (v3 spike) One file. Both themes. Flips on . This is the foundation the v3 rebuild argues for: define tokens once, every page inherits light + dark for free. ═══════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"]{ /* grey ramp — g100 = furthest-back surface, g10 = strongest text */ --g100:#0b0b0b; --g95:#111111; --g90:#161616; --g85:#1c1c1c; --g80:#262626; --g70:#393939; --g60:#525252; --g50:#8d8d8d; --g40:#a8a8a8; --g30:#c6c6c6; --g10:#f4f4f4; /* accents — tuned bright for dark backgrounds */ --blue60:#0f62fe; --blue40:#78a9ff; --teal40:#08bdba; --green40:#42be65; --yellow30:#f1c21b; --orange40:#ff832b; --purple40:#be95ff; --red50:#fa4d56; --button-blue:#0f62fe; --button-blue-hover:#0353e9; /* semantic tokens for spots that were hardcoded before */ --nav-bg:rgba(11,11,11,.92); --panel-bg:var(--g90); --chip-bg:rgba(22,22,22,.55); --code-bg:var(--g100); --hero-glow-a:rgba(15,98,254,.10); --hero-glow-b:rgba(8,189,186,.06); --shadow-card:0 14px 30px -20px rgba(0,0,0,.6); --shadow-pop:0 18px 50px rgba(0,0,0,.45); --overlay-strong:rgba(0,0,0,.55); /* report document covers */ --cover-bg:linear-gradient(155deg,#1f1f1f,#0a0a0a); --cover-edge:rgba(255,255,255,.16); --cover-shadow:0 18px 36px -18px rgba(0,0,0,.8); --cover-shadow-hover:0 26px 48px -18px rgba(0,0,0,.85); } :root[data-theme="light"]{ /* ramp flips: g100 = page white, g10 = ink. Every var(--g*) usage that put dark=background / light=text now reads correctly. */ --g100:#ffffff; --g95:#fbfbfb; --g90:#f4f4f4; --g85:#eeeeee; --g80:#e0e0e0; --g70:#cfcfcf; --g60:#a8a8a8; --g50:#6f6f6f; --g40:#525252; --g30:#393939; --g10:#161616; /* accents re-tuned darker so they carry contrast on white */ --blue60:#0f62fe; --blue40:#0f62fe; --teal40:#009d9a; --green40:#198038; --yellow30:#8a6a00; --orange40:#b8460a; --purple40:#8a3ffc; --red50:#da1e28; --button-blue:#0f62fe; --button-blue-hover:#0043ce; --nav-bg:rgba(255,255,255,.90); --panel-bg:var(--g95); --chip-bg:rgba(0,0,0,.02); --code-bg:#f7f8fa; --hero-glow-a:rgba(15,98,254,.07); --hero-glow-b:rgba(0,157,154,.06); --shadow-card:0 14px 30px -22px rgba(0,0,0,.22); --shadow-pop:0 18px 50px rgba(0,0,0,.16); --overlay-strong:rgba(0,0,0,.28); --cover-bg:linear-gradient(155deg,#ffffff,#e6ebf1); --cover-edge:rgba(15,23,42,.14); --cover-shadow:0 16px 30px -18px rgba(15,23,42,.38); --cover-shadow-hover:0 24px 44px -18px rgba(15,23,42,.45); } /* smooth the flip */ html{transition:background-color .25s ease} body{transition:background-color .25s ease,color .25s ease} /* ── theme toggle button (shared) ───────────────────────────── */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;flex-shrink:0; background:transparent;border:1px solid var(--g70);border-radius:6px; color:var(--g40);cursor:pointer;padding:0; } .theme-toggle:hover{border-color:var(--g50);color:var(--g10)} .theme-toggle svg{width:16px;height:16px;display:block} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} :root[data-theme="light"] .theme-toggle .icon-sun{display:block} :root[data-theme="light"] .theme-toggle .icon-moon{display:none}