/* Theme variables: light by default; dark theme is applied when `.dark` is present on the element */ :root{ --bg:#fcfdff; --card-bg:#ffffff; --text:#0b1220; --muted:#5a6b78; --accent:#6b7280; /* Section backgrounds for alternating bands (primary / secondary) */ --bg-primary: var(--bg); --bg-secondary: #eef5f5; /* slightly darker, more distinct */ /* Header scrolled appearance (light theme) */ --header-scrolled-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)); --header-scrolled-border: rgba(0,0,0,0.06); --header-scrolled-shadow: 0 6px 20px rgba(0,0,0,0.06); } /* Dark theme overrides */ .dark{ --bg:#0b0f12; --card-bg:#0f1416; --text:#e6eef8; --muted:#a3b5c4; --accent:#94a3b8; /* Section backgrounds (dark variants) - alternating bands */ --bg-primary: var(--bg); --bg-secondary: #101418; /* slightly lighter/different than primary */ /* Header scrolled appearance (dark theme) */ --header-scrolled-bg: linear-gradient(180deg, rgba(2,6,10,0.95), rgba(2,6,10,0.88)); --header-scrolled-border: rgba(255,255,255,0.06); --header-scrolled-shadow: 0 6px 20px rgba(0,0,0,0.25); } body{background:var(--bg);color:var(--text);transition:background-color .2s ease,color .2s ease} .card{background:var(--card-bg)} .btn.btn-primary{background:#5a6d7d;color:#ffffff} .dark .btn.btn-primary{background:#94a3b8;color:#0b0f12} /* Theme toggle: light-mode specific visual tweaks to improve contrast */ :not(.dark) .btn.btn-icon-outline{ background: rgba(10,16,20,0.06); border-color: rgba(10,16,20,0.08); color: var(--text); } :not(.dark) .btn.btn-icon-outline .theme-icon{color:var(--text);opacity:0.95} :not(.dark) .btn.btn-icon-outline:hover{background:rgba(10,16,20,0.08)} /* Dark mode visual for the toggle (ensure it remains subtle) */ .dark .btn.btn-icon-outline{ background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); } .dark .btn.btn-icon-outline .theme-icon{color:var(--muted)} /* subtle focus outlines */ :focus{outline:2px solid rgba(148,163,184,0.12);outline-offset:2px}