/* Shared navigation and labels for the landing and editorial pages. */
:root {
  --brand-navigation-ink: #103e3a;
  --brand-label-ink: #405d54;
  --brand-navigation-accent: #11715a;
}

:root:is([data-fh-theme="dark"], [data-theme="dark"]) {
  --brand-navigation-ink: #e5f6ed;
  --brand-label-ink: #b9d1c5;
  --brand-navigation-accent: #a7e8cf;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-fh-theme="light"], [data-theme="light"]) {
    --brand-navigation-ink: #e5f6ed;
    --brand-label-ink: #b9d1c5;
    --brand-navigation-accent: #a7e8cf;
  }
}

html body :is(.nav-links, .header-links) a:not(.button, .product-link) {
  color: var(--brand-navigation-ink);
  font: 700 14px/1.4 "Nunito Sans", system-ui, sans-serif;
  text-underline-offset: .22em;
}

html body :is(.nav-links, .header-links) a:not(.button, .product-link):hover {
  color: var(--brand-navigation-accent);
  text-decoration: underline;
}

html body :is(.nav-links, .header-links) a:not(.button, .product-link):focus-visible {
  outline: 2px solid var(--brand-navigation-accent);
  outline-offset: 3px;
}

html body :is(.hero .eyebrow, .section-kicker, .reading-path .eyebrow, .card .eyebrow, .story .eyebrow, .blog-brand span) {
  color: var(--brand-label-ink);
  font: 800 12px/1.4 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* This section uses the deep teal surface in both themes. */
html body .example-section .section-kicker {
  color: #b9d1c5;
}