/* ============================================================================ DARK THEME - opt-in, toggled from the topbar. The app defaults to the LIGHT (white) theme. Dark is applied only when the user flips the topbar theme toggle, which sets `data-theme="dark"` on and stores the choice in localStorage under "chronos.theme" (see theme.js). A pre-paint init in ChronosHead re-applies the stored choice before first paint, so a returning dark-mode user never sees a flash of the light default. The OS `prefers-color-scheme` is deliberately NOT consulted - the toggle is the single source of truth, so the default is white on every device. How it works: almost the whole app paints through the design tokens defined in 00-tokens-base.css (`--chronos-bg`, `--chronos-card-bg`, `--chronos-fg-*`, ...). Re-declaring just those ~11 tokens under `:root[data-theme="dark"]` restyles every token-driven surface at once. Below the token block are targeted spot-fixes for the handful of controls that hardcode `white` / a light tint instead of reading a token (found by auditing all 24 CSS parts). NOT touched: the profile + Pit-game modules (11/12/14/15/16/17/22) paint themselves onto their OWN hardcoded dark gradients and never read these tokens, so they are already dark in both schemes. Loaded LAST in the ChronosHead cascade so these overrides win at equal specificity. The brand accents (violet / lavender / pink / red) are left unchanged - they read well on both light and dark canvases. ============================================================================ */ /* Native controls, scrollbars and form widgets follow the ACTIVE theme, not the OS: light by default, dark only when the toggle is on. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="dark"] { --chronos-bg: #0F1116; /* app canvas - very dark, not pure black */ --chronos-card-bg: #1A1D24; /* cards, chips base, menus, modals */ --chronos-fg-primary: #F3F4F6; /* primary text - near white */ --chronos-fg-secondary: #C4CAD4; /* between primary + muted (store/settings) */ --chronos-fg-muted: #9CA3AF; /* secondary / muted text */ --chronos-outline: #2A2F3A; /* hairline borders */ --chronos-chip-bg: #232833; /* chips / segmented controls */ --chronos-hover-bg: #2A303C; /* hover surface */ --chronos-card-inset: #20242D; /* v0.5.6: task cards - one step LIGHTER than the panel */ /* Selected calendar day keeps WHITE text (see .calday.endpoint), so this must stay dark enough for white to read - use the brand violet, not a pale surface. */ --chronos-day-selected: #7C3AED; --chronos-day-muted: #4B5563; /* out-of-month day text */ /* Was a pale lavender tint (#E9D5FF) used as a soft background behind dark text + as progress-bar tracks / in-range days. Deep violet keeps it a subtle tint on dark while light text over it stays readable. */ --chronos-violet-light: #2E2450; --shadow-card: 0 1px 2px rgba(0,0,0,0.45); /* Aliases (--chronos-muted / --chronos-text) resolve through the tokens above automatically - no need to re-declare them. */ } /* ---- Spot-fixes: controls that hardcode a light color --------------------- */ /* 01-topbar.css: language dropdown is hardcoded white with dark text. */ [data-theme="dark"] .lang-picker-menu { background: var(--chronos-card-bg); border-color: var(--chronos-outline); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .lang-picker-item { color: var(--chronos-fg-primary); } /* Summary pill border falls back to rgba(0,0,0,.12) (invisible on dark). */ [data-theme="dark"] .lang-picker > summary { border-color: var(--chronos-outline); } /* 03-filter-ribbon.css: custom checkbox face is hardcoded `white`. The 2px muted border keeps it visible; chip tone lifts it off the task card. */ [data-theme="dark"] .task-check .checkbox-ui { background: var(--chronos-chip-bg); } /* 06-planning-tasks.css v0.5.6: due-date grade colours are tuned for the light card; on dark they need the 300-weight variants to keep contrast. */ [data-theme="dark"] .task-due.due-overdue { color: #F87171; } [data-theme="dark"] .task-due.due-today { color: #FBBF24; } /* 04-compose-filter-modal.css: search field + every unified