/* Light / dark theme. The pages define the light colours; this swaps the same variables. Dark follows the system setting
   unless the person picked a theme with the toggle (theme.js sets data-theme on <html>). */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14110e; --ink: #f4efe6; --faint: #a39a8e; --line: #383129; --accent: #e0664a;
  --me-bg: #f4efe6; --me-ink: #181512;
  --card: #1d1915; --card-line: #383129; --card-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); --quiet-line: #4a4138; --quiet-ink: #a39a8e;
}
:root[data-theme="dark"] .announce.warn { color: #181512; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14110e; --ink: #f4efe6; --faint: #a39a8e; --line: #383129; --accent: #e0664a;
    --me-bg: #f4efe6; --me-ink: #181512;
    --card: #1d1915; --card-line: #383129; --card-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); --quiet-line: #4a4138; --quiet-ink: #a39a8e;
  }
  :root:not([data-theme="light"]) .announce.warn { color: #181512; }
}

/* the sun/moon toggle used in the header and nav: moon while light (click for dark), sun while dark (click for light) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--ink); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
nav { align-items: center; } /* links and the toggle share one centre line (links used to stretch to the toggle's height) */
nav .theme-toggle { width: 22px; height: 22px; border: none; color: var(--faint); }
nav .theme-toggle:hover, nav .theme-toggle:focus-visible { background: none; color: var(--ink); }
nav .theme-toggle svg { width: 17px; height: 17px; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}