/* ===========================================================================
   Reform — Typography tokens
   ---------------------------------------------------------------------------
   One family does all the work: Montserrat, a geometric grotesque.
     • Headings  — heavy (700/800), tight tracking, confident & massive.
     • Body      — 400/500, comfortable measure, generous air.
     • Eyebrows / logo / tags — UPPERCASE with wide tracking (the REFORM
       wordmark lives at ~0.22em).
   =========================================================================== */

:root {
  /* Families */
  --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Type scale (px) — marketing-grade, large & confident */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  76px;
  --text-8xl:  92px;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing (tracking) */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-eyebrow: 0.18em;   /* eyebrows / categories */
  --tracking-logo:    0.24em;   /* REFORM wordmark */

  /* --- Semantic roles -------------------------------------------------- */
  /* Figma: hero = Montserrat Bold (700); section headings = SemiBold (600);
     body/labels = Medium (500); fine print = Regular (400). */
  --font-display-size:   var(--text-7xl);
  --font-display-weight: var(--weight-bold);
  --font-display-leading:var(--leading-tight);
  --font-display-track:  var(--tracking-tighter);

  --font-h1-size:   var(--text-5xl);
  --font-h1-weight: var(--weight-bold);
  --font-h2-size:   var(--text-4xl);
  --font-h2-weight: var(--weight-semibold);
  --font-h3-size:   var(--text-2xl);
  --font-h3-weight: var(--weight-semibold);
  --font-body-size: var(--text-base);
  --font-body-weight: var(--weight-medium);
  --font-body-leading: var(--leading-relaxed);
}