/* Dark Mode Variables */
:root {
  --bg-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --bg-secondary: rgba(15, 23, 42, 0.8);
  --bg-card: rgba(30, 41, 59, 0.6);
  --border-primary: rgba(59, 130, 246, 0.2);
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
}

.dark {
  --bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --bg-secondary: rgba(248, 250, 252, 0.9);
  --bg-card: rgba(255, 255, 255, 0.8);
  --border-primary: rgba(203, 213, 225, 0.3);
  --text-primary: #1e293b;
  --text-secondary: #334155;
  --text-muted: #64748b;
}

/* Loading State Styles */
.loading-state {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Smooth Transitions */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Focus States for Accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}