/*
═══════════════════════════════════════════════════════════
  OneClikDeal Toolkit - Theme System
  Light/Dark Mode Smooth Transitions
═══════════════════════════════════════════════════════════
*/

/* Theme transition for smooth switching */
body,
.header,
.card,
.footer,
.btn-secondary,
.hero {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Light Theme Enhancements */
[data-theme="light"] {
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-accent: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
}

[data-theme="light"] .hero {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 50%, #f3f4f6 100%);
}

[data-theme="light"] .card {
  background: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .footer {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

/* Dark Theme Enhancements */
[data-theme="dark"] {
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-secondary: linear-gradient(135deg, #fbbf24 0%, #f87171 100%);
  --gradient-accent: linear-gradient(135deg, #34d399 0%, #60a5fa 100%);
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #374151 100%);
}

[data-theme="dark"] .card {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
}

[data-theme="dark"] .header {
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(10px);
}

/* Theme-specific animations */
[data-theme="dark"] .card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* High contrast accessibility mode */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #1e40af;
    --text-secondary: #374151;
  }
  
  [data-theme="dark"] {
    --primary-color: #60a5fa;
    --text-secondary: #d1d5db;
  }
}

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