/* ============================================
   THEMES.CSS - Music Hub Design System
   Brand Identity & Color Variables
   ============================================ */

:root {
  /* === BRAND COLORS (From Logo) === */
  --color-cyan: #00C2CB;
  --color-green: #A4D65E;
  --color-yellow: #FFD200;
  --color-orange: #FF8C00;
  --color-red: #FF4040;

  /* === BASE PALETTE === */
  --color-dark: #0a0a0a;
  --color-darker: #050505;
  --color-light: #f8f9fa;
  --color-white: #ffffff;
  --color-gray: #6c757d;
  --color-gray-light: #adb5bd;
  --color-gray-dark: #343a40;

  /* === GRADIENTS === */
  --gradient-stage: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-red) 100%);
  --gradient-brass: linear-gradient(135deg, var(--color-cyan) 0%, #0099a8 100%);
  --gradient-guitar: linear-gradient(135deg, var(--color-green) 0%, #7fb848 100%);
  --gradient-drums: linear-gradient(135deg, var(--color-yellow) 0%, #ffb700 100%);
  --gradient-vocals: linear-gradient(135deg, var(--color-orange) 0%, #e67700 100%);
  --gradient-band: linear-gradient(135deg, var(--color-red) 0%, #cc3333 100%);
  --gradient-dark: linear-gradient(180deg, var(--color-dark) 0%, var(--color-darker) 100%);

  /* === ANIMATED GRADIENT === */
  --gradient-animated: linear-gradient(
    270deg,
    var(--color-cyan),
    var(--color-green),
    var(--color-yellow),
    var(--color-orange),
    var(--color-red)
  );

  /* === SHADOWS === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-cyan: 0 0 20px rgba(0, 194, 203, 0.4);
  --shadow-glow-red: 0 0 20px rgba(255, 64, 64, 0.4);

  /* === TYPOGRAPHY === */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Inter', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-hero: clamp(2.5rem, 8vw, 6rem);

  /* === SPACING === */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === BORDERS === */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 1.5rem;
  --border-radius-full: 9999px;

  /* === Z-INDEX === */
  --z-preloader: 9999;
  --z-navbar: 1000;
  --z-control-panel: 1050;
  --z-modal: 1100;
}

/* === LIGHT MODE (Default) === */
body {
  background: var(--color-dark);
  color: var(--color-light);
  font-family: var(--font-primary);
}

/* === LIGHT MODE (User) === */
body.light-mode {
  --color-dark: #ffffff;
  --color-darker: #f4f6f8;
  --color-light: #0a0a0a;
  --color-white: #ffffff;
  --color-gray-light: #6c757d;
  --gradient-stage: linear-gradient(135deg, #06aab0 0%, #ff6b6b 100%);
  --shadow-glow-cyan: 0 0 10px rgba(0, 194, 203, 0.25);
}

/* === HIGH CONTRAST MODE === */
body.high-contrast {
  --color-dark: #000000;
  --color-light: #ffffff;
  --color-cyan: #00ffff;
  --color-green: #00ff00;
  --color-yellow: #ffff00;
  --color-orange: #ff9900;
  --color-red: #ff0000;
  /* prefer solid highly-contrasting accents in high contrast */
  --gradient-stage: var(--color-cyan);
  --color-darker: #000000;
}

body.high-contrast * {
  border-color: var(--color-light) !important;
  text-shadow: 0 0 2px #000 !important;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.motion-disabled *,
body.motion-disabled *::before,
body.motion-disabled *::after {
  animation: none !important;
  transition: none !important;
}

/* === GLASSMORPHISM UTILITY === */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* === TEXT GRADIENT UTILITY === */
.text-gradient {
  background: var(--gradient-stage);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
}

.text-gradient-animated {
  background: var(--gradient-animated);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* === PROGRAM COLOR CLASSES === */
.program-brass { border-color: var(--color-cyan) !important; }
.program-guitar { border-color: var(--color-green) !important; }
.program-drums { border-color: var(--color-yellow) !important; }
.program-vocals { border-color: var(--color-orange) !important; }
.program-band { border-color: var(--color-red) !important; }

.bg-brass { background: var(--gradient-brass) !important; }
.bg-guitar { background: var(--gradient-guitar) !important; }
.bg-drums { background: var(--gradient-drums) !important; }
.bg-vocals { background: var(--gradient-vocals) !important; }
.bg-band { background: var(--gradient-band) !important; }

/* === GLOW UTILITIES === */
.glow-cyan {
  box-shadow: var(--shadow-glow-cyan);
}

.glow-red {
  box-shadow: var(--shadow-glow-red);
}

/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--gradient-stage);
  border-radius: var(--border-radius-full);
}

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