/* Site palette overrides, loaded after the design-system stylesheet on every page.

   The site swaps the design system's two dark brand colours: Deep Teal
   (#1A8FA0) is the dark-section background, and Night Teal (#1A2B2E) takes
   Deep Teal's accent roles (primary buttons, eyebrows, icons, links, prices).
   Body text stays Night Teal. The design-system files under _ds/ are
   generated, so its semantic tokens are re-pointed here instead; colours
   written directly in the site's JSX/HTML were changed in place. */
:root {
  --color-surface-dark:  var(--helm-deep-teal);
  --color-surface-brand: var(--helm-night-teal);
  --text-accent:         var(--helm-night-teal);
  --brand-primary:       var(--helm-night-teal);
  --brand-primary-hover: #0E191B; /* Night Teal, darkened for hover/press */
  --color-success:       var(--helm-night-teal);
  --focus-ring:          var(--helm-night-teal);
  --shadow-focus:        0 0 0 3px rgba(26,43,46,0.35);
}

/* Eyebrow labels sitting directly on a deep teal section. The design system's
   Eyebrow sets its colour inline (yellow for tone="accent"), which is too faint
   on deep teal, so pass className="helm-eyebrow-on-teal" there. */
.helm-eyebrow-on-teal span { color: var(--helm-white) !important; }

/* Sections with a deep teal background (hero, quote, call to action, footers,
   404). Pale Sky and Warm Grey text, designed for Night Teal, is too faint on
   Deep Teal, so inside these sections both resolve to Facade White. Panels
   nested inside keep working: white reads well on their darker backgrounds. */
.helm-on-teal {
  --helm-pale-sky:  var(--helm-facade-white);
  --helm-warm-grey: var(--helm-facade-white);
}