:root {
  /* Ink and paper: text, outlines and hard shadows; the sheet an article is read on. */
  --ink: #0f1730;
  --ink-soft: #46506b;
  --paper: #ffffff;
  --page: #eef3ff;
  /* Ink, mostly see-through: the shadow at the edge of a table that scrolls sideways. */
  --shade: #0f173047;

  /* Blue: the site's own colour (the home page band, links). */
  --blue: #1650f0;
  --blue-deep: #0d36b0;

  /* The category colours, in the order of "categories" in site.config.json. Ink text on each. */
  --sky: #3dd6ff;
  --lime: #b8ff3c;
  --pink: #ff5fae;
  --gold: #ffc83d;
  --orange: #ff8a3d;
  --mint: #3dffc2;

  /* The reader's own system sans, used from regular to its heaviest weight. No page asks another
     site for a font. */
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;

  --line: 3px solid var(--ink);
  --radius: 18px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-small: 4px 4px 0 var(--ink);

  --measure: 46rem;
  --sheet-pad: clamp(1.1rem, 4vw, 2.75rem);
  --max-width: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* How far a sheet, or the home page's cards, ride up over the band above them. */
  --overlap: 3rem;
}

/* One class per category colour: an element takes it and reads --tone. */
.tone-1 { --tone: var(--sky); }
.tone-2 { --tone: var(--lime); }
.tone-3 { --tone: var(--pink); }
.tone-4 { --tone: var(--gold); }
.tone-5 { --tone: var(--orange); }
.tone-6 { --tone: var(--mint); }