/* Wapan Health: colour tokens (from the "Design refresh and navigation update" Claude Design project).
   12 tokens replace the previous mix of tints, peach cards, mid-blues and gradients. */
:root {
  /* Brand */
  --navy:          #1F3B63; /* headings, nav text, primary dark surface */
  --navy-deep:     #152A47; /* footer, crisis band */
  --orange:        #CC4A22; /* buttons, links, eyebrows (4.6:1 with white) */
  --orange-hover:  #B33E1B;
  --amber:         #F2A23A; /* logo sun + small accents on navy only, never text on light */

  /* Surfaces */
  --paper:         #FAF8F4; /* page background */
  --sand:          #F1EBE2; /* the ONE alternate section background */
  --white:         #FFFFFF; /* cards, forms, receipts */

  /* Text + rules */
  --ink:           #18222F; /* body text */
  --muted:         #586273; /* secondary text (5.9:1 on paper) */
  --line:          #E2DDD4; /* rules, borders on paper */
  --line-sand:     #D9D1C4; /* rules on sand */

  /* On navy */
  --on-navy:       #F4F1EA;
  --on-navy-muted: #C9D2E0;
}

/* Usage rules
   - One navy block per page max (plus footer). No gradients.
   - Orange is for action: buttons, links, eyebrows, step numbers. Not for decoration.
   - Alternate sections: paper and sand only. No light-blue or peach fills.
*/