/* 
 * ═══════════════════════════════════════════════════════════════
 * ADVANCED THEME SYSTEM - Next-Generation Light/Dark Theme Engine
 * ═══════════════════════════════════════════════════════════════
 * Features:
 * - Comprehensive CSS variable system
 * - Smooth theme transitions
 * - Multiple theme variants
 * - System preference detection
 * - Accessibility support
 * - Performance optimized
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     LIGHT THEME VARIABLES
  ═══════════════════════════════════════════════════════════════ */
  
  /* Primary Colors */
  --theme-primary: #6366f1;
  --theme-primary-50: #eef2ff;
  --theme-primary-100: #e0e7ff;
  --theme-primary-200: #c7d2fe;
  --theme-primary-300: #a5b4fc;
  --theme-primary-400: #818cf8;
  --theme-primary-500: #6366f1;
  --theme-primary-600: #4f46e5;
  --theme-primary-700: #4338ca;
  --theme-primary-800: #3730a3;
  --theme-primary-900: #312e81;
  
  /* Secondary Colors */
  --theme-secondary: #06b6d4;
  --theme-secondary-50: #ecfeff;
  --theme-secondary-100: #cffafe;
  --theme-secondary-200: #a5f3fc;
  --theme-secondary-300: #67e8f9;
  --theme-secondary-400: #22d3ee;
  --theme-secondary-500: #06b6d4;
  --theme-secondary-600: #0891b2;
  --theme-secondary-700: #0e7490;
  --theme-secondary-800: #155e75;
  --theme-secondary-900: #164e63;
  
  /* Accent Colors */
  --theme-accent: #f59e0b;
  --theme-accent-50: #fffbeb;
  --theme-accent-100: #fef3c7;
  --theme-accent-200: #fde68a;
  --theme-accent-300: #fcd34d;
  --theme-accent-400: #fbbf24;
  --theme-accent-500: #f59e0b;
  --theme-accent-600: #d97706;
  --theme-accent-700: #b45309;
  --theme-accent-800: #92400e;
  --theme-accent-900: #78350f;
  
  /* Semantic Colors */
  --theme-success: #10b981;
  --theme-success-50: #ecfdf5;
  --theme-success-100: #d1fae5;
  --theme-success-200: #a7f3d0;
  --theme-success-300: #6ee7b7;
  --theme-success-400: #34d399;
  --theme-success-500: #10b981;
  --theme-success-600: #059669;
  --theme-success-700: #047857;
  --theme-success-800: #065f46;
  --theme-success-900: #064e3b;
  
  --theme-warning: #f59e0b;
  --theme-warning-50: #fffbeb;
  --theme-warning-100: #fef3c7;
  --theme-warning-200: #fde68a;
  --theme-warning-300: #fcd34d;
  --theme-warning-400: #fbbf24;
  --theme-warning-500: #f59e0b;
  --theme-warning-600: #d97706;
  --theme-warning-700: #b45309;
  --theme-warning-800: #92400e;
  --theme-warning-900: #78350f;
  
  --theme-danger: #ef4444;
  --theme-danger-50: #fef2f2;
  --theme-danger-100: #fee2e2;
  --theme-danger-200: #fecaca;
  --theme-danger-300: #fca5a5;
  --theme-danger-400: #f87171;
  --theme-danger-500: #ef4444;
  --theme-danger-600: #dc2626;
  --theme-danger-700: #b91c1c;
  --theme-danger-800: #991b1b;
  --theme-danger-900: #7f1d1d;
  
  --theme-info: #3b82f6;
  --theme-info-50: #eff6ff;
  --theme-info-100: #dbeafe;
  --theme-info-200: #bfdbfe;
  --theme-info-300: #93c5fd;
  --theme-info-400: #60a5fa;
  --theme-info-500: #3b82f6;
  --theme-info-600: #2563eb;
  --theme-info-700: #1d4ed8;
  --theme-info-800: #1e40af;
  --theme-info-900: #1e3a8a;
  
  /* Background Colors */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-bg-tertiary: #f1f5f9;
  --theme-bg-elevated: #ffffff;
  --theme-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Surface Colors */
  --theme-surface-1: #ffffff;
  --theme-surface-2: #f8fafc;
  --theme-surface-3: #f1f5f9;
  --theme-surface-4: #e2e8f0;
  --theme-surface-5: #cbd5e1;
  
  /* Border Colors */
  --theme-border-1: #e2e8f0;
  --theme-border-2: #cbd5e1;
  --theme-border-3: #94a3b8;
  --theme-border-4: #64748b;
  --theme-border-5: #475569;
  
  /* Text Colors */
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #334155;
  --theme-text-tertiary: #64748b;
  --theme-text-muted: #94a3b8;
  --theme-text-disabled: #cbd5e1;
  --theme-text-inverse: #ffffff;
  
  /* Shadow System */
  --theme-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --theme-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --theme-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --theme-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  
  /* Gradient Overlays */
  --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary-500), var(--theme-secondary-500));
  --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary-500), var(--theme-accent-500));
  --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent-500), var(--theme-danger-500));
  --theme-gradient-success: linear-gradient(135deg, var(--theme-success-500), var(--theme-primary-500));
  
  /* Glass Effect */
  --theme-glass-bg: rgba(255, 255, 255, 0.8);
  --theme-glass-border: rgba(255, 255, 255, 0.3);
  --theme-glass-blur: 12px;
  
  /* Transition Settings */
  --theme-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radius */
  --theme-radius-sm: 0.375rem;
  --theme-radius-md: 0.5rem;
  --theme-radius-lg: 0.75rem;
  --theme-radius-xl: 1rem;
  --theme-radius-2xl: 1.5rem;
  --theme-radius-3xl: 2rem;
  --theme-radius-full: 9999px;
  
  /* Spacing Scale */
  --theme-space-1: 0.25rem;
  --theme-space-2: 0.5rem;
  --theme-space-3: 0.75rem;
  --theme-space-4: 1rem;
  --theme-space-5: 1.25rem;
  --theme-space-6: 1.5rem;
  --theme-space-8: 2rem;
  --theme-space-10: 2.5rem;
  --theme-space-12: 3rem;
  --theme-space-16: 4rem;
  --theme-space-20: 5rem;
  --theme-space-24: 6rem;
  
  /* Typography */
  --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
  
  /* Z-Index Scale */
  --theme-z-dropdown: 1000;
  --theme-z-sticky: 1020;
  --theme-z-fixed: 1030;
  --theme-z-modal-backdrop: 1040;
  --theme-z-modal: 1050;
  --theme-z-popover: 1060;
  --theme-z-tooltip: 1070;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME VARIABLES
