:root {
  --color-background-page: #f4f1ea;
  --color-background-surface: #ffffff;
  --color-background-header: #243447;
  --color-background-chip: #344e68;
  --color-text: #1f2933;
  --color-text-inverted: #ffffff;
  --color-accent: #c94f4f;
  --color-link: #2f6f8f;
  --color-border: #d8d2c6;
  --color-sequence-item: rgba(244, 241, 234, 0.7);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-1: 0.5rem;
  --radius-pill: 999px;
  --max-content-width: 72rem;
}

body.dark-mode {
  --color-background-page: #111b2a;
  --color-background-surface: #1d2a3d;
  --color-background-header: #0a111d;
  --color-background-chip: #2f425c;
  --color-text: #e8edf5;
  --color-text-inverted: #f6f8fb;
  --color-accent: #f7a65b;
  --color-link: #8fceff;
  --color-border: #3c4e67;
  --color-sequence-item: rgba(18, 28, 42, 0.88);
}