/**
 * Theme Styles
 * Theme-specific variables, transitions, and theming utilities
 */

/* ==========================================================================
   Theme Variables & Color Modes
   ========================================================================== */

/* Dark Theme (Default) */
[data-theme="dark"],
.theme-dark {
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #1a1a1a;
  --color-bg-overlay: rgba(10, 10, 10, 0.95);
  
  --color-surface: #1a1a1a;
  --color-surface-hover: #222222;
  --color-surface-active: #2a2a2a;
  
  --color-text-primary: #ffffff;
  --color-text-secondary: #b3b3b3;
  --color-text-tertiary: #808080;
  
  --color-border: #2a2a2a;
  --color-border-hover: #333333;
  --color-border-light: #404040;
  
  --color-accent: #00ff88;
  --color-accent-hover: #00cc6a;
  --color-accent-bg: rgba(0, 255, 136, 0.1);
  
  --color-success: #00ff88;
  --color-error: #ff4444;
  --color-error-bg: rgba(255, 68, 68, 0.1);
  --color-warning: #ffaa00;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Light Theme */
[data-theme="light"],
.theme-light {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #e8e8e8;
  --color-bg-overlay: rgba(255, 255, 255, 0.95);
  
  --color-surface: #ffffff;
  --color-surface-hover: #f0f0f0;
  --color-surface-active: #e0e0e0;
  
  --color-text-primary: #000000;
  --color-text-secondary: #4d4d4d;
  --color-text-tertiary: #808080;
  
  --color-border: #e0e0e0;
  --color-border-hover: #d0d0d0;
  --color-border-light: #c0c0c0;
  
  --color-accent: #00cc6a;
  --color-accent-hover: #00aa55;
  --color-accent-bg: rgba(0, 204, 106, 0.1);
  
  --color-success: #00cc6a;
  --color-error: #e63939;
  --color-error-bg: rgba(230, 57, 57, 0.1);
  --color-warning: #ff9900;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Theme Transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

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

/* ==========================================================================
   Theme Toggle Component
   ========================================================================== */

.theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.theme-toggle:active {
  background-color: var(--color-surface-active);
}

.theme-toggle-icon {
  width: 20px;
  height: 20px;
}

/* Icon switching based on theme */
[data-theme="dark"] .theme-toggle .light-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .dark-icon {
  display: none;
}

[data-theme="light"] .theme-toggle .light-icon {
  display: none;
}

[data-theme="light"] .theme-toggle .dark-icon {
  display: block;
}

/* ==========================================================================
   Theme-Specific Utilities
   ========================================================================== */

/* Code blocks in different themes */
[data-theme="dark"] code {
  background-color: #1a1a1a;
  color: #00ff88;
}

[data-theme="light"] code {
  background-color: #f0f0f0;
  color: #00aa55;
}

/* Selection colors */
[data-theme="dark"] ::selection {
  background-color: rgba(0, 255, 136, 0.3);
  color: #ffffff;
}

[data-theme="light"] ::selection {
  background-color: rgba(0, 204, 106, 0.3);
  color: #000000;
}

/* Scrollbar theming */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0a0a0a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #333333;
}

[data-theme="light"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f5f5f5;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 6px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .theme-transitioning * {
    transition: none !important;
  }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
  [data-theme="dark"] {
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-border: #404040;
    --color-accent: #00ffaa;
  }
  
  [data-theme="light"] {
    --color-text-primary: #000000;
    --color-text-secondary: #202020;
    --color-border: #a0a0a0;
    --color-accent: #009955;
  }
}