═══════════════════════════════════════════════════════════════ */

.dark {
  /* Primary Colors - Adjusted for dark mode */
  --theme-primary: #818cf8;
  --theme-primary-50: #1e1b4b;
  --theme-primary-100: #312e81;
  --theme-primary-200: #3730a3;
  --theme-primary-300: #4338ca;
  --theme-primary-400: #4f46e5;
  --theme-primary-500: #6366f1;
  --theme-primary-600: #818cf8;
  --theme-primary-700: #a5b4fc;
  --theme-primary-800: #c7d2fe;
  --theme-primary-900: #e0e7ff;
  
  /* Secondary Colors - Adjusted for dark mode */
  --theme-secondary: #22d3ee;
  --theme-secondary-50: #164e63;
  --theme-secondary-100: #155e75;
  --theme-secondary-200: #0e7490;
  --theme-secondary-300: #0891b2;
  --theme-secondary-400: #06b6d4;
  --theme-secondary-500: #22d3ee;
  --theme-secondary-600: #67e8f9;
  --theme-secondary-700: #a5f3fc;
  --theme-secondary-800: #cffafe;
  --theme-secondary-900: #ecfeff;
  
  /* Accent Colors - Adjusted for dark mode */
  --theme-accent: #fbbf24;
  --theme-accent-50: #78350f;
  --theme-accent-100: #92400e;
  --theme-accent-200: #b45309;
  --theme-accent-300: #d97706;
  --theme-accent-400: #f59e0b;
  --theme-accent-500: #fbbf24;
  --theme-accent-600: #fcd34d;
  --theme-accent-700: #fde68a;
  --theme-accent-800: #fef3c7;
  --theme-accent-900: #fffbeb;
  
  /* Semantic Colors - Adjusted for dark mode */
  --theme-success: #34d399;
  --theme-success-50: #064e3b;
  --theme-success-100: #065f46;
  --theme-success-200: #047857;
  --theme-success-300: #059669;
  --theme-success-400: #10b981;
  --theme-success-500: #34d399;
  --theme-success-600: #6ee7b7;
  --theme-success-700: #a7f3d0;
  --theme-success-800: #d1fae5;
  --theme-success-900: #ecfdf5;
  
  --theme-warning: #fbbf24;
  --theme-warning-50: #78350f;
  --theme-warning-100: #92400e;
  --theme-warning-200: #b45309;
  --theme-warning-300: #d97706;
  --theme-warning-400: #f59e0b;
  --theme-warning-500: #fbbf24;
  --theme-warning-600: #fcd34d;
  --theme-warning-700: #fde68a;
  --theme-warning-800: #fef3c7;
  --theme-warning-900: #fffbeb;
  
  --theme-danger: #f87171;
  --theme-danger-50: #7f1d1d;
  --theme-danger-100: #991b1b;
  --theme-danger-200: #b91c1c;
  --theme-danger-300: #dc2626;
  --theme-danger-400: #ef4444;
  --theme-danger-500: #f87171;
  --theme-danger-600: #fca5a5;
  --theme-danger-700: #fecaca;
  --theme-danger-800: #fee2e2;
  --theme-danger-900: #fef2f2;
  
  --theme-info: #60a5fa;
  --theme-info-50: #1e3a8a;
  --theme-info-100: #1e40af;
  --theme-info-200: #1d4ed8;
  --theme-info-300: #2563eb;
  --theme-info-400: #3b82f6;
  --theme-info-500: #60a5fa;
  --theme-info-600: #93c5fd;
  --theme-info-700: #bfdbfe;
  --theme-info-800: #dbeafe;
  --theme-info-900: #eff6ff;
  
  /* Background Colors - Dark Mode */
  --theme-bg-primary: #0a0f1d;
  --theme-bg-secondary: #0e1729;
  --theme-bg-tertiary: #151e32;
  --theme-bg-elevated: #1a233a;
  --theme-bg-overlay: rgba(0, 0, 0, 0.7);
  
  /* Surface Colors - Dark Mode */
  --theme-surface-1: #0e1729;
  --theme-surface-2: #151e32;
  --theme-surface-3: #1a233a;
  --theme-surface-4: #252f4a;
  --theme-surface-5: #303a5a;
  
  /* Border Colors - Dark Mode */
  --theme-border-1: rgba(226, 232, 240, 0.1);
  --theme-border-2: rgba(226, 232, 240, 0.15);
  --theme-border-3: rgba(226, 232, 240, 0.2);
  --theme-border-4: rgba(226, 232, 240, 0.3);
  --theme-border-5: rgba(226, 232, 240, 0.4);
  
  /* Text Colors - Dark Mode */
  --theme-text-primary: #f1f5f9;
  --theme-text-secondary: #cbd5e1;
  --theme-text-tertiary: #94a3b8;
  --theme-text-muted: #64748b;
  --theme-text-disabled: #475569;
  --theme-text-inverse: #0f172a;
  
  /* Shadow System - Dark Mode */
  --theme-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --theme-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  --theme-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --theme-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  
  /* Gradient Overlays - Dark Mode */
  --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary-600), var(--theme-secondary-500));
  --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary-500), var(--theme-accent-500));
  --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent-500), var(--theme-danger-500));
  --theme-gradient-success: linear-gradient(135deg, var(--theme-success-500), var(--theme-primary-500));
  
  /* Glass Effect - Dark Mode */
  --theme-glass-bg: rgba(14, 23, 41, 0.8);
  --theme-glass-border: rgba(99, 102, 241, 0.2);
  --theme-glass-blur: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   THEME TRANSITION SYSTEM
