/* ==========================================================================
   COLORS - design tokens + background / text utilities.
   Background classes are produced by the paragraph templates from the
   `field_background_color` value: bg-color-{value}.
   Legacy values of the GE Paris config (black, white, bg-dotted) are mapped
   so existing options keep working.
   ========================================================================== */

/* Backgrounds ------------------------------------------------------------ */
.bg-color-navy, .bg-color-black { background-color: var(--epsa-navy); color: var(--epsa-ink); }
.bg-color-navy-light { background-color: var(--epsa-navy-light); color: var(--epsa-ink); }
.bg-color-navy-mid { background-color: var(--epsa-navy-mid); color: var(--epsa-ink); }
.bg-color-navy-deep { background-color: var(--epsa-navy-deep); color: var(--epsa-ink); }
.bg-color-gold { background-color: var(--epsa-gold); color: var(--epsa-navy); }
.bg-color-light, .bg-color-white { background-color: var(--epsa-ink); color: var(--epsa-navy); }
.bg-color-bg-dotted {
  background-color: var(--epsa-navy-light);
  background-image: radial-gradient(rgba(251, 250, 248, 0.14) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* Light backgrounds: restore dark text for headings and copy. */
.bg-color-light :is(h1, h2, h3, h4, h5, h6, p, li, strong),
.bg-color-white :is(h1, h2, h3, h4, h5, h6, p, li, strong),
.bg-color-gold :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: var(--epsa-navy); }

/* Text -------------------------------------------------------------------- */
.text-color-gold { color: var(--epsa-gold); }
.text-color-ink { color: var(--epsa-ink); }
.text-color-soft { color: var(--epsa-text); }
.text-color-muted { color: var(--epsa-muted); }
.text-color-navy { color: var(--epsa-navy); }