/* ================================================================ Theracharts — Light Theme Overrides Loaded via on every page. The per-page inline :root block keeps the default dark tokens; this file layers light-mode overrides on top. Activation: (set by js/theme-toggle.js and the FOUC-prevention bootstrap snippet in each page's ). ================================================================ */ /* ---- Extra tokens every page inherits (dark defaults) ---- Pages define the 16 core tokens inline; we layer these chrome tokens on top for the nav/dropdown/utility-bar surfaces so light mode can flip them cleanly without per-page edits. */ :root { --accent-alt: #818cf8; --nav-bg: rgba(11, 13, 19, 0.95); --mobile-nav-bg: rgba(11, 13, 19, 1); --dropdown-bg: rgba(23, 26, 33, 0.96); --dropdown-hover: rgba(255, 255, 255, 0.06); --utility-bar-bg: #050505; --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); } /* ---- Light theme: redefine every token ---- :root[data-theme="light"] is specificity (0,2,0) — beats plain :root (0,1,0) regardless of source order, so this wins even though per-page inline :root blocks come later in the cascade. */ :root[data-theme="light"] { --bg: #ffffff; --bg-secondary: #f6f7fa; --bg-tertiary: #eceef3; --surface: #ffffff; --surface-hover: #f1f2f6; --text: #0b0d13; --text-secondary: #434854; --text-tertiary: #6c707c; --border: #dcdfe6; --border-light: #e8eaf0; --accent: #4f46e5; --accent-hover: #4338ca; --accent-light: rgba(79, 70, 229, 0.10); --accent-alt: #6366f1; --success: #047857; --warning: #c2410c; --error: #b91c1c; --nav-bg: rgba(255, 255, 255, 0.92); --mobile-nav-bg: #ffffff; --dropdown-bg: rgba(255, 255, 255, 0.98); --dropdown-hover: rgba(15, 23, 42, 0.05); --utility-bar-bg: #f6f7fa; --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); color-scheme: light; } /* Meta theme-color update — browsers read the meta tag from HTML, but we can't edit it from CSS. Handled in js/theme-toggle.js. */ /* ================================================================ Per-selector overrides for hardcoded rgba/hex values that live in per-page inline CSS. Specificity (0,2,0) beats (0,1,0) so these win without !important. ================================================================ */ /* Nav chrome */ [data-theme="light"] .tc-nav { background: var(--nav-bg); border-bottom-color: var(--border); } [data-theme="light"] .tc-nav-dropdown-menu { background: var(--dropdown-bg); border-color: var(--border); box-shadow: var(--shadow-lg); } [data-theme="light"] .tc-nav-dropdown-menu a:hover { background: var(--dropdown-hover); color: var(--text); } /* Mobile menu background */ @media (max-width: 768px) { [data-theme="light"] .tc-nav-links, [data-theme="light"] .tc-nav-actions { background: var(--mobile-nav-bg); border-bottom-color: var(--border); } } /* Utility bar */ [data-theme="light"] .tc-utility-bar { background: var(--utility-bar-bg); border-bottom-color: var(--border-light); } /* ================================================================ Readability touch-ups for elements whose inline styles assumed a dark background. ================================================================ */ /* Generic white-on-dark text that needs to invert in light mode */ [data-theme="light"] body { background: var(--bg); color: var(--text); } /* Hero and section backgrounds that use semi-transparent white/black overlays often become invisible in light mode — soften them. */ [data-theme="light"] .tc-hero-gradient, [data-theme="light"] .tc-section-dark { background: var(--bg-secondary); color: var(--text); } /* Images / SVG illustrations with no explicit theme — usually fine, but diagrams authored for dark backgrounds can be locked via .tc-lock-dark (add this class to any element that should stay dark even in light mode). */ .tc-lock-dark, .tc-lock-dark * { --bg: #0b0d13; --bg-secondary: #111319; --bg-tertiary: #1b1e26; --surface: #171a21; --text: #f4f5f8; --text-secondary: #a8acb8; --text-tertiary: #7a7e8b; --border: #2b2f38; color-scheme: dark; } .tc-lock-dark { background: var(--bg); color: var(--text); } /* Code blocks and syntax-highlight surfaces inside blog posts */ [data-theme="light"] pre, [data-theme="light"] code { background: var(--bg-secondary); color: var(--text); border-color: var(--border); } /* Toast / dropdown dark-mode defaults in shared widgets */ [data-theme="light"] .tc-sticky-cta { box-shadow: var(--shadow-lg); } /* Theme toggle button color hint (dark icon in light mode, etc.) */ .tc-theme-toggle { color: var(--text-tertiary); } .tc-theme-toggle:hover { color: var(--text-secondary); } /* Respect user's reduced-motion preference for theme transitions */ @media (prefers-reduced-motion: no-preference) { html { transition: background-color 0.2s ease; } body { transition: background-color 0.2s ease, color 0.2s ease; } }