/* ============================================================
   SIPI v10 — Design Tokens
   Source of truth: docs/v2-source-of-truth/sipi_v10_mock.html (Task A2)
   Updated 2026-04-29 to align with the SIPI Extended Colour Palette v2
   (sipi_extended_colour_palette_v2.html). Two new foundation colors
   added (teal-pale, navy-deep) + a parallel --sipi-* alias namespace
   so future CSS can use the v2 vocabulary without breaking the
   existing ~150 references to the short names.

   Both naming conventions resolve to the same value:
     --teal-dark      ===  --sipi-teal-dark   (#085041)
     --navy           ===  --sipi-navy        (#051C2C)
     ...etc
   ============================================================ */
:root{
  /* ── FOUNDATION (v1 short names — keep for back-compat) ────── */
  --navy:#051C2C; --navy2:#0D2438; --navy-deep:#030F18;
  --teal-dark:#085041; --teal:#1A9C7B; --teal-lt:#5DCAA5;
  --teal-pale:#E1F5EE;
  /* --galapagos: Anjali brand colour for the Engagement section banner
   * across all pages (per General tab of the SIPI editorial google doc,
   * confirmed 2026-05-18). Slightly lighter than --teal-dark (#085041)
   * and with a touch more blue. Used as background for .sec--cta-engage. */
  --galapagos:#0D3A41;
  /* 40% opacity tint of --galapagos for the Finance page engagement
   * banner per Anjali docx ("Background colour: Galapagos 40%"). */
  --galapagos-40:rgba(13,58,65,0.4);
  --gold:#B8973E; --gold-pale:#F5EDD4;
  /* --gold-text: WCAG-AA compliant variant of --gold for text-on-light
   * contexts. The brand gold (#B8973E) measures only 2.78 contrast on
   * white — fails the 4.5 threshold for normal text and 3.0 for large
   * text. This darker shade keeps the same hue but lifts contrast to
   * ~4.7 on white and ~4.4 on --off (#F5F5F3). Used by `.lbl` and `em`
   * by default in base.css; the original --gold is restored on dark
   * surfaces (.ph header, .tao-overlay, .flip-back, .foot, .dark, etc.)
   * via explicit overrides because gold-on-navy already passes AA. */
  --gold-text:#7E6418;
  --yellow:#F5C800;
  --off:#F5F5F3; --off2:#EDE8DF;
  --white:#fff;
  --text:#1a1a1a; --heading:#0D2E2E; --muted:#666;
  --border:#E0DDD8; --border2:#d4cfc5;
  --food:#2a6e45; --health:#7a1640; --circ:#1a4f7a; --narr:#4a3278;
  --r:2px;
  --ff-display:'Cormorant Garamond',Georgia,serif;
  --ff-body:'DM Sans',system-ui,sans-serif;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --con:1320px;
  --gut:48px;

  /* ── v2 ALIASES (--sipi-* namespace, palette doc 2026-04-29) ── */
  --sipi-navy:var(--navy);
  --sipi-navy-mid:var(--navy2);
  --sipi-navy-deep:var(--navy-deep);
  --sipi-teal:var(--teal);
  --sipi-teal-lt:var(--teal-lt);
  --sipi-teal-pale:var(--teal-pale);
  --sipi-teal-dark:var(--teal-dark);
  --sipi-galapagos:var(--galapagos);
  --sipi-yellow:var(--yellow);
  --sipi-gold:var(--gold);
  --sipi-gold-pale:var(--gold-pale);
  --sipi-heading:var(--heading);
  --sipi-text:var(--text);
  --sipi-muted:var(--muted);
  --sipi-off:var(--off);
  --sipi-beige:var(--off2);
  --sipi-border:var(--border);
  --sipi-health:var(--health);
  --sipi-food:var(--food);
  --sipi-circ:var(--circ);
  --sipi-narr:var(--narr);
}
