/* Dark theme for the hand-authored site, shared by every page. Each page keeps
   its own light palette in its own :root; this only applies under
   [data-theme='dark']. It overrides every custom property the pages use,
   whichever each one names its background (--bg or --paper), so one block
   themes them all. Toggle button is injected by theme-toggle.js. */

:root {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1a1a1a;
  --paper: #1a1a1a;
  --ink: #e8e6e0;
  --ink-soft: #b0ada4;
  --ink-faint: #8a8a82;
  --rule: #2a2a2a;
  --accent: #7fb0ff;
  --accent-soft: #9fc0f0;
}

#theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg, var(--paper));
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
#theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}
#theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
#theme-toggle .icon-sun {
  display: none;
}
:root[data-theme='dark'] #theme-toggle .icon-sun {
  display: block;
}
:root[data-theme='dark'] #theme-toggle .icon-moon {
  display: none;
}