:root {
  --bg: #F4F6F9;
  --card: #FFFFFF;
  --navy: #0F2A47;
  --primary: #1359C6;
  --text: #0F1720;
  --border: #767E8A;
  --success: #1B6B3A;
  --warning: #8A5200;
  --error: #C62828;
  /* Real, confirmed 2026-08-31 (Lloyd/Riivo, email thread "Questions on WebView embedding"):
     the mobile app does NOT render Spline Sans — no font loading exists there at all, it only
     appeared once in a CSS variable used by their test build. Using it here would make this
     onboarding screen the one screen in the app with a different typeface. Real fix: platform
     system font stack, exactly as Riivo specified. Size/line-height scale is unaffected —
     Lloyd confirmed "the size and line-height scale still stands." */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F14;
    --card: #161C24;
    --navy: #14304E;
    --primary: #5AA9FF;
    --text: #F0F4F8;
    --border: #69737F;
    --success: #5FD08A;
    --warning: #F0B357;
    --error: #FF6B6B;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0F14;
  --card: #161C24;
  --navy: #14304E;
  --primary: #5AA9FF;
  --text: #F0F4F8;
  --border: #69737F;
  --success: #5FD08A;
  --warning: #F0B357;
  --error: #FF6B6B;
}

/* Theme toggle — small fixed button, top-right of every onboarding page. Persists to
   localStorage; falls back to OS preference when unset. */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 40;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; }
}
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font); margin: 0; }
.title { font-size: 30px; line-height: 36px; font-weight: 700; }
.subtitle { font-size: 20px; line-height: 26px; font-weight: 600; }
.body-text { font-size: 16px; line-height: 24px; }
.small { font-size: 14px; line-height: 20px; }
.caption { font-size: 12px; line-height: 16px; }

label { font-size: 14px; line-height: 20px; font-weight: 600; display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
button.primary {
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover:not(:disabled) { filter: brightness(0.92); }
button.primary:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.field-error { color: var(--error); font-size: 14px; margin-top: 4px; }
.field-invalid { border-color: var(--error) !important; }
.required-mark { color: var(--error); }