:root {
  /* Colors */
  --bg: #0d1117;
  --bg-rgb: 13, 17, 23;
  --surface: #161b22;
  --surface2: #21262d;
  --border: #30363d;
  --border-strong: #484f58;
  --text: #e6edf3;
  --muted: #7d8590;
  --accent: #58a6ff;
  --green: #3fb950;
  --orange: #d29922;
  --red: #f85149;

  /* Chart colors */
  --tc-input: #60a5fa;
  --tc-cache-read: #4ade80;
  --tc-cache-write: #fb923c;
  --tc-output: #a78bfa;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Typography */
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   20px;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-rgb: 255, 255, 255;
    --surface: #f6f8fa;
    --surface2: #eaeef2;
    --border: #d0d7de;
    --border-strong: #afb8c1;
    --text: #1f2328;
    --muted: #656d76;
    --accent: #0969da;
    --green: #1a7f37;
    --orange: #9a6700;
    --red: #cf222e;
    --tc-input: #3b82f6;
    --tc-cache-read: #16a34a;
    --tc-cache-write: #ea580c;
    --tc-output: #7c3aed;
  }
}