/* === BASE TYPOGRAPHY ===
   Element-level type styles. Font families, sizes, and weights
   are tokens defined in css/theme/typography.css (the Google
   Fonts @import lives there too). */

body {
  font-family: var(--font-content);
  font-size: var(--font-size-base); /* ~16px */
  line-height: var(--line-height-body);
  color: var(--color-body-text);
  background-color: var(--color-bg);
}

/* === HEADINGS === */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading-text);
  margin: 2rem 0 1rem;
  line-height: var(--line-height-tight);
}

h1 {
  font-size: 2.75rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-xl);
}

h4,
h5,
h6 {
  font-size: 1.2rem;
}

/* === Article Meta (bylines, dates) === */

.meta {
  font-size: 0.875rem;
  color: var(--color-subtle-text);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-ui);
}

/* === Paragraphs & Lists === */

p {
  margin: 1.25rem 0;
}

ul,
ol {
  margin: 1rem 0 1.5rem 2rem;
  padding: 0;
}

blockquote {
  font-style: italic;
  padding-left: var(--space-md);
  margin: 2rem 0;
  color: var(--color-subtle-text);
}

/* === Responsive Scaling === */

@media (max-width: 54rem) {
  h1 {
    font-size: var(--font-size-2xl);
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: var(--font-size-lg);
  }
}