/* ============================================================
   MENDELIAN INHERITANCE SIMULATOR — Dark Mode
   Overrides CSS custom properties when body[data-theme="dark"]
   Both stylesheets are always loaded; no JS stylesheet swapping.
   ============================================================ */

body[data-theme="dark"] {
  --bg:           #0F172A;
  --surface:      #1E293B;
  --surface-alt:  #1A2744;
  --surface-muted:#1E293B;

  --text:         #F1F5F9;
  --text-muted:   #94A3B8;
  --text-subtle:  #64748B;

  --border:       #334155;
  --border-strong:#475569;
  --border-focus: #22C55E;

  --primary:      #22C55E;
  --primary-dark: #16A34A;
  --primary-light:#4ADE80;
  --secondary:    #38BDF8;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 1px 3px rgba(0,0,0,.5),  0 1px 2px -1px rgba(0,0,0,.5);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.6), 0 4px 6px -4px rgba(0,0,0,.5);

  --nav-bg:     rgba(15,23,42,.92);
  --nav-border: rgba(51,65,85,.85);
}

/* Inputs need an explicit background override for some browsers */
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-input {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  color-scheme: dark;
}

/* Flip the chevron arrow to a lighter color */
body[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Adjust hero gradient for dark mode */
body[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #020617 0%, #0F172A 45%, #0C2461 72%, #14532D 100%);
}

/* Page header in dark mode */
body[data-theme="dark"] .page-header {
  background: linear-gradient(135deg, #0C1420 0%, #112244 60%, #0C2010 100%);
}

/* Ensure options in selects are styled correctly */
body[data-theme="dark"] option {
  background: #1E293B;
  color: #F1F5F9;
}

/* Nav gradient border is brighter in dark mode */
body[data-theme="dark"] .main-nav::after { opacity: .65; }
body[data-theme="dark"] .main-nav.scrolled::after { opacity: 1; }
body[data-theme="dark"] .main-nav.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.5); }

/* Active pill keeps readable contrast in dark mode */
body[data-theme="dark"] .nav-links a.active {
  box-shadow: 0 2px 14px rgba(34,197,94,.4);
}

/* Dark mode toggle glow */
body[data-theme="dark"] .btn-icon:hover {
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}