/* ==========================================================================
   Treat Your Teacher -- Typography (typography.css)
   Font imports, type scale, heading/body styles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
}

h1 {
  font-size: var(--size-h1);
  font-weight: 800;
  line-height: 1.15;
}

h2 {
  font-size: var(--size-h2);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--size-h3);
  font-weight: 700;
  line-height: 1.3;
}

h4 {
  font-size: var(--size-h4);
  font-weight: 700;
  line-height: 1.4;
}

/* ---- Display (hero headline) ---- */
.display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* ---- Body sizes ---- */
.text-lg {
  font-size: var(--size-body-lg);
  line-height: 1.6;
}

.text-sm {
  font-size: var(--size-sm);
  line-height: 1.5;
}

.text-xs {
  font-size: var(--size-xs);
  line-height: 1.5;
}

/* ---- Font weight utilities ---- */
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* ---- Text color utilities ---- */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-coral     { color: var(--coral); }
.text-white     { color: var(--white); }

/* ---- Text alignment ---- */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ---- Links ---- */
a.link {
  color: var(--coral);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(244, 132, 95, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) ease;
}

a.link:hover {
  text-decoration-color: var(--coral);
}

/* ---- Italic / emphasis in headings ---- */
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--coral);
}

/* ---- Paragraph line-height consistency ---- */
p {
  line-height: 1.65;
}