/* AnimVault Theme Engine */
:root {
  --transition-theme: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK THEME (DEFAULT) ===== */
[data-theme="dark"] {
  --bg-primary: #050510;
  --bg-secondary: #0a0a1a;
  --bg-card: rgba(255,255,255,0.03);
  --bg-glass: rgba(10,10,30,0.8);
  --border: rgba(100,100,255,0.15);
  --text-primary: #e8e8ff;
  --text-secondary: #8888cc;
  --text-muted: #4444aa;
  --accent: #6366f1;
  --accent2: #8b5cf6;
  --accent3: #06b6d4;
  --glow: rgba(99,102,241,0.4);
  --glow2: rgba(139,92,246,0.3);
  --particle: #6366f1;
  --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
  --shadow: 0 0 30px rgba(99,102,241,0.2);
  --neon: #6366f1;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg-primary: #f0f0ff;
  --bg-secondary: #e8e8ff;
  --bg-card: rgba(255,255,255,0.7);
  --bg-glass: rgba(240,240,255,0.85);
  --border: rgba(99,102,241,0.2);
  --text-primary: #1a1a4a;
  --text-secondary: #4444aa;
  --text-muted: #8888cc;
  --accent: #4f46e5;
  --accent2: #7c3aed;
  --accent3: #0891b2;
  --glow: rgba(79,70,229,0.3);
  --glow2: rgba(124,58,237,0.2);
  --particle: #4f46e5;
  --gradient: linear-gradient(135deg, #4f46e5, #7c3aed);
  --shadow: 0 0 30px rgba(79,70,229,0.15);
  --neon: #4f46e5;
}

/* ===== RAINBOW THEME ===== */
[data-theme="rainbow"] {
  --bg-primary: #05050a;
  --bg-secondary: #0a050f;
  --bg-card: rgba(255,255,255,0.04);
  --bg-glass: rgba(5,5,10,0.85);
  --border: rgba(255,100,200,0.2);
  --text-primary: #ffffff;
  --text-secondary: #ccccff;
  --text-muted: #8888bb;
  --accent: #ff3cac;
  --accent2: #784ba0;
  --accent3: #2b86c5;
  --glow: rgba(255,60,172,0.4);
  --glow2: rgba(120,75,160,0.3);
  --particle: #ff3cac;
  --gradient: linear-gradient(135deg, #ff3cac, #784ba0, #2b86c5);
  --shadow: 0 0 30px rgba(255,60,172,0.25);
  --neon: #ff3cac;
  animation: hueRotate 8s linear infinite;
}

@keyframes hueRotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ===== NANO THEME ===== */
[data-theme="nano"] {
  --bg-primary: #000811;
  --bg-secondary: #001122;
  --bg-card: rgba(0,200,255,0.03);
  --bg-glass: rgba(0,8,17,0.9);
  --border: rgba(0,200,255,0.2);
  --text-primary: #00e5ff;
  --text-secondary: #00aacc;
  --text-muted: #006688;
  --accent: #00e5ff;
  --accent2: #cc00ff;
  --accent3: #00ff88;
  --glow: rgba(0,229,255,0.4);
  --glow2: rgba(204,0,255,0.3);
  --particle: #00e5ff;
  --gradient: linear-gradient(135deg, #00e5ff, #cc00ff);
  --shadow: 0 0 40px rgba(0,229,255,0.3);
  --neon: #00e5ff;
}

/* ===== CRYSTAL THEME ===== */
[data-theme="crystal"] {
  --bg-primary: #0a0a14;
  --bg-secondary: #12121e;
  --bg-card: rgba(255,255,255,0.06);
  --bg-glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.15);
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted: rgba(255,255,255,0.4);
  --accent: #a78bfa;
  --accent2: #f0abfc;
  --accent3: #7dd3fc;
  --glow: rgba(167,139,250,0.35);
  --glow2: rgba(240,171,252,0.25);
  --particle: rgba(255,255,255,0.6);
  --gradient: linear-gradient(135deg, rgba(167,139,250,0.5), rgba(240,171,252,0.5));
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --neon: #a78bfa;
}

/* Base styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Space Grotesk', 'Sora', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition-theme);
  overflow-x: hidden;
  cursor: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* Glass morphism */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Neon text */
.neon-text {
  color: var(--accent);
  text-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow), 0 0 40px var(--glow);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}