/* Light/dark theme — light palette + perpetual toggle. Dark is the default (tokens.css :root). Light kicks in when the element carries data-theme="light". Toggle UI is injected by theme.js as a fixed-position button. Mirrors the detector app + apex/projections/oracle/deepdive light palette. */ /* ─── Light-mode palette — lilac bg, dark-purple body text, deep-green accent. */ html[data-theme="light"] { --bg-page: #F3E8FA; --bg-raised: #E8D7F1; --bg-sidebar: #E8D7F1; --bg-card: #E8D7F1; --bg-inset: #E1CCEC; --bg-elevated: #E1CCEC; --bg-code: #2A1E40; /* code blocks stay dark for legibility */ --border: #C4A5D7; --border-dashed: #B28DC9; --text-primary: #1F2E26; --text-secondary: #3F4C44; --text-tertiary: #4D5952; --text-faint: #525C56; --gold: #28593F; --gold-hover: #184A31; --gold-text-soft: #3A624B; --on-gold: #F3E8FA; /* -- Tokens the dark sheet declared and the light sheet never answered. Until now they kept their dark values on a lilac page. Mirror values, same hue and chroma as their dark twins, lightness solved for AA. */ --verdict-abstain: #6E5100; --verdict-ai: #8B3E3E; --verdict-real: #1B6232; } /* Public-page nav uses rgba directly — override to a lighter purple in light mode. */ html[data-theme="light"] nav.site-nav { background: color-mix(in srgb, var(--bg-page) 55%, white 45%); } /* ─── Toggle button — fixed, top-right corner, sits above everything. */ .theme-toggle { position: fixed; top: 10px; right: 12px; z-index: 1000; background: transparent; border: 0; color: var(--gold); font-size: 12px; line-height: 1; cursor: pointer; /* ⛔ was `padding: 5px 7px` and nothing else, which made this 27x23 on the app pages, 38x38 on billing and 12x8 on docs: three sizes, all under the 44px floor, on a control that appears on all fourteen pages. */ padding: 5px 7px; min-width: 44px; min-height: 44px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .15s, background .15s, color .15s; } .theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; outline: none; background: rgba(0, 0, 0, .12); } html[data-theme="light"] .theme-toggle:hover, html[data-theme="light"] .theme-toggle:focus-visible { background: rgba(0, 0, 0, .08); } .theme-toggle i { font-size: 16px; } @media (max-width: 720px) { .theme-toggle { top: 8px; right: 8px; padding: 4px 6px; } /* the 44px minimums above still hold */ .theme-toggle i { font-size: 15px; } }