/**
 * Apple-Inspired Color System
 * Comprehensive color palette with semantic naming
 * Supports light/dark modes and provides accessible color combinations
 */

:root {
  /* ============================================
     PRIMARY BRAND COLORS
     ============================================ */
  --color-primary: #004799;
  --color-primary-light: #0066cc;
  --color-primary-lighter: #3399ff;
  --color-primary-dark: #003366;
  --color-primary-darker: #001f3f;

  --color-secondary: #ffbf00;
  --color-secondary-light: #ffd633;
  --color-secondary-lighter: #ffe066;
  --color-secondary-dark: #cc9900;
  --color-secondary-darker: #997300;

  /* ============================================
     ACCENT COLORS
     ============================================ */
  --color-accent-blue: #007aff;
  --color-accent-indigo: #5856d6;
  --color-accent-purple: #af52de;
  --color-accent-pink: #ff2d55;
  --color-accent-red: #ff3b30;
  --color-accent-orange: #ff9500;
  --color-accent-yellow: #ffcc00;
  --color-accent-green: #34c759;
  --color-accent-teal: #5ac8fa;
  --color-accent-cyan: #32ade6;

  /* ============================================
     NEUTRAL COLORS - Light Theme
     ============================================ */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Grays - Apple System Gray Scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ============================================
     SEMANTIC COLORS - Backgrounds
     ============================================ */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  /* Dark backgrounds for hero sections */
  --color-bg-dark: #000000;
  --color-bg-dark-blue: #001c2c;
  --color-bg-dark-navy: #00111b;

  /* Gradient backgrounds */
  --gradient-primary: linear-gradient(135deg, #004799 0%, #0066cc 100%);
  --gradient-secondary: linear-gradient(135deg, #ffbf00 0%, #ffd633 100%);
  --gradient-hero: linear-gradient(135deg, rgba(0, 71, 153, 0.95) 0%, rgba(0, 28, 44, 0.98) 100%);
  --gradient-dark: linear-gradient(10deg, rgba(0, 0, 0, 1) 0%, rgba(8, 0, 139, 1) 50%, rgba(0, 0, 3, 1) 100%);

  /* ============================================
     SEMANTIC COLORS - Text
     ============================================ */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-quaternary: #9ca3af;

  /* Text on colored backgrounds */
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #000000;
  --color-text-on-dark: #ffffff;
  --color-text-on-light: #000000;

  /* Special text colors */
  --color-text-link: #007aff;
  --color-text-link-hover: #0051d5;
  --color-text-muted: #b8b8b8;
  --color-text-disabled: #d1d5db;

  /* ============================================
     SEMANTIC COLORS - Borders
     ============================================ */
  --color-border-primary: #e5e7eb;
  --color-border-secondary: #d1d5db;
  --color-border-tertiary: #9ca3af;
  --color-border-focus: #007aff;

  /* Glass/translucent borders */
  --color-border-glass-light: rgba(255, 255, 255, 0.2);
  --color-border-glass-medium: rgba(255, 255, 255, 0.3);
  --color-border-glass-strong: rgba(255, 255, 255, 0.5);

  /* ============================================
     SEMANTIC COLORS - Interactive States
     ============================================ */
  --color-hover-overlay: rgba(0, 0, 0, 0.05);
  --color-active-overlay: rgba(0, 0, 0, 0.1);
  --color-selected: rgba(0, 122, 255, 0.1);
  --color-focus-ring: rgba(0, 122, 255, 0.4);

  /* ============================================
     STATUS COLORS - Feedback
     ============================================ */
  --color-success: #34c759;
  --color-success-light: #4ade80;
  --color-success-dark: #22c55e;
  --color-success-bg: rgba(52, 199, 89, 0.1);

  --color-warning: #ff9500;
  --color-warning-light: #ffa500;
  --color-warning-dark: #ff8800;
  --color-warning-bg: rgba(255, 149, 0, 0.1);

  --color-error: #ff3b30;
  --color-error-light: #ff6b6b;
  --color-error-dark: #dc2626;
  --color-error-bg: rgba(255, 59, 48, 0.1);

  --color-info: #007aff;
  --color-info-light: #3b99fc;
  --color-info-dark: #0051d5;
  --color-info-bg: rgba(0, 122, 255, 0.1);

  /* Special status colors */
  --color-live: #14f000;
  --color-offline: #6b7280;
  --color-connecting: #ffa502;

  /* ============================================
     GLASSMORPHISM COLORS
     ============================================ */
  /* Glass backgrounds - Light */
  --glass-white-1: rgba(255, 255, 255, 0.05);
  --glass-white-2: rgba(255, 255, 255, 0.08);
  --glass-white-3: rgba(255, 255, 255, 0.1);
  --glass-white-4: rgba(255, 255, 255, 0.15);
  --glass-white-5: rgba(255, 255, 255, 0.2);
  --glass-white-6: rgba(255, 255, 255, 0.3);

  /* Glass backgrounds - Dark */
  --glass-black-1: rgba(0, 0, 0, 0.05);
  --glass-black-2: rgba(0, 0, 0, 0.1);
  --glass-black-3: rgba(0, 0, 0, 0.2);
  --glass-black-4: rgba(0, 0, 0, 0.3);
  --glass-black-5: rgba(0, 0, 0, 0.4);
  --glass-black-6: rgba(0, 0, 0, 0.5);

  /* ============================================
     SHADOW COLORS
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* Colored shadows */
  --shadow-primary: 0 8px 25px rgba(0, 71, 153, 0.3);
  --shadow-secondary: 0 6px 16px rgba(255, 191, 0, 0.3);
  --shadow-success: 0 4px 12px rgba(52, 199, 89, 0.3);
  --shadow-error: 0 4px 12px rgba(255, 59, 48, 0.3);

  /* Glass shadows */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glass-lg: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* ============================================
     OVERLAY COLORS
     ============================================ */
  --overlay-dark-1: rgba(0, 0, 0, 0.1);
  --overlay-dark-2: rgba(0, 0, 0, 0.2);
  --overlay-dark-3: rgba(0, 0, 0, 0.3);
  --overlay-dark-4: rgba(0, 0, 0, 0.4);
  --overlay-dark-5: rgba(0, 0, 0, 0.5);
  --overlay-dark-6: rgba(0, 0, 0, 0.6);
  --overlay-dark-7: rgba(0, 0, 0, 0.7);
  --overlay-dark-8: rgba(0, 0, 0, 0.8);

  --overlay-white-1: rgba(255, 255, 255, 0.1);
  --overlay-white-2: rgba(255, 255, 255, 0.2);
  --overlay-white-3: rgba(255, 255, 255, 0.3);
  --overlay-white-4: rgba(255, 255, 255, 0.4);
  --overlay-white-5: rgba(255, 255, 255, 0.5);

  /* ============================================
     COMPONENT-SPECIFIC COLORS
     ============================================ */
  /* Navigation */
  --nav-bg: #ffffff;
  --nav-text: var(--color-primary);
  --nav-text-active: var(--color-secondary);
  --nav-border: var(--color-border-primary);
  --nav-hover: var(--glass-black-1);

  /* Footer */
  --footer-bg: var(--color-bg-dark-navy);
  --footer-text: #b8b8b8;
  --footer-heading: #ffffff;
  --footer-link-hover: #007bff;

  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: #ffffff;
  --btn-primary-hover: var(--color-primary-light);

  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-text: #000000;
  --btn-secondary-hover: var(--color-secondary-light);

  /* Cards */
  --card-bg: #ffffff;
  --card-border: var(--color-border-primary);
  --card-shadow: var(--shadow-md);
  --card-hover-shadow: var(--shadow-lg);

  /* Radio Player */
  --radio-bg: var(--glass-white-3);
  --radio-border: var(--glass-white-4);
  --radio-accent: #667eea;
  --radio-accent-alt: #764ba2;

  /* Badge/Label Colors */
  --badge-new: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --badge-live: var(--color-live);
  --badge-duration: var(--glass-black-5);
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds */
    --color-bg-primary: #000000;
    --color-bg-secondary: #111827;
    --color-bg-tertiary: #1f2937;
    --color-bg-elevated: #1f2937;

    /* Text */
    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-tertiary: #9ca3af;
    --color-text-quaternary: #6b7280;

    /* Borders */
    --color-border-primary: #374151;
    --color-border-secondary: #4b5563;
    --color-border-tertiary: #6b7280;

    /* Interactive */
    --color-hover-overlay: rgba(255, 255, 255, 0.05);
    --color-active-overlay: rgba(255, 255, 255, 0.1);

    /* Components */
    --nav-bg: #000000;
    --card-bg: #111827;
  }
}

/* ============================================
   UTILITY CLASSES - Background Colors
   ============================================ */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-gray-50 {
  background-color: var(--color-gray-50);
}

.bg-gray-100 {
  background-color: var(--color-gray-100);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-error {
  background-color: var(--color-error);
}

.bg-glass {
  background: var(--glass-white-3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Glass variations */
.bg-glass-light {
  background: var(--glass-white-2);
}

.bg-glass-medium {
  background: var(--glass-white-4);
}

.bg-glass-strong {
  background: var(--glass-white-6);
}

/* ============================================
   UTILITY CLASSES - Text Colors
   ============================================ */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-white {
  color: var(--color-white);
}

.text-link {
  color: var(--color-text-link);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.text-info {
  color: var(--color-info);
}

/* ============================================
   UTILITY CLASSES - Border Colors
   ============================================ */
.border-primary {
  border-color: var(--color-border-primary);
}

.border-secondary {
  border-color: var(--color-border-secondary);
}

.border-glass {
  border-color: var(--color-border-glass-light);
}

/* ============================================
   UTILITY CLASSES - Shadows
   ============================================ */
.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-primary {
  box-shadow: var(--shadow-primary);
}

.shadow-glass {
  box-shadow: var(--shadow-glass);
}

/* ============================================
   UTILITY CLASSES - Gradients
   ============================================ */
.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-secondary {
  background: var(--gradient-secondary);
}

.gradient-hero {
  background: var(--gradient-hero);
}

/* ============================================
   UTILITY CLASSES - Status Indicators
   ============================================ */
.status-live {
  color: var(--color-live);
}

.status-offline {
  color: var(--color-offline);
}

.status-connecting {
  color: var(--color-connecting);
}

/* Status badges */
.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-dark);
}

.badge-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-dark);
}

.badge-error {
  background-color: var(--color-error-bg);
  color: var(--color-error-dark);
}

.badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-dark);
}

/* ============================================
   ACCESSIBILITY - High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #1f2937;
    --color-border-primary: #000000;
    --color-border-secondary: #374151;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-text-primary: #ffffff;
      --color-text-secondary: #f3f4f6;
      --color-border-primary: #ffffff;
      --color-border-secondary: #d1d5db;
    }
  }
}

/* ============================================
   HELPER CLASSES - Opacity
   ============================================ */
.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-100 {
  opacity: 1;
}

/* ============================================
   HELPER CLASSES - Backdrop Blur
   ============================================ */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.backdrop-blur-md {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.backdrop-blur-xl {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  :root {
    --color-bg-primary: #ffffff;
    --color-text-primary: #000000;
    --color-border-primary: #000000;
  }

  .bg-glass,
  .bg-glass-light,
  .bg-glass-medium,
  .bg-glass-strong {
    background: #ffffff;
    backdrop-filter: none;
  }
}