:root{
/* ============================================================
   THE FIVE — locked. One hex per color.
   ============================================================ */
--axo-teal:#0D5C63;   /* Caribbean Current. Primary: dominant fields, headings, links */
--axo-sage:#73BA9B;   /* Cambridge Blue. Secondary: fields, biological elements in figures */
--axo-rose:#DB6C79;   /* Bright Pink. ACCENT ONLY: rules, flags, emphasis.
                         Never a field. Never body text. */
--axo-snow:#F9F4F5;   /* Snow. Light ground */
--axo-white:#FFFFFF;  /* Surfaces and cards */

/* RETIRED. Ships in every current icon/favicon export and the slide master fill.
   Finding 04: regenerate all exports from --axo-teal. Never use in new work. */
--axo-teal-retired:#104950;

/* ============================================================
   EXTENDED TOKENS — promoted from the illustration set, already deployed.
   Documented so nobody invents a sixteenth green.
   ============================================================ */
--ink:#16302F;         /* Body text. 12.9:1 on Snow */
--text-muted-base:#4C5D5B;  /* Secondary text. 6.4:1 on Snow */
--text-faint-base:#5F706D;  /* Labels, captions. 4.8:1 on Snow */
--teal-deep:#0A4C52;   /* Field gradients — the far end of the teal field */
--teal-lift:#12727B;   /* Hover, active */
--teal-tint:#9CC5C8;   /* Dark-theme marks */
--sage-tint:#9FD3BB;   /* Highlights on teal */
--sage-ink:#2F6B52;    /* Sage text on light */
--rose-ink:#A34754;    /* Rose text on light */
--rose-tint:#EE9AA5;   /* Dark-theme rose text */

/* Superseded by the two AA-passing text tokens above. The illustration set's
   #5B6E6C and #8A9997 measure 2.7:1 for small labels and fail WCAG AA. */
--text-muted-failing:#5B6E6C;
--text-faint-failing:#8A9997;

/* Deep green field. The "teal OR sage" half of the field-color rule. */
--field-green:#245C48;
--field-green-deep:#1B4636;

/* ============================================================
   SEMANTIC — light theme. Overridden wholesale in theme-dark.css.
   ============================================================ */
--surface-page:#F9F4F5;
--surface-card:#FFFFFF;
--surface-sunken:#F2EEEF;
--surface-overlay:rgba(14,29,28,.62);

--text-primary:var(--ink);
--text-secondary:var(--text-muted-base);
--text-tertiary:var(--text-faint-base);
--text-accent:var(--axo-teal);
--text-link:var(--axo-teal);
--text-link-hover:var(--teal-lift);
--text-on-field:#EAF3F2;
--text-on-field-muted:#B8DCD3;
--text-on-field-hi:var(--sage-tint);
--text-inverse:#FFFFFF;

--border-subtle:rgba(13,92,99,.15);
--border-strong:rgba(13,92,99,.30);
--border-accent:var(--axo-teal);
--border-on-field:rgba(159,211,187,.34);

--accent-soft:rgba(13,92,99,.07);
--sage-soft:rgba(115,186,155,.22);
--rose-soft:rgba(219,108,121,.13);

/* Dominant fields — the field-color rule. Rose is absent by design. */
--field-teal:linear-gradient(160deg,#0D5C63 0%,#0A4C52 100%); /* @kind color */
--field-sage:#73BA9B;
--field-green-grad:linear-gradient(160deg,#245C48 0%,#1B4636 100%); /* @kind color */

--action-primary:var(--axo-teal);
--action-primary-hover:var(--teal-lift);
--action-primary-active:var(--teal-deep);
--action-critical:var(--rose-ink);
--focus-ring:var(--axo-sage);

/* Status. There is no amber in the five — adding a sixth hue is a brand
   decision, not a design-system one. Sage positive, rose critical, teal info. */
--status-positive:var(--sage-ink);
--status-positive-surface:var(--sage-soft);
--status-critical:var(--rose-ink);
--status-critical-surface:var(--rose-soft);
--status-info:var(--axo-teal);
--status-info-surface:var(--accent-soft);

/* Severity — one ordered hue ramp off rose, for audit and priority tables. */
--severity-1:#A34754;
--severity-2:#C57F88;
--severity-3:#DFBEC3;
--severity-4:rgba(13,92,99,.30);

/* Diagram roles. Mechanism figures are vector and palette-only. */
--diagram-ink:var(--ink);
--diagram-line:rgba(13,92,99,.32);
--diagram-line-soft:rgba(13,92,99,.14);
--diagram-mark:var(--axo-teal);
--diagram-axo:var(--sage-ink);
--diagram-alert:var(--rose-ink);
--diagram-legacy:var(--text-muted-base);
--diagram-fill-teal:rgba(13,92,99,.07);
--diagram-fill-sage:rgba(115,186,155,.24);
--diagram-fill-rose:rgba(219,108,121,.13);
--diagram-fill-flat:rgba(13,92,99,.04);
--diagram-hollow:#FFFFFF;
}
