/* Dark Theme Styles */

.theme-dark {
  /* Override any light theme variables if needed */
  color-scheme: dark;
}

/* Enhanced dark theme specific styles */
.theme-dark {
  /* Background gradients for depth */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --gradient-surface: linear-gradient(145deg, var(--color-surface), var(--color-bg-tertiary));
  --gradient-card: linear-gradient(145deg, var(--color-surface), rgba(255, 107, 53, 0.05));
  
  /* Enhanced shadows for dark theme */
  --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.1);
  --shadow-glow-hover: 0 0 30px rgba(255, 107, 53, 0.2);
  
  /* Glass morphism effects */
  --glass-bg: rgba(30, 30, 30, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
}

/* Body and base styles */
.theme-dark body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Enhanced card styles */
.theme-dark .card,
.theme-dark .feature-card,
.theme-dark .modal-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}

/* Enhanced button styles */
.theme-dark .btn-primary {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow);
  border: none;
}

.theme-dark .btn-primary:hover {
  box-shadow: var(--shadow-glow-hover);
  transform: translateY(-2px);
}

/* Enhanced navbar */
.theme-dark .navbar {
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
}

/* Enhanced form elements */
.theme-dark .input,
.theme-dark .textarea,
.theme-dark .select {
  background: rgba(45, 45, 45, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  backdrop-filter: blur(10px);
}

.theme-dark .input:focus,
.theme-dark .textarea:focus,
.theme-dark .select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* Enhanced modals */
.theme-dark .modal-background {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.theme-dark .modal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-dark-xl);
}

/* Enhanced dropdowns */
.theme-dark .dropdown-menu {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-dark-xl);
}

/* Enhanced hero section */
.theme-dark .hero {
  background: radial-gradient(ellipse at top, 
    rgba(255, 107, 53, 0.1) 0%, 
    var(--color-bg-primary) 50%,
    var(--color-bg-secondary) 100%
  );
}

.theme-dark .hero::before {
  background: radial-gradient(ellipse at center, 
    rgba(255, 107, 53, 0.15) 0%, 
    transparent 70%
  );
}

/* Enhanced demo preview */
.theme-dark .demo-preview {
  background: var(--gradient-surface);
  box-shadow: 
    var(--shadow-dark-xl),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.2);
}

/* Enhanced feature cards */
.theme-dark .feature-card {
  background: var(--gradient-card);
  border: 1px solid rgba(255, 107, 53, 0.1);
  position: relative;
  overflow: hidden;
}

.theme-dark .feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(255, 107, 53, 0.1) 0%, 
    transparent 50%
  );
  opacity: 0;
  transition: var(--transition-opacity);
  pointer-events: none;
}

.theme-dark .feature-card:hover::after {
  opacity: 1;
}

/* Enhanced scrollbars */
.theme-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme-dark ::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--color-border), var(--color-primary));
  border-radius: var(--radius-full);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--color-border-light), var(--color-primary-light));
}

/* Enhanced selection */
.theme-dark ::selection {
  background: rgba(255, 107, 53, 0.3);
  color: var(--color-text-primary);
}

/* Enhanced focus styles */
.theme-dark :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
}

/* Loading states */
.theme-dark .loading-overlay {
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(10px);
}

.theme-dark .spinner {
  border: 3px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
}

/* Toast notifications */
.theme-dark .toast {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  color: var(--color-text-primary);
}

.theme-dark .toast-success {
  border-left: 4px solid var(--color-success);
}

.theme-dark .toast-error {
  border-left: 4px solid var(--color-error);
}

.theme-dark .toast-warning {
  border-left: 4px solid var(--color-warning);
}

.theme-dark .toast-info {
  border-left: 4px solid var(--color-info);
}

/* Enhanced animations */
@keyframes theme-dark-glow {
  0%, 100% {
    box-shadow: var(--shadow-glow);
  }
  50% {
    box-shadow: var(--shadow-glow-hover);
  }
}

.theme-dark .btn-primary.animate-glow {
  animation: theme-dark-glow 2s ease-in-out infinite;
}

/* Accessibility enhancements */
@media screen and (prefers-contrast: high) {
  .theme-dark {
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-border: #666666;
    --color-primary: #ff8c5a;
  }
  
  .theme-dark .btn-primary {
    border: 2px solid var(--color-primary-light);
  }
  
  .theme-dark .feature-card {
    border: 2px solid var(--color-border);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .theme-dark * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  
  .theme-dark .demo-preview {
    transform: none !important;
  }
  
  .theme-dark .feature-card:hover {
    transform: none !important;
  }
}

/* High contrast mode */
@media screen and (prefers-contrast: high) {
  .theme-dark {
    --color-bg-primary: #000000;
    --color-bg-secondary: #111111;
    --color-text-primary: #ffffff;
    --color-border: #ffffff;
  }
}

/* Print styles for dark theme */
@media print {
  .theme-dark {
    --color-bg-primary: #ffffff !important;
    --color-bg-secondary: #ffffff !important;
    --color-text-primary: #000000 !important;
    --color-text-secondary: #333333 !important;
    --color-border: #cccccc !important;
  }
  
  .theme-dark .hero,
  .theme-dark .features {
    background: #ffffff !important;
  }
  
  .theme-dark .feature-card,
  .theme-dark .demo-preview {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
  }
}