/*
 * The design's vocabulary: colour, spacing, and type, in one place.
 *
 * Colours are chosen for contrast rather than for fashion. Body text on the
 * page background and on every button clears WCAG AA at normal size, and no
 * meaning is carried by colour alone: archived state, errors, and the current
 * page are all said in words as well.
 *
 * Light is the default and dark follows the system, unless someone has picked
 * one with the theme toggle: that choice is `data-theme` on <html>, set before
 * first paint by the layout. Plain CSS has no way to share one block between
 * a media query and an attribute selector, so the dark values appear twice
 * below; keep the two copies identical.
 */
:root {
  color-scheme: light;

  --ink: #16202c;
  --ink-quiet: #4a5768;
  /* Warm paper tones rather than pure white, which glares and washes out
     tag colours. The page sits a step below the panels on it, so a panel
     still reads as a panel. Ink stays at 6:1 or better on both. */
  --page: #eeebe4;
  --surface: #f7f5f0;
  --line: #d3cfc6;
  --accent: #1c4f8b;
  --accent-ink: #ffffff;
  --alert: #8b1c1c;
  --alert-surface: #fdeceb;
  --notice: #17553a;
  --notice-surface: #e8f5ee;

  /* The header bar stays dark in both schemes, like a window's title bar. */
  --bar: #212529;
  --bar-line: #3f4346;
  --bar-ink: #ffffff;
  --bar-ink-quiet: #b3b7bb;
  --bar-surface: #2c3136;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;

  --radius: 0.375rem;
  --measure: 42rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink: #eef1f5;
    --ink-quiet: #b3bcc9;
    --page: #131820;
    --surface: #1c232d;
    --line: #39424f;
    --accent: #8ab4e8;
    --accent-ink: #10151c;
    --alert: #ffb4ae;
    --alert-surface: #3a1f1e;
    --notice: #9fd3b6;
    --notice-surface: #16301f;

    --bar: #0c1016;
    --bar-line: #2a313b;
    --bar-surface: #1c232d;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #eef1f5;
  --ink-quiet: #b3bcc9;
  --page: #131820;
  --surface: #1c232d;
  --line: #39424f;
  --accent: #8ab4e8;
  --accent-ink: #10151c;
  --alert: #ffb4ae;
  --alert-surface: #3a1f1e;
  --notice: #9fd3b6;
  --notice-surface: #16301f;

  --bar: #0c1016;
  --bar-line: #2a313b;
  --bar-surface: #1c232d;
}