═══════════════════════════════════════════════════════════════ */

* {
  transition-property: 
    background-color,
    border-color,
    color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-duration: var(--theme-transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions for performance during theme switch */
.theme-switching * {
  transition: none !important;
}

/* Smooth theme transition for specific elements */
.theme-transition-smooth {
  transition: all var(--theme-transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */

.bg-theme-primary { background-color: var(--theme-primary); }
.bg-theme-secondary { background-color: var(--theme-secondary); }
.bg-theme-accent { background-color: var(--theme-accent); }
.bg-theme-success { background-color: var(--theme-success); }
.bg-theme-warning { background-color: var(--theme-warning); }
.bg-theme-danger { background-color: var(--theme-danger); }
.bg-theme-info { background-color: var(--theme-info); }

.bg-theme-bg-primary { background-color: var(--theme-bg-primary); }
.bg-theme-bg-secondary { background-color: var(--theme-bg-secondary); }
.bg-theme-bg-tertiary { background-color: var(--theme-bg-tertiary); }
.bg-theme-bg-elevated { background-color: var(--theme-bg-elevated); }

.bg-theme-surface-1 { background-color: var(--theme-surface-1); }
.bg-theme-surface-2 { background-color: var(--theme-surface-2); }
.bg-theme-surface-3 { background-color: var(--theme-surface-3); }

.text-theme-primary { color: var(--theme-primary); }
.text-theme-secondary { color: var(--theme-secondary); }
.text-theme-accent { color: var(--theme-accent); }
.text-theme-success { color: var(--theme-success); }
.text-theme-warning { color: var(--theme-warning); }
.text-theme-danger { color: var(--theme-danger); }
.text-theme-info { color: var(--theme-info); }

.text-theme-text-primary { color: var(--theme-text-primary); }
.text-theme-text-secondary { color: var(--theme-text-secondary); }
.text-theme-text-tertiary { color: var(--theme-text-tertiary); }
.text-theme-text-muted { color: var(--theme-text-muted); }

.border-theme-border-1 { border-color: var(--theme-border-1); }
.border-theme-border-2 { border-color: var(--theme-border-2); }
.border-theme-border-3 { border-color: var(--theme-border-3); }

.shadow-theme-sm { box-shadow: var(--theme-shadow-sm); }
.shadow-theme-md { box-shadow: var(--theme-shadow-md); }
.shadow-theme-lg { box-shadow: var(--theme-shadow-lg); }
.shadow-theme-xl { box-shadow: var(--theme-shadow-xl); }
.shadow-theme-2xl { box-shadow: var(--theme-shadow-2xl); }

/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM EFFECTS
═══════════════════════════════════════════════════════════════ */

.glass {
  background: var(--theme-glass-bg);
  backdrop-filter: blur(var(--theme-glass-blur));
  -webkit-backdrop-filter: blur(var(--theme-glass-blur));
  border: 1px solid var(--theme-glass-border);
}

.glass-strong {
  background: var(--theme-glass-bg);
  backdrop-filter: blur(calc(var(--theme-glass-blur) * 1.5));
  -webkit-backdrop-filter: blur(calc(var(--theme-glass-blur) * 1.5));
  border: 1px solid var(--theme-glass-border);
}

.glass-card {
  background: var(--theme-glass-bg);
  backdrop-filter: blur(var(--theme-glass-blur));
  -webkit-backdrop-filter: blur(var(--theme-glass-blur));
  border: 1px solid var(--theme-border-1);
  border-radius: var(--theme-radius-xl);
  box-shadow: var(--theme-shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT BACKGROUNDS
═══════════════════════════════════════════════════════════════ */

.gradient-primary {
  background: var(--theme-gradient-primary);
}

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

.gradient-accent {
  background: var(--theme-gradient-accent);
}

.gradient-success {
  background: var(--theme-gradient-success);
}

.gradient-text-primary {
  background: var(--theme-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-secondary {
  background: var(--theme-gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */

@keyframes themeFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes themePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes themeGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.6);
  }
}

@keyframes themeFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-theme-fade-in {
  animation: themeFadeIn 0.6s ease-out;
}

.animate-theme-pulse {
  animation: themePulse 2s ease-in-out infinite;
}

.animate-theme-glow {
  animation: themeGlow 3s ease-in-out infinite;
}

.animate-theme-float {
  animation: themeFloat 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY - REDUCED MOTION
═══════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════════════════════ */

@media print {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE
═══════════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
  :root {
    --theme-border-1: #000000;
    --theme-border-2: #000000;
    --theme-border-3: #000000;
    --theme-text-primary: #000000;
    --theme-text-secondary: #000000;
  }
  
  .dark {
    --theme-border-1: #ffffff;
    --theme-border-2: #ffffff;
    --theme-border-3: #ffffff;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #ffffff;
  }
}