/**
 * DevPulse v3.0 - Theme System
 * Comprehensive theming with light, dark, and auto modes
 */

/* ================================
   THEME DETECTION
   ================================ */

/* Auto theme based on system preference */
.theme-auto {
  color-scheme: light dark;
}

/* Explicit light theme */
.theme-light {
  /* Light theme variables are defined in main.css :root */
  color-scheme: light;
}

/* Explicit dark theme will be handled by [data-theme="dark"] selector */

/* Apply dark theme automatically based on system preference */
@media (prefers-color-scheme: dark) {
  .theme-auto {
    /* Dark theme colors */
    --color-background: #0f1419;
    --color-surface: #1a1f2e;
    --color-surface-elevated: #252d3d;
    --color-border: #2d3748;
    --color-border-light: #374151;
    --color-text-primary: #f7fafc;
    --color-text-secondary: #cbd5e0;
    --color-text-muted: #a0aec0;
    --color-text-inverse: #1a202c;
    
    /* Adjusted shadows for dark theme */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  }
}

/* ================================
   EXPLICIT DARK THEME
   ================================ */

[data-theme="dark"] {
  /* Background colors */
  --color-background: #0f1419;
  --color-surface: #1a1f2e;
  --color-surface-elevated: #252d3d;
  
  /* Border colors */
  --color-border: #2d3748;
  --color-border-light: #374151;
  
  /* Text colors */
  --color-text-primary: #f7fafc;
  --color-text-secondary: #cbd5e0;
  --color-text-muted: #a0aec0;
  --color-text-inverse: #1a202c;
  
  /* Shadows for dark theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  
  /* Special elements for dark theme */
  color-scheme: dark;
}

/* ================================
   EXPLICIT LIGHT THEME
   ================================ */

[data-theme="light"] {
  /* Background colors */
  --color-background: #ffffff;
  --color-surface: #f7fafc;
  --color-surface-elevated: #ffffff;
  
  /* Border colors */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  
  /* Text colors */
  --color-text-primary: #1a202c;
  --color-text-secondary: #4a5568;
  --color-text-muted: #718096;
  --color-text-inverse: #ffffff;
  
  /* Shadows for light theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Special elements for light theme */
  color-scheme: light;
}

/* ================================
   THEME TRANSITIONS
   ================================ */

/* Smooth transitions when switching themes */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: var(--transition-normal);
  transition-timing-function: var(--ease-in-out);
}

/* Exclude animations from theme transitions */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
  transition: none !important;
}

/* ================================
   COMPONENT-SPECIFIC THEME ADJUSTMENTS
   ================================ */

