/* ============================================
   DMV Passing - Light Theme (White Version)
   Overrides dark theme when html[data-theme="light"]
   ============================================ */

html[data-theme="light"] {
  /* Light backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-glass: rgba(255, 255, 255, 0.95);
  --bg-input: #f1f5f9;

  /* Dark text for readability */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* Accent colors - deeper for contrast on white */
  --accent-blue: #2563eb;
  --accent-cyan: #0891b2;
  --accent-purple: #7c3aed;
  --accent-green: #059669;
  --accent-red: #dc2626;
  --accent-amber: #d97706;
  --accent-pink: #db2777;

  /* Borders */
  --border-color: rgba(30, 41, 59, 0.12);
  --border-glow: rgba(37, 99, 235, 0.4);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
  --gradient-card: linear-gradient(145deg, #ffffff, #f8fafc);
  --gradient-accent: linear-gradient(135deg, #2563eb, #7c3aed);
  --gradient-success: linear-gradient(135deg, #059669, #0891b2);
  --gradient-fire: linear-gradient(135deg, #d97706, #dc2626);

  /* Softer shadows for light theme */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);
  --shadow-glow-green: 0 0 20px rgba(5, 150, 105, 0.15);
  --shadow-glow-red: 0 0 20px rgba(220, 38, 38, 0.15);
}

/* Body background overlay - subtle for light */
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(8, 145, 178, 0.03) 0%, transparent 50%);
}

/* Nav - light background */
html[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .nav-logo,
html[data-theme="light"] .nav-links a {
  color: var(--text-primary);
}

html[data-theme="light"] .nav-links a:hover {
  color: var(--accent-blue);
}

/* Hero badge - light style */
html[data-theme="light"] .hero-badge {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--accent-blue);
}

/* Action cards - light with border */
html[data-theme="light"] .action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .action-card:hover {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: var(--shadow-md);
}

/* Footer */
html[data-theme="light"] .footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

html[data-theme="light"] .footer-logo,
html[data-theme="light"] .footer-text {
  color: var(--text-primary);
}

html[data-theme="light"] .footer-text {
  color: var(--text-muted);
}

/* State selector & inputs */
html[data-theme="light"] .state-select-btn,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Back button */
html[data-theme="light"] .back-btn {
  color: var(--text-secondary);
  border-color: var(--border-color);
}

html[data-theme="light"] .back-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* Nav hamburger icon */
html[data-theme="light"] .nav-hamburger {
  color: var(--text-primary);
}

/* Section titles */
html[data-theme="light"] .section-title {
  color: var(--text-primary);
}

/* Hero & stats */
html[data-theme="light"] .hero h1 {
  color: var(--text-primary);
}

html[data-theme="light"] .hero p,
html[data-theme="light"] .hero-stat .stat-label {
  color: var(--text-secondary);
}

html[data-theme="light"] .hero-stat .stat-number {
  color: var(--text-primary);
}

/* Card body text */
html[data-theme="light"] .action-card h3,
html[data-theme="light"] .action-card .card-body h3 {
  color: var(--text-primary);
}

html[data-theme="light"] .action-card p,
html[data-theme="light"] .action-card .card-body p {
  color: var(--text-secondary);
}

/* Footer block links */
html[data-theme="light"] .footer-block-links a {
  color: var(--accent-blue);
}

html[data-theme="light"] .footer-block-links a:hover {
  color: var(--accent-cyan);
}

/* Search bar */
html[data-theme="light"] .search-bar input {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-color);
}

html[data-theme="light"] .search-icon {
  color: var(--text-muted);
}