/* ============================================================
   TYPOGRAPHY — Grupo Martec
   Roles: Display sans (Space Grotesk) · Body sans (Hanken
   Grotesk) · Mono (JetBrains Mono — telemetry, labels, code).
   Strong weight contrast between display and body, tight
   display tracking (polsia-inspired confident grotesque).
   ============================================================ */

:root {
  /* families */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* weights */
  --fw-regular: 400;  /* @kind other */
  --fw-medium:  500;  /* @kind other */
  --fw-semibold:600;  /* @kind other */
  --fw-bold:    700;  /* @kind other */
  --fw-black:   800;  /* @kind other */

  /* fluid type scale (mobile-first, clamps to desktop) */
  --fs-display: clamp(3rem, 1.6rem + 6vw, 6rem);        /* @kind other */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* @kind other */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);  /* @kind other */
  --fs-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.625rem);  /* @kind other */
  --fs-body-lg: 1.1875rem;  /* @kind other */
  --fs-body:    1rem;       /* @kind other */
  --fs-body-sm: 0.9375rem;  /* @kind other */
  --fs-caption: 0.8125rem;  /* @kind other */
  --fs-eyebrow: 0.75rem;    /* @kind other */

  /* line-heights */
  --lh-display: 0.98;  /* @kind other */
  --lh-tight:   1.08;  /* @kind other */
  --lh-snug:    1.25;  /* @kind other */
  --lh-body:    1.6;   /* @kind other */
  --lh-relaxed: 1.7;   /* @kind other */

  /* tracking */
  --ls-display: -0.03em;  /* @kind other */
  --ls-heading: -0.02em;  /* @kind other */
  --ls-body:    0;        /* @kind other */
  --ls-eyebrow: 0.18em;   /* @kind other */
  --ls-mono:    0.02em;   /* @kind other */
}

/* ---- Specimen helper classes (used by cards / kits) ---- */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mono);
}