:root{
  /* --- base palette (verbatim from the SWI template) --- */
  --swi-navy:#14377D;
  --swi-navy-deep:#0E2757;
  --swi-gold:#F2B50A;
  --swi-red:#D81E27;
  --swi-ink:#1A1F26;
  --swi-slate:#55606E;
  --swi-muted:#8A93A0;
  --swi-border:#E3E7EE;
  --swi-pale-blue:#C9D6F5;
  --swi-white:#FFFFFF;
  --swi-paper:#F7F8FB;

  /* wayfinder product identity (only on WAYFINDER slides) */
  --wayfinder-blue:#14377D;
  --wayfinder-red:#D81E27;

  /* --- semantic aliases: light mode (content slides / app surfaces) --- */
  /* Rule of the system (from the Haida JV playbook, v5):
     white is the field, gold is the highlight, red is a rare small mark,
     navy is a whole-slide field or a hairline/numeral -- never a card fill on white. */
  --surface-page:var(--swi-white);
  --surface-card:var(--swi-white);
  --surface-sunken:var(--swi-paper);
  --surface-emphasis:var(--swi-navy); /* whole-slide field ONLY -- not a card fill */
  --border-hairline:var(--swi-border);
  --border-strong:var(--swi-navy);
  --text-heading:var(--swi-ink);
  --text-body:var(--swi-slate);
  --text-meta:var(--swi-muted);
  --text-eyebrow:var(--swi-red);
  --text-kicker:var(--swi-red);        /* small bold caps inside a card */
  --text-card-title:var(--swi-ink);    /* card headline: ink by default... */
  --text-card-title-alt:var(--swi-red);/* ...or red, when the card carries no red kicker */
  --text-body-strong:var(--swi-navy);  /* short card body that needs weight */
  --text-figure:var(--swi-navy);
  --text-link:var(--swi-navy);
  --text-link-hover:var(--swi-red);
  --accent:var(--swi-gold);
  --card-rule:var(--swi-gold);         /* the 3px top rule that marks a card */

  /* --- semantic aliases: dark mode (title / section / emphasis) --- */
  --dark-surface-page:var(--swi-navy);
  --dark-text-heading:var(--swi-white);
  --dark-text-body:var(--swi-pale-blue);
  --dark-text-meta:rgba(255,255,255,.55);
  --dark-text-eyebrow:var(--swi-gold);
  --dark-border-hairline:rgba(255,255,255,.18);
  --dark-watermark:rgba(255,255,255,.12);
}

/* Opt-in dark (navy) mode: put data-mode="dark" on any container. */
[data-mode="dark"]{
  --surface-page:var(--dark-surface-page);
  --surface-card:transparent;          /* cards on navy are outlines, not fills */
  --text-heading:var(--dark-text-heading);
  --text-body:var(--dark-text-body);
  --text-meta:var(--dark-text-meta);
  --text-eyebrow:var(--dark-text-eyebrow);
  --text-kicker:var(--swi-gold);
  --text-card-title:var(--swi-white);
  --text-card-title-alt:var(--swi-white); /* red never lands on navy */
  --text-body-strong:var(--swi-white);
  --text-figure:var(--swi-gold);
  --border-hairline:var(--dark-border-hairline);
  --text-link:var(--swi-gold);
  --text-link-hover:var(--swi-white);
  background:var(--surface-page);
  color:var(--text-body);
}