/* ===================================
   THEME SYSTEM - CSS CUSTOM PROPERTIES
   Enhanced with Animation Guidelines
   =================================== */

/* Dark Mode (Default) */
:root[data-theme="dark"] {
  /* Core Color Palette - Black, White, Gray, and Blue Accent */
  --deep-ink: #000000;        /* Primary background - pure black */
  --data-stream: #22b0fa;     /* Primary accent - blue */
  --matrix-green: #22b0fa;    /* Secondary accent - same blue */
  --platinum: #FFFFFF;        /* Text color - pure white */
  --carbon: #1a1a1a;          /* Secondary background - dark gray */
  --signal-purple: #22b0fa;   /* Tertiary accent - same blue */
  --warning-amber: #666666;   /* Alert color - medium gray */
  
  /* Legacy mappings for compatibility */
  --bg-primary: var(--deep-ink);
  --bg-secondary: var(--carbon);
  --accent-primary: var(--data-stream);
  --accent-secondary: var(--matrix-green);
  
  /* Text Colors */
  --text-primary: var(--platinum);
  --text-secondary: #cccccc;
  --text-tertiary: #999999;
  
  /* UI Colors */
  --card-bg: var(--carbon);
  --border-color: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.3);
  
  /* Special Colors */
  --success-green: #22b0fa;
  --error-red: #666666;
  
  /* Neutral Grays */
  --gray-100: #f5f5f5;
  --gray-200: #cccccc;
  --gray-300: #999999;
  --gray-400: #666666;
  --gray-500: #333333;
  
  /* Typography (from guidelines) */
  --font-heading: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Animation Easing (from guidelines) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --transition-fast: 0.2s var(--ease-out-quart);
  --transition-medium: 0.4s var(--ease-out-quart);
  --transition-slow: 0.8s var(--ease-out-quart);
  
  /* Enhanced Gradients */
  --primary-gradient: linear-gradient(135deg, var(--deep-ink) 0%, var(--carbon) 100%);
  --data-gradient: linear-gradient(90deg, var(--data-stream) 0%, var(--data-stream) 50%, var(--data-stream) 100%);
  --gradient-bg: var(--primary-gradient);
  --gradient-data: var(--data-gradient);
  --gradient-card: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  
  /* Enhanced Effects */
  --glow-primary: 0 0 20px rgba(34, 176, 250, 0.3);
  --glow-secondary: 0 0 20px rgba(34, 176, 250, 0.3);
  --glow-purple: 0 0 20px rgba(34, 176, 250, 0.3);
  
  /* Particle System */
  --particle-color: var(--data-stream);
  --particle-opacity: 0.8;
  --particle-trail: rgba(34, 176, 250, 0.3);
  
  /* Logo */
  --logo-filter: none;
}

/* Light Mode */
:root[data-theme="light"] {
  /* Primary Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #f5f5f5;
  --accent-primary: #22b0fa;
  --accent-secondary: #22b0fa;
  
  /* Text Colors */
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  
  /* UI Colors */
  --card-bg: #FFFFFF;
  --border-color: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Special Colors */
  --signal-purple: #22b0fa;
  --warning-amber: #666666;
  --success-green: #22b0fa;
  --error-red: #666666;
  
  /* Neutral Grays */
  --gray-100: #333333;
  --gray-200: #666666;
  --gray-300: #999999;
  --gray-400: #cccccc;
  --gray-500: #f5f5f5;
  
  /* Gradients */
  --gradient-bg: linear-gradient(135deg, #FFFFFF 0%, #f5f5f5 100%);
  --gradient-data: linear-gradient(90deg, #22b0fa 0%, #22b0fa 50%, #22b0fa 100%);
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 245, 0.8) 100%);
  
  /* Effects */
  --glow-primary: 0 0 20px rgba(34, 176, 250, 0.2);
  --glow-secondary: 0 0 20px rgba(34, 176, 250, 0.2);
  --glow-purple: 0 0 20px rgba(34, 176, 250, 0.2);
  
  /* Particle System */
  --particle-color: #22b0fa;
  --particle-opacity: 0.4;
  --particle-trail: rgba(34, 176, 250, 0.2);
  
  /* Logo */
  --logo-filter: none;
}

/* System Preference Detection */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Apply light theme variables when no theme is set and user prefers light */
    --bg-primary: #FFFFFF;
    --bg-secondary: #f5f5f5;
    --accent-primary: #22b0fa;
    --accent-secondary: #22b0fa;
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --card-bg: #FFFFFF;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --signal-purple: #22b0fa;
    --warning-amber: #666666;
    --success-green: #22b0fa;
    --error-red: #666666;
    --gray-100: #333333;
    --gray-200: #666666;
    --gray-300: #999999;
    --gray-400: #cccccc;
    --gray-500: #f5f5f5;
    --gradient-bg: linear-gradient(135deg, #FFFFFF 0%, #f5f5f5 100%);
    --gradient-data: linear-gradient(90deg, #22b0fa 0%, #22b0fa 50%, #22b0fa 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 245, 0.8) 100%);
    --glow-primary: 0 0 20px rgba(34, 176, 250, 0.2);
    --glow-secondary: 0 0 20px rgba(34, 176, 250, 0.2);
    --glow-purple: 0 0 20px rgba(34, 176, 250, 0.2);
    --particle-color: #22b0fa;
    --particle-opacity: 0.4;
    --particle-trail: rgba(34, 176, 250, 0.2);
    --logo-filter: none;
  }
}

/* Smooth Transitions for Theme Switching */
* {
  transition: 
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo Theme Switching */
.logo-light {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.logo-dark {
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-theme="light"] .logo-light {
  opacity: 0;
}

[data-theme="light"] .logo-dark {
  opacity: 1;
}

/* Theme Toggle Button Styles */
.theme-toggle {
  position: relative;
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--border-color);
  transform: scale(1.1);
}

.theme-icon {
  position: absolute;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sun-icon {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}

.moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="light"] .sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="light"] .moon-icon {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  
  .theme-toggle {
    transition: background-color 0.1s ease;
  }
  
  .theme-icon {
    transition: opacity 0.1s ease;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --text-primary: #FFFFFF;
    --text-secondary: #cccccc;
    --border-color: rgba(255, 255, 255, 0.3);
  }
  
  :root[data-theme="light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #f5f5f5;
    --text-primary: #000000;
    --text-secondary: #666666;
    --border-color: rgba(0, 0, 0, 0.2);
  }
}

/* Print Styles */
@media print {
  :root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --text-primary: #000000;
    --text-secondary: #333333;
    --accent-primary: #000000;
    --accent-secondary: #000000;
    --card-bg: #FFFFFF;
    --border-color: #cccccc;
  }
  
  .theme-toggle,
  .cursor,
  .cursor-trail,
  #particle-canvas,
  .background-gradient {
    display: none !important;
  }
}