/* =============================================================
   Care Advantage 360 — Landing Page
   DESIGN TOKENS — edit brand colours, fonts and spacing here.
   Every value below is used by styles.css, so a change here
   ripples through the whole page.

   Brand colours are Navy #181F4D and Orange #F26A21, matching the
   enrollment site exactly. The original mockup used a slightly
   different navy (#101F52); it has been unified.
   ============================================================= */

:root {
  /* ---- Brand colours ---- */
  --navy:         #181f4d;  /* headings, hero wash, stats band, links */
  --navy-footer:  #111838;  /* footer background (darker navy) */
  --navy-link:    var(--navy);
  --orange:       #f26a21;  /* accent: buttons, underline, emphasis */
  --green:        #068c38;  /* form success message */

  /* ---- Text ---- */
  --text:         #363e48;  /* body copy */
  --muted:        #4d5763;  /* section paragraphs */
  --muted-soft:   #6b7785;  /* captions, fine print */

  /* ---- Surfaces ---- */
  --white:        #ffffff;
  --surface-gray: #f6f8fa;  /* alternating band, callouts */
  --surface-warm: #fff5ef;  /* orange-tinted chips and bubbles */

  /* ---- Borders ---- */
  --border:        #e1e6ec;  /* form card */
  --border-blue:   #dde7f6;  /* cards, callouts */
  --border-faint:  #e8eef8;  /* section rules */
  --border-warm:   #f7c9ab;  /* speech bubble, value circles */
  --border-chip:   #fadcc8;  /* "NOT insurance" chip */
  --border-input:  #cbd3dd;  /* form fields */
  --border-focus:  #2789cb;  /* focused field */
  --shadow-focus:  0 0 0 3px rgba(39, 137, 203, .35);

  /* ---- Typography ---- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --wrap:   1200px;  /* max content width */
  --gutter: 32px;    /* left/right page padding */

  /* ---- Radius & shadows ---- */
  --radius:      16px;
  --radius-sm:   14px;
  --radius-lg:   18px;
  --radius-field:10px;
  --pill:        999px;

  --shadow-photo: 0 10px 30px rgba(24, 31, 77, .10);
  --shadow-card:  0 2px 10px rgba(24, 31, 77, .05);
  --shadow-cta:   0 2px 8px rgba(242, 106, 33, .26);
}