/* ===== Theme Variables ===== */
:root {
  --bg: #050a14;
  --bg2: #080f1e;
  --bg3: #0d1525;
  --surface: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(0,212,255,0.3);
  --accent: #00d4ff;
  --accent2: #7c3aed;
  --accent3: #06ffa5;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --text-sub: #94a3b8;
  --gradient: linear-gradient(135deg, #00d4ff, #7c3aed);
  --gradient-green: linear-gradient(135deg, #06ffa5, #00d4ff);
  --glow: 0 0 40px rgba(0,212,255,0.15);
  --glow-strong: 0 0 60px rgba(0,212,255,0.3);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --shadow: 0 20px 60px rgba(0,0,0,0.4);
  --nav-bg: rgba(5,10,20,0.7);
  --code-bg: #0d1117;
  --scrollbar-thumb: rgba(0,212,255,0.3);
}

[data-theme="light"] {
  --bg: #f0f4ff;
  --bg2: #e8eeff;
  --bg3: #ffffff;
  --surface: rgba(0,0,0,0.04);
  --surface-hover: rgba(0,0,0,0.07);
  --border: rgba(0,0,0,0.1);
  --border-hover: rgba(0,150,200,0.4);
  --accent: #0088cc;
  --accent2: #6d28d9;
  --accent3: #059669;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-sub: #475569;
  --gradient: linear-gradient(135deg, #0088cc, #6d28d9);
  --gradient-green: linear-gradient(135deg, #059669, #0088cc);
  --glow: 0 0 40px rgba(0,136,204,0.1);
  --glow-strong: 0 0 60px rgba(0,136,204,0.2);
  --nav-bg: rgba(240,244,255,0.8);
  --code-bg: #1e293b;
  --scrollbar-thumb: rgba(0,136,204,0.3);
}