/* ════════════════════════════════════════════════════════════════ theme.css — single source for the Light / Dark theme. Loaded by every user-facing page alongside theme.js. The light palette mirrors the variable names already used in the codebase (--bg / --card / --black / --muted / --border / --red) so every page that already references those vars adapts automatically. ──────────────────────────────────────────────────────────────── */ :root { --bg: #fafafa; --card: #ffffff; --black: #0a0a0a; /* primary text — keeps the legacy name */ --muted: #8e8e93; --border: rgba(0, 0, 0, 0.08); --red: #ff3b30; --accent: #ff3b30; color-scheme: light; } /* Dark palette — applied as ``. */ :root[data-theme="dark"] { --bg: #0a0a0b; --card: #161618; --black: #ededee; --muted: #9b9ba1; --border: rgba(255, 255, 255, 0.08); --red: #ff453a; --accent: #ff453a; color-scheme: dark; } /* Top-level swap. Use color-only transitions (cheap, GPU-friendly) so the page doesn't trigger heavy layout work on theme toggle. */ html, body { background-color: var(--bg); color: var(--black); transition: background-color 0.35s ease, color 0.35s ease; } *, *::before, *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* Dark-mode form inputs — pages mostly hard-code `background:#fff` on inputs, which fights the dark surface. Override the common form controls so they inherit the card colour. */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--card); color: var(--black); border-color: var(--border); } :root[data-theme="dark"] ::placeholder { color: var(--muted); opacity: 0.7; } /* Dim photos / illustrations slightly so they don't blare against the dark surface. Logos / icons keep full opacity. */ :root[data-theme="dark"] img:not([data-theme-keep]) { opacity: 0.92; } /* ── Dark-mode hard overrides ───────────────────────────────────── Many pages hardcode `background:#fff` / `background:#f5f5f7` on their , , headers, and cards inside per-page inline