/* Cygnus colours. Every page links this first; theme.js names the theme on <html> before the page is drawn.
   Two themes share one set of names: Dark (the default, black and ember) and Light (cream paper, brown ink).
   A rule elsewhere never writes a colour of its own: it takes one of these, or mixes one with transparent at
   the strength it needs. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces, from the page upward */
  --black: #000;
  --panel: #0a0a09;
  --field: #0f0e0d;
  --raise: #161513;
  --raise-2: #1c1b19;
  --term: #000;
  --term-ink: #e9e3d9;
  --line: #201e1b;
  --line-2: #33302c;
  --line-3: #5a544c;
  /* writing */
  --ink-max: #fff;
  --ink: #f4efe8;
  --ink-2: #e6e0d7;
  --ink-3: #d9d3c9;
  --soft: #a39d94;
  --mute: #6f6a63;
  --on-fill: #0b0a09;          /* writing on a filled control: a button, a badge, a toast */
  /* the accent, and what is said in colour */
  --ember: #ffa45c;
  --ember-soft: #f1c39a;
  --bad: #ff9d8a;
  --info: #3987e5;
  --info-ink: #9cc3f2;
  /* data marks: a pair checked for colour-vision safety on this theme's page */
  --series-1: #d9772e;
  --series-2: #3987e5;
  /* status, always shown with an icon or a label */
  --good: #0ca30c;
  --good-ink: #5fd35f;
  --warn: #fab219;
  --crit: #d03b3b;
  /* the maps: kinds of points and of lines that have no other name */
  --map-entry: #e8c38a;
  --map-adds: #ffc896;
  --map-conflict: #e85048;
  /* depth */
  --shadow: #000;
  --scrim: #000;
  /* a person's mark: their tone over a base */
  --av-base: #0b0a09;
  --av-tint: 22%;
}

:root[data-theme="light"] {
  color-scheme: light;
  --black: #f0e6d3;
  --panel: #f5ecdb;
  --field: #f9f2e3;
  --raise: #e6dac4;
  --raise-2: #dfd2ba;
  --term: #f5ecdb;
  --term-ink: #473f35;
  --line: #e2d6c0;
  --line-2: #d1c3a9;
  --line-3: #ad9d83;
  --ink-max: #2a231c;
  --ink: #3b332a;
  --ink-2: #473f35;
  --ink-3: #534a3f;
  --soft: #726658;
  --mute: #796d5f;
  --on-fill: #f9f2e3;
  --ember: #b5622e;
  --ember-soft: #96623c;
  --bad: #b0473c;
  --info: #3f76bb;
  --info-ink: #34639c;
  --series-1: #c06a2b;
  --series-2: #3f78c0;
  --good: #40893f;
  --good-ink: #327232;
  --warn: #9d6d14;
  --crit: #bf4b41;
  --map-entry: #9a7432;
  --map-adds: #bf8450;
  --map-conflict: #bf4b41;
  --shadow: rgb(96 72 40 / .2);
  --scrim: rgb(60 46 28 / .42);
  --av-base: #f9f2e3;
  --av-tint: 52%;
}

/* Drawings made of light (galaxies, their small marks) are printed as ink on paper: brightness turned over, hues kept. */
:root[data-theme="light"] .lit { filter: invert(1) hue-rotate(180deg); }

/* ---------- the theme switch ---------- */
.theme-switch { display: flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); }
.theme-switch button { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--mute); font: 400 .8125rem var(--sans); cursor: pointer; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-checked="true"] { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }