:root {
  --color-primary: #1b1f3b;
  --color-on-primary: #fff8ec;
  --color-on-primary-muted: #c9cce0;
  --color-surface: #ffffff;
  --color-on-surface: #1b1f3b;
  --color-on-surface-muted: #4a4f6a;
  --color-surface-soft: #f4f5f9;
  --color-line: #dde0ea;
  --color-edge: #8a8fa8;
  --color-accent: #ffc531;
  --color-accent-hover: #ffd45e;
  --color-accent-pressed: #e5ac14;
  --color-on-accent: #1b1f3b;
  --color-busy: #3a3f60;
  --color-approved: #15663a;
  --color-link: #0f55b3;
  --color-warning: #a13300;
  --color-error: #a72250;
  --color-brand-green: #22a45d;
  --color-brand-blue: #2f80ed;
  --color-brand-tangerine: #ff7a3d;
  --color-brand-berry: #d6336c;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-screen-side: 24px;
  --spacing-desk-side: 32px;
  --spacing-target: 44px;
  --spacing-button: 56px;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 14px;
  --rounded-xl: 24px;
  --rounded-full: 9999px;
}