body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-ivory);
}

h1, h2, h3, .font-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-ink);
}

h1 { font-size: var(--text-h1); line-height: 1.1; }
h2 { font-size: var(--text-h2); line-height: 1.2; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; }

.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1.05;
}

.text-body-lg { font-size: var(--text-body-lg); line-height: 1.6; }
.text-small { font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-muted); }

.text-eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-rust);
}

/* For an eyebrow label with a leading icon (cart, checkout, etc.) — lives
   here (loaded on every page via head.ejs) rather than a page-specific
   stylesheet, so it works regardless of which page's CSS is loaded.
   Selector is `span.text-eyebrow--icon` (not just `.text-eyebrow--icon`)
   deliberately: .section-heading__eyebrow (content-blocks.css, loaded
   after this file) also sets display: block on the same element, and at
   equal specificity the later rule in the stylesheet wins regardless of
   which one "looks more specific to the feature" — the extra element-type
   selector here is what actually wins the tie, not source order. */
span.text-eyebrow--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.text-muted { color: var(--color-ink-muted); }