/* The design system's tokens (System Book, highway layout: "colours in styles/tokens.css", type roles TR2, no px or
   em). Every screen, the shell's and each city's frame, uses these names. First cut for step 7: the colours of the
   one frame (white rows and cards, the picked row light purple with a purple bar) and the first type roles. */
:root {
  --colour-page: #f6f5fb;
  --colour-card: #ffffff;
  --colour-line: #e4e1ef;
  --colour-text: #1d1a2b;
  --colour-quiet: #5d5873;
  --colour-accent: #6c3fd1;
  --colour-picked: #efe8ff;
  --colour-notice: #fff6db;
  --colour-notice-line: #e7c766;
  /* Red: what needs a person now (System health's red lines, admin PR 2). */
  --colour-red: #b3261e;
  --colour-red-soft: #fdecea;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --radius: 0.5rem;
  /* Type roles (TR2): one name per use, never a size written on a screen. */
  --type-title: 600 1.375rem/1.3 system-ui, sans-serif;
  --type-heading: 600 1.0625rem/1.35 system-ui, sans-serif;
  --type-body: 400 1.0625rem/1.5 system-ui, sans-serif;
  --type-label: 600 0.8125rem/1.3 system-ui, sans-serif;
  --type-small: 400 0.875rem/1.4 system-ui, sans-serif;
}
@media (max-width: 48rem) {
  :root {
    --type-body: 400 1.3125rem/1.5 system-ui, sans-serif;
  }
}