:root {
  --bg: #f8f8fc;
  --surface: #ffffff;
  --surface-hover: #f0f0f8;
  --border: #e2e2f0;
  --text: #1a1a2e;
  --text-muted: #6b6b8a;
  --text-dim: #9a9ab8;
  --primary: #6366f1;
  --primary-hover: #5558e6;
  --primary-glow: rgba(99, 102, 241, 0.25);
  --primary-soft: rgba(99, 102, 241, 0.08);
  --accent: #f43f5e;
  --accent-glow: rgba(244, 63, 94, 0.2);
  --accent-soft: rgba(244, 63, 94, 0.06);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --code-bg: #f0f0f8;
  --radius: 8px;
  --radius-lg: 12px;
  --font: 'JetBrains Mono', monospace;
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.12), transparent 70%),
                    radial-gradient(ellipse 60% 50% at 25% 50%, rgba(139,92,246,0.08), transparent 60%),
                    radial-gradient(ellipse 50% 50% at 75% 30%, rgba(244,63,94,0.06), transparent 60%);
  --pattern-dots: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1px);
}

[data-theme="dark"] {
  --bg: #0f0f12;
  --surface: #1a1a24;
  --surface-hover: #242438;
  --border: #2a2a3a;
  --text: #e4e4ec;
  --text-muted: #8888a0;
  --text-dim: #5c5c76;
  --primary: #6366f1;
  --primary-hover: #5558e6;
  --primary-glow: rgba(99, 102, 241, 0.35);
  --primary-soft: rgba(99, 102, 241, 0.1);
  --accent: #f43f5e;
  --accent-glow: rgba(244, 63, 94, 0.25);
  --accent-soft: rgba(244, 63, 94, 0.08);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --code-bg: #1a1a24;
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.15), transparent 70%),
                    radial-gradient(ellipse 60% 50% at 25% 50%, rgba(139,92,246,0.1), transparent 60%),
                    radial-gradient(ellipse 50% 50% at 75% 30%, rgba(244,63,94,0.08), transparent 60%);
  --pattern-dots: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1px);
}