:root {
  color-scheme: dark;

  /* Surfaces */
  --color-canvas: #0c0e11;
  --color-surface: #15181d;
  --color-surface-subtle: #20242b;
  --color-surface-raised: #1a1e24;
  --color-control: #0f1216;

  /* Content and borders */
  --color-text: #f5f7fa;
  --color-text-muted: #98a2b3;
  --color-border: #2b313a;
  --color-border-strong: #39414d;

  /* Semantic accents: use only for state, focus, and the primary action. */
  --color-accent: #3b91f7;
  --color-primary-surface: #1764b0;
  --color-positive: #2bc477;
  --color-negative: #f05b56;
  --color-warning: #f2b94b;
  --color-focus-ring: rgba(59, 145, 247, .28);

  /* Spacing follows a four-pixel base rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-control: 8px;
  --radius-panel: 10px;
  --control-height-compact: 38px;
  --control-height-touch: 44px;
  --sidebar-width: 244px;

  /* Compatibility aliases for existing components during incremental migration. */
  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-subtle);
  --surface-raised: var(--color-surface-raised);
  --panel: var(--color-surface);
  --panel-soft: var(--color-surface-subtle);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --border: var(--color-border);
  --muted: var(--color-text-muted);
  --text: var(--color-text);
  --blue: var(--color-accent);
  --green: var(--color-positive);
  --red: var(--color-negative);
  --amber: var(--color-warning);
  --focus-ring: var(--color-focus-ring);
  --primary-surface: var(--color-primary-surface);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
}