/* ==========================================================================
   typography.css — Type system
   --------------------------------------------------------------------------
   Cairo across the board. Fluid, balanced, never oversized or clipped.
   Headings use logical text-align: start so they flip correctly RTL ⇄ LTR.
   ========================================================================== */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-body);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: start;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p {
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Reusable typographic helpers
   -------------------------------------------------------------------------- */

/* Section title — the principal heading inside each section */
.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--color-heading);
  letter-spacing: -0.01em;
  max-inline-size: 24ch;       /* Keeps titles from sprawling into long wraps */
}

/* Lead / intro paragraph beneath a section title */
.section-lead {
  font-size: var(--fs-lead);
  color: var(--color-body);
  max-inline-size: 60ch;
  margin-block-start: var(--space-md);
}

/* Eyebrow rule is intentionally NOT defined — eyebrows are banned (§4 rule 5) */

.text-on-dark { color: var(--color-on-dark); }
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-muted); }

/* Emphasis used in headings is a weight shift, never a single-word recolor
   (per §4 rule 6). Use .emph to bump weight without changing hue. */
.emph {
  font-weight: var(--fw-extrabold);
  color: inherit;
}