/* ============================================================
   Swatch Four — Typography tokens
   Display / headlines: Josefin Sans (geometric, wide, airy)
   Body / UI:           Nunito (rounded humanist sans)
   Direction: tight headline hierarchy, generous body leading.
   ============================================================ */

:root {
  /* Families */
  --font-display: "Josefin Sans", "Century Gothic", "Futura", sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace; /* @kind font */

  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Fluid type scale — editorial, big headline jumps */
  --text-display: clamp(3rem, 6vw, 5.5rem);   /* hero headline      */
  --text-h1:      clamp(2.25rem, 4vw, 3.5rem);
  --text-h2:      clamp(1.75rem, 2.6vw, 2.5rem);
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;
  --text-lead:    1.25rem;   /* intro paragraph */
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-eyebrow: 0.75rem;   /* uppercase label */

  /* Line heights */
  --lh-tight:   1.02;   /* @kind other */
  --lh-snug:    1.15;   /* @kind other */
  --lh-normal:  1.35;   /* @kind other */
  --lh-relaxed: 1.6;    /* @kind other */

  /* Letter spacing */
  --ls-display:  -0.01em; /* @kind other */
  --ls-tight:   -0.02em;  /* @kind other */
  --ls-normal:   0;        /* @kind other */
  --ls-eyebrow:  0.18em;   /* @kind other */
  --ls-caps:     0.06em;   /* @kind other */
}