/* ========================================================================== TrueCalc Pro — dark-mode.css All colour tokens live here so the two themes can be compared side by side. Dark is the default. The theme is chosen by `data-theme` on , set before first paint by the inline script in each page's : data-theme="dark" → dark palette (default, also used when nothing is set) data-theme="light" → light palette Dark is used until the visitor picks light with the header toggle. ========================================================================== */ /* ---------- DARK (default) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #07060f; --bg-2: #0d0b1a; --surface: rgba(255, 255, 255, 0.038); --surface-2: rgba(255, 255, 255, 0.065); --surface-3: rgba(255, 255, 255, 0.10); --glass: rgba(18, 16, 34, 0.55); --code-bg: rgba(124, 58, 237, 0.08); --icon-bg: rgba(45, 212, 191, 0.10); --tag-bg: rgba(167, 139, 250, 0.14); --tag-fg: #C4B5FD; --toast-bg: rgba(24, 21, 44, 0.94); --overlay: rgba(5, 4, 12, 0.72); --header-bg: rgba(9, 8, 20, 0.80); --footer-bg: rgba(255, 255, 255, 0.018); --input-bg: rgba(255, 255, 255, 0.05); --input-bg-focus: rgba(255, 255, 255, 0.08); /* Borders */ --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-accent: rgba(45, 212, 191, 0.42); /* Text */ --text: #D9D5EC; --text-strong: #F6F4FF; --text-muted: #A49FC0; --text-faint: #746E92; /* Brand */ --primary: #7C3AED; --primary-2: #A78BFA; --accent: #2DD4BF; --accent-2: #5EEAD4; --accent-text:#5EEAD4; --link: #8FE7DC; --link-hover: #BFF5EE; /* Call to action */ --cta-bg: #2DD4BF; --cta-bg-hover: #5EEAD4; --cta-fg: #032822; --cta-glow: rgba(45, 212, 191, 0.55); /* Status */ --success: #34D399; --success-bg: rgba(52, 211, 153, 0.12); --warn: #FBBF24; --warn-bg: rgba(251, 191, 36, 0.10); --warn-border: rgba(251, 191, 36, 0.32); --danger: #FB7185; --danger-bg: rgba(251, 113, 133, 0.12); --danger-border:rgba(251, 113, 133, 0.42); --info: #818CF8; /* Effects */ --focus: #5EEAD4; --ring: rgba(45, 212, 191, 0.22); --bg-glow: radial-gradient(1200px 620px at 50% -220px, rgba(124, 58, 237, 0.40), transparent 70%), radial-gradient(900px 500px at 88% 8%, rgba(45, 212, 191, 0.10), transparent 68%); --hero-glow: radial-gradient(closest-side, rgba(139, 92, 246, 0.36), rgba(139, 92, 246, 0.06) 62%, transparent 78%); --card-sheen: linear-gradient(140deg, rgba(167, 139, 250, 0.10), rgba(45, 212, 191, 0.05) 60%, transparent); --cta-band-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(45, 212, 191, 0.10)); --panel-bg: rgba(16, 14, 30, 0.72); --result-bg: linear-gradient(160deg, rgba(148, 163, 184, 0.16), rgba(124, 58, 237, 0.12)); --result-row: #FFFFFF; --result-row-text: #0B0A16; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 14px 40px -20px rgba(0, 0, 0, 0.85); --shadow-lg: 0 28px 70px -30px rgba(0, 0, 0, 0.95); } /* ---------- LIGHT ---------- */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-2: #FAF8FF; --surface: #FFFFFF; --surface-2: #F5F2FE; --surface-3: #ECE7FB; --glass: rgba(255, 255, 255, 0.85); --code-bg: #F5F2FE; --icon-bg: rgba(13, 148, 136, 0.10); --tag-bg: #EDE6FE; --tag-fg: #5B21B6; --toast-bg: rgba(255, 255, 255, 0.97); --overlay: rgba(24, 20, 40, 0.42); --header-bg: rgba(255, 255, 255, 0.86); --footer-bg: #FAF8FF; --input-bg: #FFFFFF; --input-bg-focus: #FFFFFF; --border: #E6E1F4; --border-strong: #CFC7E8; --border-accent: rgba(13, 148, 136, 0.45); --text: #2B2740; --text-strong: #15122A; --text-muted: #56506F; --text-faint: #817B9B; --primary: #6D28D9; --primary-2: #7C3AED; --accent: #0D9488; --accent-2: #14B8A6; --accent-text:#0F766E; --link: #6D28D9; --link-hover: #4C1D95; --cta-bg: #0D9488; --cta-bg-hover: #0F766E; --cta-fg: #FFFFFF; --cta-glow: rgba(13, 148, 136, 0.45); --success: #047857; --success-bg: #E7F7F1; --warn: #B45309; --warn-bg: #FEF6E7; --warn-border: #F5D9A8; --danger: #BE123C; --danger-bg: #FEECF1; --danger-border:#F7C5D3; --info: #4338CA; --focus: #6D28D9; --ring: rgba(109, 40, 217, 0.18); --bg-glow: radial-gradient(1100px 560px at 50% -260px, rgba(124, 58, 237, 0.14), transparent 70%), radial-gradient(800px 460px at 90% 4%, rgba(13, 148, 136, 0.08), transparent 66%); --hero-glow: radial-gradient(closest-side, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0.03) 60%, transparent 76%); --card-sheen: linear-gradient(140deg, rgba(124, 58, 237, 0.06), rgba(13, 148, 136, 0.04) 60%, transparent); --cta-band-bg: linear-gradient(135deg, #F3EEFE, #E8F7F4); --panel-bg: #FFFFFF; --result-bg: linear-gradient(160deg, #F3EEFE, #E6F6F3); --result-row: #FFFFFF; --result-row-text: #15122A; --shadow-sm: 0 1px 2px rgba(21, 18, 42, 0.06); --shadow-md: 0 12px 30px -18px rgba(21, 18, 42, 0.30); --shadow-lg: 0 24px 56px -28px rgba(21, 18, 42, 0.35); } /* Note: there is deliberately no prefers-color-scheme override here. Dark is the brand default and every page ships with data-theme="dark" on , so the site looks the same for everyone until the visitor uses the header toggle — at which point their choice is remembered. */ /* Smooth cross-fade when the toggle flips, but only for the chrome — we deliberately keep transitions off text to avoid a muddy repaint. */ .theme-transition, .theme-transition .site-header, .theme-transition .card, .theme-transition .calc-panel, .theme-transition .calc-result, .theme-transition .calc-card, .theme-transition .site-footer { transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease; } /* Windows high-contrast / forced colours */ @media (forced-colors: active) { .btn, .icon-btn, .card, .calc-panel, .calc-result, .calc-card, .faq__item { border: 1px solid CanvasText; } .btn--primary, .btn--violet { forced-color-adjust: none; background: Highlight; color: HighlightText; } :focus-visible { outline: 3px solid Highlight; } }