/* Light theme — follows the visitor's OS setting by default; the toggle overrides + persists.
   Dark values live in each page's :root; these rules only supply the LIGHT palette. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f4f6fa; --panel:#ffffff; --panel2:#eceff4; --line:#d7dee8;
    --ink:#18212e; --body:#3a4552; --mut:#5c6875;
    --accent:#2563eb; --accent2:#6d4bff; --onaccent:#ffffff; --code:#1e40af;
  }
}
:root[data-theme="light"]{
  --bg:#f4f6fa; --panel:#ffffff; --panel2:#eceff4; --line:#d7dee8;
  --ink:#18212e; --body:#3a4552; --mut:#5c6875;
  --accent:#2563eb; --accent2:#6d4bff; --onaccent:#ffffff; --code:#1e40af;
}

/* theme toggle button (injected by theme.js) */
#themeToggle{
  position:fixed; top:12px; right:14px; z-index:60;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line); font-size:18px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  transition:border-color .15s, color .15s, background .15s;
}
#themeToggle:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:560px){ #themeToggle{ width:36px; height:36px; top:9px; right:10px; font-size:16px; } }