/* ============================================================
   Pesara Digital — Colour tokens
   Navy + gold, flat surfaces, four pillar families.
   Source: Brand Guidelines v3.0 · asset pack palette.
   ============================================================ */
:root {
  /* ---- Core brand ---- */
  --color-navy: #10255A;          /* field · primary text (Ink) */
  --color-navy-cobrand: #182848;  /* crest field ONLY — not a UI colour */
  --color-gold: #F5B73C;          /* Member Gold · accent · "the member" */
  --color-gold-antique: #E0C884;  /* heritage · print */
  --color-paper: #F6F7FB;         /* default surface */
  --color-line: #E7EAF1;          /* hairlines · dividers */
  --color-white: #FFFFFF;

  /* ---- Reading palette (text on white) ---- */
  --color-ink: #10255A;           /* headings · 13.9:1 AAA */
  --color-slate: #33415F;         /* body · 8.9:1 AAA */
  --color-mist: #5C6A85;          /* captions ≥16px · 5.3:1 AA */

  /* ---- Pillar families · bright / deep / tint ---- */
  --color-pension-bright: #2E5BFF;
  --color-pension-deep:   #2347D8;
  --color-pension-tint:   #E8EDFD;

  --color-health-bright:  #17C0C0;
  --color-health-deep:    #097A6E;
  --color-health-tint:    #E2F5F2;

  --color-protection-bright: #6E5BFF;
  --color-protection-deep:   #4B2FD6;
  --color-protection-tint:   #ECE9FD;

  --color-lifestyle-bright: #F5B73C;
  --color-lifestyle-deep:   #8A5E00;
  --color-lifestyle-tint:   #FBF0D8;

  /* ---- Safety & utility ---- */
  --color-safety-red: #C42A56;    /* SOS + destructive ONLY, never decoration */
  --color-safety-tint: #FDE8EF;   /* tint behind safety badges */
  --color-utility-tint: #EEF1F6;  /* neutral icon tile */
  --color-utility-ink:  #33415F;  /* neutral nav / utility icon */

  /* ---- Semantic surfaces ---- */
  --surface-page:   var(--color-paper);
  --surface-card:   var(--color-white);
  --surface-sunken: #EEF1F6;
  --surface-field:  var(--color-navy);   /* navy hero / member card field */
  --surface-inverse-text: var(--color-white);

  /* ---- Semantic text ---- */
  --text-heading: var(--color-ink);
  --text-body:    var(--color-slate);
  --text-caption: var(--color-mist);
  --text-on-navy: var(--color-white);
  --text-on-navy-muted: rgba(255,255,255,0.72);
  --text-accent:  var(--color-gold);

  /* ---- Semantic lines / borders ---- */
  --border-subtle: var(--color-line);
  --border-strong: #D5DAE6;
  --border-field:  #C7CEDD;
  --border-focus:  var(--color-pension-bright);

  /* ---- Accent ---- */
  --accent: var(--color-gold);          /* gold = the member; never body text on white */
  --accent-ink: var(--color-navy);      /* text/icon that sits ON gold */
}