/* The only file that may contain colour values. Everything else uses var(--...). */
:root {
  /* Colour */
  --ink: #1a1a1a;          /* text */
  --navy: #1F4E79;         /* headings, primary buttons, Secure */
  --navy-dark: #123050;    /* pressed, Lasting */
  --tint: #EEF3F8;         /* panels, pictures */
  --shade-2: #C9D9EA;      /* second shade in pictures; heat map step */
  --known: #7FA6CC;        /* Known */
  --line: #b8c4d0;         /* borders */
  --paper: #ffffff;        /* background */
  --muted: #555555;        /* secondary text */

  /* Type */
  --font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-base: 18px;
  --font-fact: 40px;

  /* Shape and spacing */
  --radius: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --target-min: 48px;      /* smallest touch target */
}