/*
 * FoundContext v4 Theme System
 * Dark, Light, and Device themes optimized for theater use
 */

/* Light Theme (Default) */
:root,
.theme-light {
  --primary-color: #1a365d;
  --primary-color-dark: #153047;
  --primary-color-light: #2d5a87;
  --primary-color-alpha: rgba(26, 54, 93, 0.1);
  
  --secondary-color: #744c9e;
  --accent-color: #f56565;
  --accent-background: rgba(245, 101, 101, 0.1);
  
  --text-color: #2d3748;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-inverse: #ffffff;
  
  --background-color: #ffffff;
  --background-secondary: #f7fafc;
  --background-tertiary: #edf2f7;
  --background-overlay: rgba(255, 255, 255, 0.95);
  
  --surface-color: #ffffff;
  --surface-secondary: #f7fafc;
  --surface-elevated: #ffffff;
  
  --border-color: #e2e8f0;
  --border-secondary: #cbd5e0;
  
  --card-background: var(--surface-color);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Dark Theme */
.theme-dark {
  --primary-color: #63b3ed;
  --primary-color-dark: #4299e1;
  --primary-color-light: #90cdf4;
  --primary-color-alpha: rgba(99, 179, 237, 0.2);
  
  --secondary-color: #b794f6;
  --accent-color: #fc8181;
  --accent-background: rgba(252, 129, 129, 0.2);
  
  --text-color: #f7fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #a0aec0;
  --text-inverse: #1a202c;
  
  --background-color: #1a202c;
  --background-secondary: #2d3748;
  --background-tertiary: #4a5568;
  --background-overlay: rgba(26, 32, 44, 0.95);
  
  --surface-color: #2d3748;
  --surface-secondary: #4a5568;
  --surface-elevated: #374151;
  
  --border-color: #4a5568;
  --border-secondary: #2d3748;
  
  --card-background: var(--surface-color);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Device Theme - Uses system preference */
.theme-device {
  /* Variables will be set by media query below */
}

/* System Theme Detection */
@media (prefers-color-scheme: dark) {
  .theme-device {
    --primary-color: #63b3ed;
    --primary-color-dark: #4299e1;
    --primary-color-light: #90cdf4;
    --primary-color-alpha: rgba(99, 179, 237, 0.2);
    
    --secondary-color: #b794f6;
    --accent-color: #fc8181;
    --accent-background: rgba(252, 129, 129, 0.2);
    
    --text-color: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #a0aec0;
    --text-inverse: #1a202c;
    
    --background-color: #1a202c;
    --background-secondary: #2d3748;
    --background-tertiary: #4a5568;
    --background-overlay: rgba(26, 32, 44, 0.95);
    
    --surface-color: #2d3748;
    --surface-secondary: #4a5568;
    --surface-elevated: #374151;
    
    --border-color: #4a5568;
    --border-secondary: #2d3748;
    
    --card-background: var(--surface-color);
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-color-scheme: light) {
  .theme-device {
    --primary-color: #1a365d;
    --primary-color-dark: #153047;
    --primary-color-light: #2d5a87;
    --primary-color-alpha: rgba(26, 54, 93, 0.1);
    
    --secondary-color: #744c9e;
    --accent-color: #f56565;
    --accent-background: rgba(245, 101, 101, 0.1);
    
    --text-color: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-inverse: #ffffff;
    
    --background-color: #ffffff;
    --background-secondary: #f7fafc;
    --background-tertiary: #edf2f7;
    --background-overlay: rgba(255, 255, 255, 0.95);
    
    --surface-color: #ffffff;
    --surface-secondary: #f7fafc;
    --surface-elevated: #ffffff;
    
    --border-color: #e2e8f0;
    --border-secondary: #cbd5e0;
    
    --card-background: var(--surface-color);
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

/* Theater Mode (Ultra Dark) */
.theme-theater {
  --primary-color: #4fd1c7;
  --primary-color-dark: #38b2ac;
  --primary-color-light: #81e6d9;
  --primary-color-alpha: rgba(79, 209, 199, 0.2);
  
  --secondary-color: #90cdf4;
  --accent-color: #fed7d7;
  --accent-background: rgba(254, 215, 215, 0.1);
  
  --text-color: #e6fffa;
  --text-secondary: #b2f5ea;
  --text-muted: #81e6d9;
  --text-inverse: #0a0a0a;
  
  --background-color: #0a0a0a;
  --background-secondary: #1a1a1a;
  --background-tertiary: #2a2a2a;
  --background-overlay: rgba(10, 10, 10, 0.98);
  
  --surface-color: #1a1a1a;
  --surface-secondary: #2a2a2a;
  --surface-elevated: #2d2d2d;
  
  --border-color: #2a2a2a;
  --border-secondary: #1a1a1a;
  
  --card-background: var(--surface-color);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
  --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.7);
}

/* High Contrast Theme */
.theme-high-contrast {
  --primary-color: #0066cc;
  --primary-color-dark: #004499;
  --primary-color-light: #3399ff;
  --primary-color-alpha: rgba(0, 102, 204, 0.2);
  
  --secondary-color: #6600cc;
  --accent-color: #cc0000;
  --accent-background: rgba(204, 0, 0, 0.1);
  
  --text-color: #000000;
  --text-secondary: #333333;
  --text-muted: #666666;
  --text-inverse: #ffffff;
  
  --background-color: #ffffff;
  --background-secondary: #f0f0f0;
  --background-tertiary: #e0e0e0;
  --background-overlay: rgba(255, 255, 255, 0.98);
  
  --surface-color: #ffffff;
  --surface-secondary: #f0f0f0;
  --surface-elevated: #ffffff;
  
  --border-color: #333333;
  --border-secondary: #666666;
  
  --card-background: var(--surface-color);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Theme Transitions */
.theme-transition,
.theme-transition * {
  transition: 
    background-color var(--animation-duration-normal) var(--animation-easing),
    color var(--animation-duration-normal) var(--animation-easing),
    border-color var(--animation-duration-normal) var(--animation-easing),
    box-shadow var(--animation-duration-normal) var(--animation-easing);
}

/* Theme-specific component adjustments */
.theme-dark .hero-section {
  background: linear-gradient(135deg, var(--primary-color-dark) 0%, var(--secondary-color) 100%);
}

.theme-theater .hero-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

.theme-high-contrast .playing-card,
.theme-high-contrast .card-back,
.theme-high-contrast .nav-button {
  border-width: 2px;
}

/* Print Theme Override */
@media print {
  :root,
  .theme-dark,
  .theme-device,
  .theme-theater,
  .theme-high-contrast {
    --text-color: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --background-color: #ffffff;
    --background-secondary: #ffffff;
    --surface-color: #ffffff;
    --border-color: #333333;
    --card-background: #ffffff;
    --card-shadow: none;
    --card-shadow-hover: none;
  }
  
  .playing-card {
    border: 2px solid #333333 !important;
    box-shadow: none !important;
  }
  
  .theme-transition,
  .theme-transition * {
    transition: none !important;
  }
}

/* Brightness Control Variables */
:root {
  --brightness-level: 1;
  --brightness-overlay: 0;
}

.brightness-dim {
  --brightness-level: 0.8;
  --brightness-overlay: 0.1;
}

.brightness-darker {
  --brightness-level: 0.6;
  --brightness-overlay: 0.2;
}

.brightness-darkest {
  --brightness-level: 0.4;
  --brightness-overlay: 0.3;
}

/* Apply brightness */
.brightness-controlled {
  filter: brightness(var(--brightness-level));
}

/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-transition * {
    transition: none !important;
  }
}

/* Accessibility Enhancements */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  .theme-dark {
    --border-color: #ffffff;
    --text-color: #ffffff;
  }
  
  .playing-card,
  .nav-button,
  .deck-card {
    border-width: 2px;
  }
}

/* Focus Ring Colors */
.theme-light :focus {
  outline-color: var(--primary-color);
}

.theme-dark :focus {
  outline-color: var(--primary-color-light);
}

.theme-theater :focus {
  outline-color: var(--primary-color);
}

.theme-high-contrast :focus {
  outline: 3px solid #ff6600;
  outline-offset: 2px;
}