:root {
  --color-ink: #0b2a4f;
  --color-body: #364152;
  --color-muted: #5a6475;
  --color-canvas: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-alt: #eaf1f8;
  --color-line: #d5dee8;
  --color-primary: #0370b6;
  --color-primary-deep: #075a93;
  --color-accent: #f7941d;
  --color-accent-hover: #ffa940;
  --color-sun: #ffc93c;
  --color-on-primary: #ffffff;
  --color-on-accent: #0b2a4f;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #c9d6e6;
  --color-focus: #0370b6;
  --color-wa-green: #0e7a55;
  --color-reserve-orange: #c2410c;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-9: 96px;
  --spacing-10: 128px;
  --rounded-xs: 6px;
  --rounded-sm: 10px;
  --rounded-md: 14px;
  --rounded-lg: 20px;
  --rounded-xl: 28px;
}