/* ============================================================
   MatchMatters — Typography tokens
   Brand face: "Funnel Display" (Google Fonts, freely embeddable).
   Loaded from Google Fonts here; self-host the woff2 for production.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Families ------------------------------------------- */
  --font-display: "Funnel Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Funnel Display", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Weights ----------------------------------- @kind font */
  --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-heavy:    800; /* @kind font */

  /* ---- Type scale (px — matchmatters runs large & bold) --- */
  --fs-display:  clamp(2.6rem, 4.4vw, 3.75rem); /* @kind font */
  /* Was een vaste 2.5rem. Op 390 px liep een lange titel als PRIVACYVERKLARING
     daarmee buiten het scherm (gemeten: 450 px breed op een viewport van 390).
     Op desktop blijft de bovengrens exact dezelfde 40 px. */
  --fs-h1:       clamp(1.9rem, 6.2vw, 2.5rem);   /* max 40px — uppercase, 800 */
  --fs-h2:       1.75rem;  /* 28px — 700 */
  --fs-h3:       1.375rem; /* 22px — 700 */
  --fs-h4:       1.125rem; /* 18px — 600 */
  --fs-stat:     2.5rem;   /* big number in stat boxes */
  --fs-lead:     1.125rem; /* 18px lead paragraph */
  --fs-body:     1rem;     /* 16px */
  --fs-small:    0.875rem; /* 14px */
  --fs-xs:       0.75rem;  /* 12px — labels, badges */

  /* ---- Line heights ------------------------------ @kind font */
  --lh-display:  1.02; /* @kind font */
  --lh-heading:  1.12; /* @kind font */
  --lh-snug:     1.3;  /* @kind font */
  --lh-body:     1.6;  /* @kind font */

  /* ---- Letter spacing ---------------------------- @kind font */
  --ls-display:  -0.01em;  /* @kind font */
  --ls-caps:     0.04em;   /* @kind font */
  --ls-body:     0;        /* @kind font */
}

/* ---- Heading helpers (opt-in classes) --------------------- */
.mm-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
.mm-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0;
}
.mm-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin: 0;
}