/* Day/night colors shared by the zerocog.us sites (zerocog/zerocogus#94).

   One copy lives here and is served from https://zerocog.us/theme.css. The other
   zerocog.us sites link to it instead of keeping their own, so they cannot drift.
   Change a color in the palette block below and every site follows.

   Behaviour: with no saved choice the page follows the device (night by default, day
   when the device asks for light). theme.js puts the visitor's saved choice on
   <html data-theme="day|night">, which wins over the device. */

:root {
  /* The palettes. Edit colors here, once. */
  --night-bg: #0f1216;
  --night-bg-elev: #171b21;
  --night-border: #262c35;
  --night-text: #e8ebf0;
  --night-text-dim: #9aa4b2;
  --night-accent: #5b8cff;
  --day-bg: #f5f6f8;
  --day-bg-elev: #ffffff;
  --day-border: #e2e5ea;
  --day-text: #1a1d23;
  --day-text-dim: #5b6472;
  /* Deeper than the night blue so links and white button text reach 4.5:1 on day backgrounds. */
  --day-accent: #2f62d9;

  --radius: 10px;

  /* Default: night. */
  color-scheme: dark;
  --bg: var(--night-bg);
  --bg-elev: var(--night-bg-elev);
  --border: var(--night-border);
  --text: var(--night-text);
  --text-dim: var(--night-text-dim);
  --accent: var(--night-accent);
}

/* The device asks for light and the visitor has not chosen night. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="night"]) {
    color-scheme: light;
    --bg: var(--day-bg);
    --bg-elev: var(--day-bg-elev);
    --border: var(--day-border);
    --text: var(--day-text);
    --text-dim: var(--day-text-dim);
    --accent: var(--day-accent);
  }
}

/* The visitor chose day. (Keep this block in step with the one above.) */
:root[data-theme="day"] {
  color-scheme: light;
  --bg: var(--day-bg);
  --bg-elev: var(--day-bg-elev);
  --border: var(--day-border);
  --text: var(--day-text);
  --text-dim: var(--day-text-dim);
  --accent: var(--day-accent);
}

/* The day/night button. theme.js shows it (it is hidden until the script runs). */
.theme-toggle {
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-toggle[hidden] { display: none; }