/* ========================================================================= theme.css — shared design tokens for all pages. Dark mode is the default. Light mode activates via: 1. prefers-color-scheme: light (automatic, respects OS setting) 2. [data-theme="light"] on (manual toggle, persisted to localStorage) The toggle button is injected by theme.js on every page. ========================================================================= */ :root { --bg: #0f0d0b; --bg-elev: #1a1614; --bg-card: #231e1a; --text: #f5ede0; --text-muted: #8a8179; --accent: #e8b547; --accent-dim: rgba(232, 181, 71, 0.15); --cta: #3478e0; --cta-hover: #4a86e6; --cta-text: #ffffff; --success: #a8c686; --danger: #d67d6f; --info: #7fb7c9; --border: rgba(245, 237, 224, 0.1); --border-strong: rgba(245, 237, 224, 0.2); --font-serif: 'Iowan Old Style', 'Palatino', 'Book Antiqua', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace; color-scheme: dark; } /* Light mode tokens — applied when OS prefers light OR manual toggle is set */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #faf8f5; --bg-elev: #f0ece4; --bg-card: #e8e2d8; --text: #1a1208; --text-muted: #6b6055; --accent: #b8860b; --accent-dim: rgba(184, 134, 11, 0.12); --cta: #1f6fd6; --cta-hover: #185fb8; --cta-text: #ffffff; --success: #4a7c30; --danger: #b85450; --info: #2a7a94; --border: rgba(26, 18, 8, 0.12); --border-strong: rgba(26, 18, 8, 0.22); color-scheme: light; } } [data-theme="light"] { --bg: #faf8f5; --bg-elev: #f0ece4; --bg-card: #e8e2d8; --text: #1a1208; --text-muted: #6b6055; --accent: #b8860b; --accent-dim: rgba(184, 134, 11, 0.12); --cta: #1f6fd6; --cta-hover: #185fb8; --cta-text: #ffffff; --success: #4a7c30; --danger: #b85450; --info: #2a7a94; --border: rgba(26, 18, 8, 0.12); --border-strong: rgba(26, 18, 8, 0.22); color-scheme: light; } [data-theme="dark"] { --bg: #0f0d0b; --bg-elev: #1a1614; --bg-card: #231e1a; --text: #f5ede0; --text-muted: #8a8179; --accent: #e8b547; --accent-dim: rgba(232, 181, 71, 0.15); --cta: #3478e0; --cta-hover: #4a86e6; --cta-text: #ffffff; --success: #a8c686; --danger: #d67d6f; --info: #7fb7c9; --border: rgba(245, 237, 224, 0.1); --border-strong: rgba(245, 237, 224, 0.2); color-scheme: dark; } /* Kill horizontal page-pan. Some mobile content (wide tables, min-width rows) can spill past the viewport; that lets the page scroll sideways, which on mobile browsers drags right-anchored position:fixed elements — like the theme toggle below — off the visible screen. Clamping overflow-x on the root keeps the viewport the width of the device so the toggle stays put. (No position:sticky is used anywhere, so this has no side effects.) */ html { overflow-x: hidden; } /* ---- Theme toggle button ---- */ #themeToggle { position: fixed; /* Offset from the edges, plus the iOS safe-area inset so the button clears rounded corners / the home indicator on notched phones. */ bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); z-index: 999; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text-muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; padding: 0; line-height: 1; } #themeToggle:hover { border-color: var(--accent); color: var(--accent); }