/* Dark Mode CSS - Foundation (Never Change) */

:root.dark {
  --color-primary: #f8fafc;
  --color-secondary: #cbd5e1;
  --color-accent: #60a5fa;
  --color-success: #10b981;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  
  --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-dark-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Base Dark Mode */
.dark body {
  background-color: var(--color-dark-primary);
  color: var(--color-primary);
}

/* Typography */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--color-primary) !important;
}

.dark p {
  color: var(--color-secondary) !important;
}

/* Text Colors */
.dark .text-gray-600 { color: var(--color-secondary) !important; }
.dark .text-gray-700 { color: var(--color-primary) !important; }
.dark .text-primary { color: var(--color-primary) !important; }

/* Buttons */
.dark .btn-primary {
  background: var(--color-accent) !important;
  color: var(--color-dark-primary) !important;
}

.dark .btn-secondary {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.dark .btn-secondary:hover {
  background: var(--color-accent) !important;
  color: var(--color-dark-primary) !important;
}

/* Cards */
.dark .card, .dark .bg-white {
  background: var(--color-dark-secondary) !important;
  color: var(--color-primary) !important;
}

.dark .bg-light-bg {
  background: var(--color-dark-secondary) !important;
}

/* Forms */
.dark .form-input {
  background: var(--color-dark-secondary) !important;
  border-color: var(--color-dark-border) !important;
  color: var(--color-primary) !important;
}

.dark .form-input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* Navigation */
.dark header {
  background: var(--color-dark-secondary) !important;
  border-bottom-color: var(--color-dark-border) !important;
}

.dark .nav-link {
  color: var(--color-secondary) !important;
}

.dark .nav-link:hover {
  color: var(--color-accent) !important;
}

/* Footer */
.dark footer {
  background: var(--color-dark-primary) !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

/* Sections */
.dark .bg-gray-50 {
  background: var(--color-dark-secondary) !important;
}

.dark .bg-blue-50 {
  background: rgba(96, 165, 250, 0.1) !important;
}

.dark .gradient-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
}

/* Borders */
.dark .border-gray-200 { border-color: var(--color-dark-border) !important; }
.dark .border-gray-300 { border-color: var(--color-dark-border) !important; }

/* Dark Mode Toggles */
.dark #dark-mode-toggle,
.dark #mobile-dark-toggle {
  background: var(--color-dark-card) !important;
  color: var(--color-primary) !important;
}

.dark #dark-mode-toggle:hover,
.dark #mobile-dark-toggle:hover {
  background: var(--color-accent) !important;
  color: var(--color-dark-primary) !important;
}
