:root,
.new-onboarding.new-onboarding {
  --coral: #EF5350;
  --coral-deep: #D94045;
  --coral-darker: #C62828;
  --coral-glow: rgba(239, 83, 80, .07);
  --coral-glow-s: rgba(239, 83, 80, .14);
  --warm-cream: #FFFAF7;
  --sand: #F5EEE8;
  --sand-light: #FAF6F2;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #A8A29E;
  --text-hint: #C4BBB5;
  --border: #E7E0DA;
  --border-hover: #D4CCC5;
  --white: #FFF;
  --green: #2E7D32;
  --green-bg: #EDF7ED;
  --amber: #E65100;
  --amber-light: #FFF3E0;
  --blue: #1565C0;
  --blue-light: #E3F2FD;
  --font-d: 'Inter', -apple-system, 'SF Pro Display', sans-serif;
  --font-b: 'DM Sans', -apple-system, sans-serif;
}

/* Dark mode — tracks both prefers-color-scheme and an explicit .dark class
   on html (used by the Hotwire Native bridge when iOS is in dark appearance). */
@media (prefers-color-scheme: dark) {
  :root,
  .new-onboarding.new-onboarding {
    --warm-cream: #1A1715;
    --sand: #2A2421;
    --sand-light: #2A2421;
    --text-primary: #F5EEE8;
    --text-secondary: #B8B0A8;
    --text-muted: #8A8278;
    --text-hint: #5A5249;
    --border: #3A3531;
    --border-hover: #4A4540;
    --white: #221E1C;
    --coral-glow: rgba(239, 83, 80, .14);
    --coral-glow-s: rgba(239, 83, 80, .24);
  }
}

html.dark,
html.dark .new-onboarding.new-onboarding {
  --warm-cream: #1A1715;
  --sand: #2A2421;
  --sand-light: #2A2421;
  --text-primary: #F5EEE8;
  --text-secondary: #B8B0A8;
  --text-muted: #8A8278;
  --text-hint: #5A5249;
  --border: #3A3531;
  --border-hover: #4A4540;
  --white: #221E1C;
  --coral-glow: rgba(239, 83, 80, .14);
  --coral-glow-s: rgba(239, 83, 80, .24);
}