/* ===== Storm Algo — shared light/dark theming =====
   Dark is the default (defined in each page's inline :root). This file adds the
   LIGHT overrides plus the nav toggle button. Loaded on every public page.
   Light rules use :root[data-theme="light"] so they win over :root regardless
   of stylesheet order. The four surface vars (--nav-bg/--nav-bg-solid/--note-bg/
   --row-hover) are defined per page in :root and flipped here. */
:root[data-theme="light"]{
  --bg:#e4e6e9;--surface:#eef0f2;--card:#eef0f2;--bd:#d0d5db;--tx:#191d23;
  --mut:#576270;--dim:#8a94a0;
  --grn:#1a7f37;--red:#cf222e;--acc:#0969da;--gold:#9a6700;
  --nav-bg:rgba(238,240,242,.9);--nav-bg-solid:rgba(228,230,233,.98);
  --note-bg:#e3e6ea;--row-hover:#e0e3e7;
}
/* Smooth the flip (scoped to theme-affected surfaces across all pages) */
body,nav,.kpi,.chart-card,.tbl-card,.tl-card,.tl-badge,.cal-cell,.note,.demo,
.about-item,.card,.stat,.tab,.tbl-card table td,.tbl-card table th{
  transition:background-color .25s ease,border-color .25s ease,color .2s ease;
}
/* Nav toggle button */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--bd);border-radius:8px;
  background:transparent;color:var(--mut);cursor:pointer;line-height:0;flex:none;
  transition:color .2s,border-color .2s,background .2s}
.theme-toggle:hover{color:var(--tx);border-color:var(--mut)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .i-sun{display:inline-block}
.theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:inline-block}
/* In the mobile hamburger dropdown, give the toggle breathing room */
@media(max-width:768px){
  nav .nav-right .theme-toggle{margin:12px 22px;width:40px;height:40px}
  nav .nav-right .theme-toggle svg{width:19px;height:19px}
}