/* Dark theme + toggle. Light is the default (page CSS); this only kicks in under . English-blue palette, no cyan — same brand, dark mode. */ :root[data-theme="dark"]{ --color-bg:#0B1220; --color-surface:#131C2E; --color-surface2:#1B2740; --color-border:#273549; --color-primary:#3B86D8; --color-primary-hover:#5B9EE8; --color-primary-dim:rgba(59,134,216,0.16); --color-ink:#FFFFFF; --color-signal:#3B86D8; --color-signal-dim:rgba(59,134,216,0.16); --color-secondary:#3B86D8; --color-secondary-dim:rgba(59,134,216,0.12); --color-success:#2EC76B; --color-text:#EAF1FF; --color-text2:#9FB0C9; --color-text3:#6B7A93; } /* Hardcoded (non-token) colors that need a dark-mode nudge — higher specificity wins */ :root[data-theme="dark"] .nav{ background:rgba(11,18,32,0.85); } :root[data-theme="dark"] .nav-links{ background:rgba(11,18,32,0.98); } :root[data-theme="dark"] .fact-card{ background:#0F1830; } /* soft navy shadows vanish on dark — give cards a real lift */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .sol, :root[data-theme="dark"] .out, :root[data-theme="dark"] .step, :root[data-theme="dark"] .lev, :root[data-theme="dark"] .feat, :root[data-theme="dark"] .plan, :root[data-theme="dark"] .rel, :root[data-theme="dark"] .glass, :root[data-theme="dark"] .demo-panel, :root[data-theme="dark"] .fact-card, :root[data-theme="dark"] .case{ box-shadow:0 8px 26px rgba(0,0,0,0.38); } /* Theme toggle button (in nav) */ .theme-toggle{ width:38px; height:38px; border-radius:50%; border:1px solid var(--color-border); background:transparent; color:var(--color-text2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color 150ms,border-color 150ms,transform 150ms; flex-shrink:0; } .theme-toggle:hover{ color:var(--color-primary); border-color:var(--color-primary); transform:rotate(12deg); } .theme-toggle .sun{ display:none; } .theme-toggle .moon{ display:block; } :root[data-theme="dark"] .theme-toggle .moon{ display:none; } :root[data-theme="dark"] .theme-toggle .sun{ display:block; } @media (prefers-reduced-motion:reduce){ .theme-toggle:hover{ transform:none; } }