:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #f8f9fa;
  --color-border: #dee2e6;
  --color-text: #212529;
  --color-muted: #6c757d;
  --color-primary: #0d6efd;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #0dcaf0;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  /* Radius */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;

  /* Shadows */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 5px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.12);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --text-xs: clamp(12px, 0.9vw, 13px);
  --text-sm: clamp(14px, 1.2vw, 15px);
  --text-md: clamp(15px, 1.5vw, 16px);
  --text-lg: clamp(18px, 2.2vw, 20px);
  --text-xl: clamp(22px, 3.2vw, 26px);

  /* Layout */
  --container-max: 1400px;
  --container-pad: var(--space-5);
}

/* Dark theme */
[data-theme="dark"] {
  --color-bg: #0f1115;
  --color-surface: #161a22;
  --color-border: #232838;
  --color-text: #e7eaf0;
  --color-muted: #a0a7b4;
  --color-primary: #4da3ff;
  --color-success: #47c08a;
  --color-warning: #ffd454;
  --color-danger: #ff6b81;
  --color-info: #4dd2ff;
}

/* Prefer system dark scheme by default (can be overridden via data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f1115;
    --color-surface: #161a22;
    --color-border: #232838;
    --color-text: #e7eaf0;
    --color-muted: #a0a7b4;
    --color-primary: #4da3ff;
    --color-success: #47c08a;
    --color-warning: #ffd454;
    --color-danger: #ff6b81;
    --color-info: #4dd2ff;
  }
}

/* Apply base tokens to body so we get immediate benefits without refactoring */
body {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.container {
  max-width: var(--container-max);
  padding: var(--container-pad);
  background: var(--color-bg);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

hr { border-top-color: var(--color-border); }
code, pre { background: #e9ecef; font-family: var(--font-mono); }