:root {
  --color-primary: #1b2b3a;
  --color-on-primary: #f5f8fa;
  --color-primary-edge: #0b1620;
  --color-secondary: #2f6fde;
  --color-on-secondary: #ffffff;
  --color-secondary-ink: #1f57ba;
  --color-secondary-wash: #dce7fa;
  --color-tertiary: #1f8f78;
  --color-tertiary-ink: #146b59;
  --color-on-tertiary-ink: #ffffff;
  --color-tertiary-wash: #d6eee8;
  --color-neutral: #e9eef2;
  --color-surface: #ffffff;
  --color-surface-side: #d5dde3;
  --color-surface-shade: #c3cdd5;
  --color-on-surface: #1b2b3a;
  --color-on-surface-variant: #4d5e6e;
  --color-outline: #aebbc6;
  --color-success: #146b59;
  --color-error: #e5533d;
  --color-error-ink: #b83a26;
  --color-on-error-ink: #ffffff;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 104px;
  --spacing-gutter: 20px;
  --spacing-edge: 6px;
  --rounded-xs: 4px;
  --rounded-sm: 8px;
  --rounded-md: 14px;
  --rounded-lg: 22px;
  --rounded-pill: 999px;
}