/* Day and night for every page. Day: off-white. Night: warm charcoal. Coral is the accent in both.
   theme.js sets data-theme on <html> before the page draws (the visitor's choice, else their phone's setting).
   These beat each page's own :root colours because [data-theme] is more specific. */
:root[data-theme="light"] {
  --paper: #FAFAF8; --dot: #E9E9E5; --card: #FFFFFF; --ink: #18181B; --muted: #6B6B70; --faint: #A6A6AA; --line: #E4E4E0;
  --hi: #F7D8CB; --pop: #C2502D; --accent: #E2704A; --glow: transparent; --pencil: #A3A3A8; --tile: #F3F3F1;
  --ok: #E3EFE0; --no: #F6E3DC; --shadow: rgba(0,0,0,.07); --lift: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #141416; --dot: #1F1F23; --card: #1D1D21; --ink: #ECEAE6; --muted: #A09EA6; --faint: #6E6C74; --line: #2E2E33;
  --hi: rgba(235,120,85,.38); --pop: #F29A78; --accent: #E2704A; --glow: rgba(235,120,85,.16); --pencil: #56565E; --tile: #26262B;
  --ok: rgba(120,180,130,.16); --no: rgba(235,120,85,.16); --shadow: rgba(0,0,0,.5); --lift: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background-color: var(--paper); background-image: radial-gradient(120% 50% at 50% 0%, rgba(255,255,255,.05), transparent 60%), radial-gradient(var(--dot) 1.1px, transparent 1.3px); background-size: auto, 22px 22px; }
html { transition: background-color .3s ease; }

/* The day/night switch, added to the menu by theme.js. */
.theme-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Beta, next to the wordmark on every page. */
.beta-tag { margin: 0 auto 0 8px; padding: 3px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted);
  font: 500 10.5px/1 var(--body, system-ui); letter-spacing: .06em; text-transform: uppercase; align-self: center; }