/* Design tokens: the single place colors, type, spacing and radii are
   defined. Components consume var(--*) only — a theme swap is a token
   change, not a component change. */
:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-inset: #141821;
  --edge: #262b36;
  --edge-soft: #2a2f3a;
  --text: #e6e8ee;
  --text-dim: #c9cedd;
  --muted: #8b93a5;
  --accent: #5b9dd9;
  --accent-soft: rgba(91, 157, 217, 0.12);
  --ok: #4caf7d;
  --ok-soft: #2f5d46;
  --warn-soft: #6b5b2a;
  --err: #d95b5b;
  --code: #8be9a8;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 18px;

  --sidebar-w: 176px;
  --content-max: 1180px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f8;
    --panel: #ffffff;
    --panel-inset: #eef0f5;
    --edge: #d8dce4;
    --edge-soft: #cdd2dc;
    --text: #1c2230;
    --text-dim: #3a4254;
    --muted: #67707f;
    --accent: #3a76ad;
    --accent-soft: rgba(58, 118, 173, 0.12);
    --shadow: 0 6px 24px rgba(20, 30, 50, 0.12);
  }
}