/* The design tokens: the two faces, the palette, the radii, the one nav width.
   Every feature draws from these and defines none of its own. */
:root {
  /* Named in one place, so a face is swapped here and nowhere else - and so
     the fallback a face is set against is the same wherever it is read. */
  --font-sans: 'Sora', sans-serif;
  --font-serif: 'Playfair Display', serif;

  --bg: #0F1117;
  --surface: #181C27;
  --surface2: #1F2435;
  --surface3: #252B3D;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #E8EEFF;
  --text2: #A8B4D0;
  --text3: #6B7A9E;
  --accent: #3D93CB;
  --accent2: #2563EB;
  --glow: rgba(61,147,203,0.15);

  /* The corner every rounded edge inside the drawer and the library's two
     columns takes - the lists, the fields and the controls among them. Nearly
     square, because those are dense rows and small fields set close together,
     where the page's own 14px reads as a row of lozenges. */
  --radius-sm: 3px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --nav-w: 232px;

  /* The readiness scale, worst to best. One direction, warm to cool, so a
     band's place on the scale reads without its label. Doubles as the answer
     ramp: an option's colour is interpolated between these stops, which is why
     they have to sit on a smooth path. */
  --A: #F04E63;
  --B: #F0883E;
  --C: #D4B04A;
  --D: #74C46E;
  --E: #23C48E;
}