/* DPDPA Forum — typography.
   Two faces, one rule. Funnel Display carries display + the upper headings;
   it has presence at scale without personality. Inter carries body + UI.
   Authority comes from the hierarchy, not the letterforms.
   Scale transcribed exactly from the Institutional Ramp specimen (04-Typography). */

:root {
  --font-display: "Funnel Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-event: Outfit, "Funnel Display", sans-serif;

  /* Named text styles — Category/Size */
  --type-display-l-size: 56px;
  --type-display-l-line: 1.06;
  --type-display-l-track: -0.018em;
  --type-display-l-weight: 700;

  --type-heading-xl-size: 40px;
  --type-heading-xl-line: 1.12;
  --type-heading-xl-track: -0.014em;
  --type-heading-xl-weight: 600;

  --type-heading-l-size: 32px;
  --type-heading-l-line: 1.18;
  --type-heading-l-track: -0.01em;
  --type-heading-l-weight: 600;

  --type-heading-m-size: 24px;
  --type-heading-m-line: 1.28;
  --type-heading-m-track: -0.006em;
  --type-heading-m-weight: 600;

  --type-heading-s-size: 20px;
  --type-heading-s-line: 1.35;
  --type-heading-s-weight: 600;

  --type-body-l-size: 18px;
  --type-body-l-line: 1.62;

  --type-body-m-size: 16px;
  --type-body-m-line: 1.62;

  --type-body-s-size: 14px;
  --type-body-s-line: 1.56;

  --type-label-m-size: 14px;
  --type-label-m-line: 1.2;
  --type-label-m-track: 0.08em;

  --type-label-s-size: 12px;
  --type-label-s-line: 1.2;
  --type-label-s-track: 0.1em;

  --type-caption-size: 12px;
  --type-caption-line: 1.45;
}

/* ── Utility classes — Category/Size ────────────────────────────── */
.fig-display-l {
  font-family: var(--font-display);
  font-weight: var(--type-display-l-weight);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-line);
  letter-spacing: var(--type-display-l-track);
  color: var(--text-primary);
}
.fig-heading-xl {
  font-family: var(--font-display);
  font-weight: var(--type-heading-xl-weight);
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
  letter-spacing: var(--type-heading-xl-track);
  color: var(--text-primary);
}
.fig-heading-l {
  font-family: var(--font-display);
  font-weight: var(--type-heading-l-weight);
  font-size: var(--type-heading-l-size);
  line-height: var(--type-heading-l-line);
  letter-spacing: var(--type-heading-l-track);
  color: var(--text-primary);
}
.fig-heading-m {
  font-family: var(--font-display);
  font-weight: var(--type-heading-m-weight);
  font-size: var(--type-heading-m-size);
  line-height: var(--type-heading-m-line);
  letter-spacing: var(--type-heading-m-track);
  color: var(--text-primary);
}
.fig-heading-s {
  font-family: var(--font-sans);
  font-weight: var(--type-heading-s-weight);
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line);
  color: var(--text-primary);
}
.fig-body-l {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-line);
  color: var(--text-primary);
}
.fig-body-m {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-line);
  color: var(--text-primary);
}
.fig-body-m-emphasis {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-line);
  color: var(--text-primary);
}
.fig-body-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-line);
  color: var(--text-primary);
}
.fig-label-m {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-label-m-size);
  line-height: var(--type-label-m-line);
  letter-spacing: var(--type-label-m-track);
  text-transform: uppercase;
  color: var(--text-primary);
}
.fig-label-s {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-label-s-size);
  line-height: var(--type-label-s-line);
  letter-spacing: var(--type-label-s-track);
  text-transform: uppercase;
  color: var(--text-primary);
}
.fig-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-muted);
}