/**
 * Editorial typography primitives.
 * Font files are registered through theme.json so the editor and front end
 * share the same source and fallback stacks.
 */

body {
  color: var(--color-text-primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
  max-width: var(--heading-measure);
  margin-block: 0 0.55em;
  color: var(--color-brand-primary);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: var(--wp--preset--font-size--heading-1);
}

h2 {
  font-size: var(--wp--preset--font-size--heading-2);
}

h3 {
  font-size: var(--wp--preset--font-size--heading-3);
}

h4 {
  font-size: var(--wp--preset--font-size--heading-4);
}

:where(h5, h6) {
  font-size: var(--wp--preset--font-size--lead);
}

:where(h1, h2, h3, h4, h5, h6) em {
  font-style: italic;
  font-weight: 500;
}

p,
li {
  text-wrap: pretty;
}

p {
  max-width: var(--text-measure);
}

.is-style-display,
.type-display {
  font-size: var(--wp--preset--font-size--display);
  line-height: 0.98;
}

.type-lead {
  max-width: 58ch;
  color: var(--color-text-secondary);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
}

.type-eyebrow,
.type-label {
  display: block;
  color: var(--color-accent-on-light);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.has-countess-blue-background-color :where(h1, h2, h3, h4, h5, h6),
.has-moss-green-background-color :where(h1, h2, h3, h4, h5, h6),
.has-spiced-chestnut-background-color :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-on-dark);
}

.has-countess-blue-background-color :where(.type-eyebrow, .type-label),
.has-moss-green-background-color :where(.type-eyebrow, .type-label),
.has-spiced-chestnut-background-color :where(.type-eyebrow, .type-label) {
  color: var(--color-accent-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}