/* Loading screen theme adjustments */
.loading-screen {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* Profile section background adjustments */
[data-theme="dark"] .profile-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

[data-theme="light"] .profile-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* Search input adjustments */
[data-theme="dark"] .search-input {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

[data-theme="dark"] .search-input:focus {
  background: var(--color-surface);
}

/* Chart background adjustments */
[data-theme="dark"] .chart-container canvas {
  background: transparent;
}

/* Code block adjustments */
[data-theme="dark"] code {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Contribution calendar adjustments */
[data-theme="dark"] .calendar-day[data-level="0"] { 
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .calendar-day[data-level="1"] { 
  background: rgba(102, 126, 234, 0.4);
  border-color: rgba(102, 126, 234, 0.5);
}

[data-theme="dark"] .calendar-day[data-level="2"] { 
  background: rgba(102, 126, 234, 0.6);
  border-color: rgba(102, 126, 234, 0.7);
}

[data-theme="dark"] .calendar-day[data-level="3"] { 
  background: rgba(102, 126, 234, 0.8);
  border-color: rgba(102, 126, 234, 0.9);
}

[data-theme="dark"] .calendar-day[data-level="4"] { 
  background: rgba(102, 126, 234, 1);
  border-color: rgba(102, 126, 234, 1);
}

/* ================================
   TOAST NOTIFICATIONS THEME
   ================================ */

[data-theme="dark"] .toast {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .toast.toast-success {
  background: rgba(72, 187, 120, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

[data-theme="dark"] .toast.toast-error {
  background: rgba(245, 101, 101, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

[data-theme="dark"] .toast.toast-warning {
  background: rgba(237, 137, 54, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

[data-theme="dark"] .toast.toast-info {
  background: rgba(66, 153, 225, 0.1);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* ================================
   FORM CONTROLS THEME
   ================================ */

/* Select dropdown arrow for dark theme */
[data-theme="dark"] .sort-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="light"] .sort-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* ================================
   SKELETON LOADING THEME
   ================================ */

[data-theme="dark"] .skeleton,
[data-theme="dark"] .loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    rgba(45, 55, 72, 0.8) 50%,
    var(--color-surface) 75%
  );
}

[data-theme="light"] .skeleton,
[data-theme="light"] .loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-border-light) 50%,
    var(--color-surface) 75%
  );
}

/* ================================
   SCROLLBAR THEME
   ================================ */

/* Webkit scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Firefox scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-surface);
}

/* ================================
   SELECTION THEME
   ================================ */

::selection {
  background: rgba(102, 126, 234, 0.3);
  color: var(--color-text-primary);
}

::-moz-selection {
  background: rgba(102, 126, 234, 0.3);
  color: var(--color-text-primary);
}

[data-theme="dark"] ::selection {
  background: rgba(102, 126, 234, 0.5);
  color: var(--color-text-inverse);
}

[data-theme="dark"] ::-moz-selection {
  background: rgba(102, 126, 234, 0.5);
  color: var(--color-text-inverse);
}

/* ================================
   HIGH CONTRAST MODE
   ================================ */

@media (prefers-contrast: high) {
  :root {
    --color-border: #000000;
    --color-text-primary: #000000;
    --color-background: #ffffff;
  }
  
  [data-theme="dark"] {
    --color-border: #ffffff;
    --color-text-primary: #ffffff;
    --color-background: #000000;
  }
  
  /* Force high contrast for interactive elements */
  .button,
  .search-input,
  .sort-select {
    border: 2px solid currentColor !important;
  }
  
  /* High contrast focus indicators */
  .focus-ring:focus {
    outline: 3px solid currentColor !important;
    outline-offset: 2px !important;
  }
}

/* ================================
   FORCED COLORS MODE (Windows High Contrast)
   ================================ */

@media (forced-colors: active) {
  :root {
    --color-primary: ButtonText;
    --color-background: ButtonFace;
    --color-text-primary: ButtonText;
    --color-border: ButtonText;
  }
  
  .button-primary {
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
  }
  
  .search-input {
    background: Field !important;
    color: FieldText !important;
    border: 1px solid FieldText !important;
  }
  
  .search-input:focus {
    outline: 2px solid Highlight !important;
  }
}

/* ================================
   THEME TOGGLE ANIMATIONS
   ================================ */

.theme-toggle-enter {
  animation: themeToggleEnter var(--duration-normal) var(--ease-back);
}

.theme-toggle-exit {
  animation: themeToggleExit var(--duration-fast) var(--ease-in);
}

@keyframes themeToggleEnter {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes themeToggleExit {
  from {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
  }
}

/* ================================
   PRINT THEME
   ================================ */

@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .theme-toggle,
  .action-button,
  .search-section {
    display: none !important;
  }
  
  .profile-section {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
  }
  
  .chart-container {
    break-inside: avoid;
  }
}

/* ================================
   REDUCED TRANSPARENCY MODE
   ================================ */

@media (prefers-reduced-transparency: reduce) {
  .loading-screen,
  .profile-section::before,
  .modal-backdrop {
    backdrop-filter: none !important;
    background: var(--color-background) !important;
  }
  
  .app-header {
    backdrop-filter: none !important;
    background: var(--color-surface-elevated) !important;
  }
}

/* ================================
   THEME UTILITY CLASSES
   ================================ */

/* Force light theme on specific elements */
.force-light-theme {
  --color-background: #ffffff;
  --color-surface: #f7fafc;
  --color-text-primary: #1a202c;
  --color-text-secondary: #4a5568;
  --color-border: #e2e8f0;
}

/* Force dark theme on specific elements */
.force-dark-theme {
  --color-background: #0f1419;
  --color-surface: #1a1f2e;
  --color-text-primary: #f7fafc;
  --color-text-secondary: #cbd5e0;
  --color-border: #2d3748;
}

/* Theme-aware visibility */
.light-only {
  display: block;
}

.dark-only {
  display: none;
}

[data-theme="dark"] .light-only {
  display: none;
}

[data-theme="dark"] .dark-only {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .theme-auto .light-only {
    display: none;
  }
  
  .theme-auto .dark-only {
    display: block;
  }
}