/* Theme 1: Neon Night (default) */
:root,
[data-theme="neon"] {
  --color-primary: #7C3AED;
  --color-secondary: #EC4899;
  --color-accent: #10B981;
  --color-accent-2: #3B82F6;
  --color-bg: #0F0F1A;
  --color-surface: #1A1A2E;
  --color-text: #F8F8FF;
  --color-text-muted: #A0A0B8;
  --color-border: rgba(124, 58, 237, 0.3);

  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  --glow-primary: 0 0 20px rgba(124, 58, 237, 0.4);
  --glow-secondary: 0 0 20px rgba(236, 72, 153, 0.4);
  --glow-accent: 0 0 20px rgba(16, 185, 129, 0.4);

  --nav-bg: rgba(15, 15, 26, 0.8);
  --card-bg: var(--color-surface);
  --card-hover-border: var(--color-primary);

  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Permanent Marker', cursive;
  --font-retro: 'VT323', monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --max-width: 1200px;
  --nav-height: 64px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* Theme 2: Bright & Bold */
[data-theme="bright"] {
  --color-primary: #6D28D9;
  --color-secondary: #F43F5E;
  --color-accent: #14B8A6;
  --color-accent-2: #0EA5E9;
  --color-bg: #FFFBF5;
  --color-surface: #F3F4F6;
  --color-text: #1E1E2E;
  --color-text-muted: #6B7280;
  --color-border: rgba(109, 40, 217, 0.2);

  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  --glow-primary: 0 0 20px rgba(109, 40, 217, 0.2);
  --glow-secondary: 0 0 20px rgba(244, 63, 94, 0.2);
  --glow-accent: 0 0 20px rgba(20, 184, 166, 0.2);

  --nav-bg: rgba(255, 251, 245, 0.85);
  --card-bg: #FFFFFF;
  --card-hover-border: var(--color-primary);
}

/* Theme 3: Retro Flip */
[data-theme="retro"] {
  --color-primary: #BFFF00;
  --color-secondary: #FF00FF;
  --color-accent: #00FFFF;
  --color-accent-2: #FF6600;
  --color-bg: #0A0A1A;
  --color-surface: #141430;
  --color-text: #E8FFE8;
  --color-text-muted: #8888AA;
  --color-border: rgba(191, 255, 0, 0.3);

  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  --glow-primary: 0 0 20px rgba(191, 255, 0, 0.4);
  --glow-secondary: 0 0 20px rgba(255, 0, 255, 0.4);
  --glow-accent: 0 0 20px rgba(0, 255, 255, 0.4);

  --nav-bg: rgba(10, 10, 26, 0.85);
  --card-bg: var(--color-surface);
  --card-hover-border: var(--color-primary);

  --font-heading: 'VT323', monospace;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
}