:root {
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f7f8;
  --color-bg-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-border: #e5e5e5;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-subtle: #dbeafe;
  --color-primary-inverse: #ffffff;
  --color-danger: #dc2626;
  --color-danger-subtle: #fee2e2;
  --color-success: #16a34a;
  --color-success-subtle: #dcfce7;
  --color-warning: #d97706;
  --color-warning-subtle: #fef3c7;

  --font-sans: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-lg: 1.1rem;
  --text-xl: 1.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --content-width: 680px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
}

[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-bg-subtle: #242424;
  --color-bg-surface: #2a2a2a;
  --color-text: #e5e5e5;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #666666;
  --color-border: #333333;
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-subtle: #1e3a5f;
  --color-primary-inverse: #ffffff;
  --color-danger-subtle: #3b1111;
  --color-success-subtle: #0a2e14;
  --color-warning-subtle: #2e1f06;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
}