/* Typography — §5. Playfair Display for headings/quotes, Inter everywhere else. */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

h1, h2, h3,
.font-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h1, .hero-h1 {
  font-size: var(--text-hero-h1-mobile);
}

h2, .section-h2 {
  font-size: var(--text-h2-mobile);
}

h3, .subheading-h3 {
  font-size: var(--text-h3-mobile);
}

@media (min-width: 768px) {
  h1, .hero-h1 {
    font-size: var(--text-hero-h1);
  }
  h2, .section-h2 {
    font-size: var(--text-h2);
  }
  h3, .subheading-h3 {
    font-size: var(--text-h3);
  }
}

p {
  font-size: var(--text-body-mobile);
}

@media (min-width: 768px) {
  p {
    font-size: var(--text-body);
  }
}

.eyebrow,
nav,
.label {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-nav);
  font-weight: 500;
}

.scripture-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-quote-mobile);
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 768px) {
  .scripture-quote {
    font-size: var(--text-quote);
  }
}

a {
  transition: color var(--transition-fast);
}

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}

::selection {
  background-color: var(--color-accent-gold);
  color: var(--color-text-inverse);
}