:root {
  /* Colors - dark */
  --c-bg: #0d1117;
  --c-surface: #161b22;
  --c-surface-hover: #1c2128;
  --c-border: #30363d;
  --c-text: #e6edf3;
  --c-text-muted: #8b949e;
  --c-accent: #58a6ff;
  --c-accent-subtle: #1f6feb33;
  --c-success: #3fb950;
  --c-warning: #d29922;
  --c-danger: #f85149;

  /* Spacing */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Typography */
  --f-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.95rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.2rem;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Light mode — OS preference (no explicit theme set) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --c-bg: #ffffff;
    --c-surface: #f6f8fa;
    --c-surface-hover: #eaeef2;
    --c-border: #d0d7de;
    --c-text: #1f2328;
    --c-text-muted: #656d76;
    --c-accent: #0969da;
    --c-accent-subtle: #ddf4ff;
    --c-success: #1a7f37;
    --c-warning: #9a6700;
    --c-danger: #cf222e;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* Explicit light theme */
[data-theme="light"] {
  --c-bg: #ffffff;
  --c-surface: #f6f8fa;
  --c-surface-hover: #eaeef2;
  --c-border: #d0d7de;
  --c-text: #1f2328;
  --c-text-muted: #656d76;
  --c-accent: #0969da;
  --c-accent-subtle: #ddf4ff;
  --c-success: #1a7f37;
  --c-warning: #9a6700;
  --c-danger: #cf222e;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
}