/* ============================================================
 * farpa DS · typography scale · v1.0.0
 * ------------------------------------------------------------
 * Escala modular (ratio ~1.250 · "major third").
 * Tamanhos em rem · base 16px.
 * Line-heights calibrados para leitura confortável.
 * ============================================================ */

:root {
  /* ---------- Font size scale ---------- */
  --fs-2xs:  0.625rem;   /* 10px · captions micro */
  --fs-xs:   0.75rem;    /* 12px · meta · footer */
  --fs-sm:   0.875rem;   /* 14px · UI dense */
  --fs-base: 1rem;       /* 16px · body */
  --fs-md:   1.125rem;   /* 18px · body confortável */
  --fs-lg:   1.25rem;    /* 20px · subtítulo */
  --fs-xl:   1.5rem;     /* 24px · h4 · h5 · h6 */
  --fs-2xl:  2rem;       /* 32px · h3 */
  --fs-3xl:  2.5rem;     /* 40px · h2 */
  --fs-4xl:  3rem;       /* 48px · h1 mobile */
  --fs-5xl:  4rem;       /* 64px · h1 desktop · hero */

  /* ---------- Line-heights ---------- */
  --lh-tight:    1.15;   /* hero · display */
  --lh-snug:     1.3;    /* heading */
  --lh-normal:   1.5;    /* UI default */
  --lh-relaxed:  1.6;    /* leitura longa */
  --lh-loose:    1.75;   /* leitura prosa */

  /* ---------- Letter-spacing ---------- */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;

  /* ---------- Font weights ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display-strong: 600;  /* Fraunces hero · weight calibrado opsz alto */

  /* ---------- Display fluid scale (hero) ----------
   * --fs-display-1: clamp mobile 40px → desktop 72px (com headroom 96px) */
  --fs-display-1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-display-2: clamp(2rem, 4vw + 0.5rem, 3.5rem);

  /* ---------- Variation settings · Fraunces opsz ---------- */
  --font-variation-display-hero: "opsz" 144, "wght" 600;
  --font-variation-display-pull: "opsz" 72, "wght" 500;
}

/* ---------- Heading defaults ---------- */
h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);
  margin: 0 0 var(--sp-5);
}
@media (min-width: 768px) {
  h1 { font-size: var(--fs-5xl); }
}

h2 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);
  margin: 0 0 var(--sp-4);
}

h3 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--sp-4);
}

h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-3);
}

h5 {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-3);
}

h6 {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}

p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-4);
  max-width: var(--content-max);
}

small, .meta {
  font-size: var(--fs-sm);
  color: var(--fg-soft);
}