/* The only source of semantic palette, spacing and shape values. */
:root {
  --ink: #1B2B43;
  --text: #404B5A;
  --muted: #606D7F;
  --accent: #3156B8;
  --accent-strong: #26469A;
  --accent-hover: #26469A;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-subtle: #F8F9FB;
  --soft: #EEF2FC;
  --line: #DCE1E8;
  --control-border: #8591A3;
  --green-soft: #EDF7F1;
  --green-text: #216344;
  --correct-ink: #176B4B;
  --wrong-ink: #B42318;
  --red: #B42318;
  --warm: #FFF6E5;
  --warm-line: #E9D3A2;
  --focus: #3156B8;
  --radius: 12px;
  --radius-control: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --measure: 42em;
  --control-height: 48px;
  --control-compact: 44px;
  --button-min: 112px;
  --button-width: 160px;
  --button-max: 320px;
  --action-gap: 12px;
}