/* Theme CSS Variables */
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #0b1120;
  --bg-sidebar: #0f172a;
  --bg-card: #1e293b;
  --bg-hover: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.3);
  --border-color: #1e293b;
  --scrollbar-track: #1e293b;
  --scrollbar-thumb: #475569;
  --scrollbar-hover: #64748b;
}

/* Neon Purple Theme */
html.theme-neon-purple {
  --bg-primary: #0d0015;
  --bg-secondary: #13001f;
  --bg-sidebar: #0a0012;
  --bg-card: #1a0029;
  --bg-hover: #2d0047;
  --text-primary: #f3e8ff;
  --text-secondary: #c4b5fd;
  --text-muted: #8b5cf6;
  --accent: #a855f7;
  --accent-hover: #9333ea;
  --accent-glow: rgba(168, 85, 247, 0.4);
  --border-color: #2d0047;
  --scrollbar-track: #1a0029;
  --scrollbar-thumb: #7c3aed;
  --scrollbar-hover: #a855f7;
}

/* Ocean Blue Theme - Deep sea vibes */
html.theme-ocean-blue {
  --bg-primary: #0a1628;
  --bg-secondary: #0c1e32;
  --bg-sidebar: #081420;
  --bg-card: #0f2744;
  --bg-hover: #1a3a5c;
  --text-primary: #e0f2fe;
  --text-secondary: #7dd3fc;
  --text-muted: #38bdf8;
  --accent: #06b6d4;
  --accent-hover: #0891b2;
  --accent-glow: rgba(6, 182, 212, 0.35);
  --border-color: #164e63;
  --scrollbar-track: #0f2744;
  --scrollbar-thumb: #0e7490;
  --scrollbar-hover: #06b6d4;
}

/* Sunset Orange Theme - Warm golden hour */
html.theme-sunset-orange {
  --bg-primary: #1c1410;
  --bg-secondary: #231813;
  --bg-sidebar: #181210;
  --bg-card: #2d2018;
  --bg-hover: #422d1e;
  --text-primary: #fef3e2;
  --text-secondary: #fed7aa;
  --text-muted: #fb923c;
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-glow: rgba(249, 115, 22, 0.35);
  --border-color: #431407;
  --scrollbar-track: #2d2018;
  --scrollbar-thumb: #c2410c;
  --scrollbar-hover: #f97316;
}

/* Forest Green Theme - Nature inspired */
html.theme-forest-green {
  --bg-primary: #0a1410;
  --bg-secondary: #0d1a14;
  --bg-sidebar: #081210;
  --bg-card: #132a1f;
  --bg-hover: #1a4030;
  --text-primary: #ecfdf5;
  --text-secondary: #6ee7b7;
  --text-muted: #34d399;
  --accent: #10b981;
  --accent-hover: #059669;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --border-color: #14532d;
  --scrollbar-track: #132a1f;
  --scrollbar-thumb: #047857;
  --scrollbar-hover: #10b981;
}

/* Apply theme variables */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove outline artifacts */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}