/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  --navy:        #0F2040;
  --navy-light:  #1a3358;
  --amber:       #F5A623;
  --amber-bg:    rgba(245, 166, 35, 0.10);
  --text:        #1a1a2e;
  --text-muted:  #6b7280;
  --border:      #e5e7eb;
  --border-focus:#0F2040;
  --surface:     #f9fafb;
  --white:       #ffffff;
  --success:     #059669;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
}

/* Dark theme*/
:root[data-theme="dark"] {
  --text:        #f8fafc;
  --text-muted:  #94a3b8;
  --border:      #334155;
  --border-focus:#F5A623;
  --surface:     #0f172a;
}

/* Ensure inputs adjust text color properly in dark mode */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .form-footer {
  background: var(--surface);
}

:root[data-theme="dark"] #discoveryForm,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .progress-bar {
  background: #1e293b; /* Slightly lighter slate for contrast */
  color: var(--text);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

:root[data-theme="dark"] .btn-submit {
  background: var(--amber);
  color: #0f172a;
  font-weight: 600;
}
:root[data-theme="dark"] .btn-submit:hover {
  background: #d9911e;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* ── Accessibility ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}