/* ============================================================
   TYPOGRAPHY
   Display: Space Grotesk (600/700) — tight tracking, large scale
   Body:    Inter (400/500)
   Mono:    JetBrains Mono (400/500) — numbers, code, terminal, labels
   Scale is fluid via clamp().
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* --- Fluid scale (clamp) --- */
  --fs-display: clamp(3.5rem, 8vw, 7rem); /* @kind font */
  --fs-h1: clamp(2.6rem, 5vw, 4.25rem); /* @kind font */
  --fs-h2: clamp(2rem, 3.4vw, 3rem); /* @kind font */
  --fs-h3: clamp(1.25rem, 1.8vw, 1.6rem); /* @kind font */
  --fs-lead: clamp(1.15rem, 1.6vw, 1.5rem); /* @kind font */
  --fs-body: clamp(1rem, 1.1vw, 1.15rem); /* @kind font */
  --fs-small: 0.9375rem; /* @kind font */
  --fs-data: clamp(0.85rem, 1vw, 0.95rem); /* @kind font */
  --fs-eyebrow: 0.8125rem; /* @kind font */
  --fs-micro: 0.75rem; /* @kind font */

  /* --- Line heights --- */
  --lh-display: 1.02; /* @kind font */
  --lh-tight: 1.1; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-mono: 1.5; /* @kind font */

  /* --- Letter spacing --- */
  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.02em; /* @kind font */
  --ls-body: 0; /* @kind font */
  --ls-eyebrow: 0.16em; /* @kind font */
  --ls-mono: 0.01em; /* @kind font */
}

/* --- Optional utility classes (tokens are the source of truth) --- */
.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);
  color: var(--text);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}
.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-body);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-data);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-mono);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}