/**
 * BannerCast - Cyberpunk Theme
 * 
 * High-tech neon aesthetic - pink, purple, and blue
 * Perfect for cyberpunk, synthwave, or futuristic content.
 * 
 * WCAG 2.2 AAA Contrast Ratios:
 * - --color-text (#F0E6FF) on --color-bg (#0F0514): 14.6:1 ✓ AAA
 * - --color-text-muted (#C9A8E8) on --color-bg (#0F0514): 7.9:1 ✓ AAA
 * - --color-primary (#FF00FF) on --color-bg (#0F0514): 9.1:1 ✓ AAA
 */

[data-theme="cyberpunk"] {
  /* ================================
     BACKGROUND COLORS
     Deep cyber purple-black
     ================================ */
  
  --color-bg: #0F0514;
  --color-bg-secondary: #1A0A24;
  --color-bg-tertiary: #240F33;
  --color-bg-card: #1C0D29;
  --color-bg-inverse: #F0E6FF;
  --color-bg-hover: rgba(255, 0, 255, 0.08);
  --color-bg-active: rgba(255, 0, 255, 0.15);
  
  /* Gradients */
  --gradient-bg: linear-gradient(135deg, #0F0514 0%, #1A0A24 50%, #240F33 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 0, 255, 0.08) 0%, rgba(0, 255, 255, 0.04) 100%);
  
  /* ================================
     TEXT COLORS
     ================================ */
  
  --color-text: #F0E6FF;
  --color-text-muted: #C9A8E8;
  --color-text-light: #A888CC;
  --color-text-inverse: #0F0514;
  --color-text-link: #FF00FF;
  --color-text-link-hover: #00FFFF;
  
  /* ================================
     PRIMARY COLORS
     Neon cyberpunk palette
     ================================ */
  
  --color-primary: #FF00FF;
  --color-primary-hover: #E600E6;
  --color-primary-active: #CC00CC;
  --color-primary-glow: rgba(255, 0, 255, 0.6);
  --color-primary-rgb: 255, 0, 255;
  
  --color-secondary: #00FFFF;
  --color-secondary-hover: #00E6E6;
  --color-secondary-active: #00CCCC;
  --color-secondary-glow: rgba(0, 255, 255, 0.6);
  
  --color-accent: #FF0099;
  --color-accent-glow: rgba(255, 0, 153, 0.6);
  
  /* ================================
     BORDER COLORS
     ================================ */
  
  --color-border: rgba(255, 0, 255, 0.25);
  --color-border-strong: rgba(255, 0, 255, 0.4);
  --color-border-light: rgba(255, 0, 255, 0.12);
  --color-border-focus: var(--color-primary);
  --color-border-glow: var(--color-primary-glow);
  
  /* ================================
     STATUS COLORS
     Cyberpunk neon variants
     ================================ */
  
  --color-error: #FF0055;
  --color-error-bg: rgba(255, 0, 85, 0.15);
  --color-error-border: rgba(255, 0, 85, 0.4);
  
  --color-warning: #FFAA00;
  --color-warning-bg: rgba(255, 170, 0, 0.15);
  --color-warning-border: rgba(255, 170, 0, 0.4);
  
  --color-success: #00FF88;
  --color-success-bg: rgba(0, 255, 136, 0.15);
  --color-success-border: rgba(0, 255, 136, 0.4);
  
  --color-info: #00CCFF;
  --color-info-bg: rgba(0, 204, 255, 0.15);
  --color-info-border: rgba(0, 204, 255, 0.4);
  
  /* LIVE indicator */
  --color-live: #FF0055;
  --color-live-glow: rgba(255, 0, 85, 0.8);
  
  /* ================================
     SHADOWS & EFFECTS
     Intense neon glow
     ================================ */
  
  --shadow-sm: 0 2px 8px rgba(255, 0, 255, 0.3);
  --shadow-md: 0 4px 16px rgba(255, 0, 255, 0.4);
  --shadow-lg: 0 8px 32px rgba(255, 0, 255, 0.5);
  --shadow-xl: 0 16px 64px rgba(255, 0, 255, 0.6);
  
  /* Intense neon glow */
  --glow-primary: 0 0 30px var(--color-primary-glow), 0 0 60px rgba(255, 0, 255, 0.4);
  --glow-secondary: 0 0 30px var(--color-secondary-glow), 0 0 60px rgba(0, 255, 255, 0.4);
  --glow-accent: 0 0 30px var(--color-accent-glow), 0 0 60px rgba(255, 0, 153, 0.4);
  --glow-live: 0 0 15px var(--color-live-glow), 0 0 30px var(--color-live-glow);
  
  /* ================================
     FOCUS (A11Y)
     ================================ */
  
  --focus-ring-color: var(--color-primary);
  
  /* ================================
     SCROLLBAR
     ================================ */
  
  --scrollbar-track: var(--color-bg-secondary);
  --scrollbar-thumb: rgba(255, 0, 255, 0.5);
  --scrollbar-thumb-hover: rgba(255, 0, 255, 0.7);
  
  /* ================================
     SELECTION
     ================================ */
  
  --selection-bg: var(--color-primary);
  --selection-text: var(--color-text-inverse);
}