:root {
  --spacing-base: 0.75rem;
  --gap: var(--spacing-base);
  --color-accent: #008ed8;
  --color-on-accent: #f4f4f4;
  --color-surface: #ffffff;
  --color-on-surface: #2c2c2c;
  --color-bg: #f0f2f5;
  --color-border: #d0d7de;
  --shadow-raised: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
  --border-radius: 0.375rem;
  --typography-size-base: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-accent: #58b4f0;
    --color-on-accent: #111;
    --color-surface: #1e2229;
    --color-on-surface: #e0e6ed;
    --color-bg: #13171d;
    --color-border: #30363d;
    --shadow-raised: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.4);
  }
}