/* ============================================================
   TriTechne — Typography tokens
   Display/headlines:  Saira         (engineered squared grotesque)
   Body/UI:            IBM Plex Sans  (clean technical sans)
   Data/labels/mono:   IBM Plex Mono  (specs, stats, codes)
   NOTE: actual brand fonts are not published; these are the
   closest free substitutes — see fonts.css + readme.md.
   ============================================================ */
:root {
  /* ---- Families --------------------------------------------- */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* ---- Type scale (1.250 major-third-ish, tuned) ------------ */
  --fs-display:   clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem); /* @kind other */ /* 44 → 72 hero */
  --fs-h1:        2.75rem;   /* 44 @kind font */
  --fs-h2:        2rem;      /* 32 @kind font */
  --fs-h3:        1.5rem;    /* 24 @kind font */
  --fs-h4:        1.25rem;   /* 20 @kind font */
  --fs-lg:        1.125rem;  /* 18 @kind font */
  --fs-body:      1rem;      /* 16 @kind font */
  --fs-sm:        0.875rem;  /* 14 @kind font */
  --fs-xs:        0.75rem;   /* 12 @kind font */
  --fs-stat:      clamp(2.5rem, 1.4rem + 4.4vw, 4rem); /* @kind other */ /* big numerals */

  /* ---- Line heights ----------------------------------------- */
  --lh-tight:     1.05; /* @kind font */
  --lh-snug:      1.18; /* @kind font */
  --lh-heading:   1.25; /* @kind font */
  --lh-body:      1.6; /* @kind font */
  --lh-relaxed:   1.75; /* @kind font */

  /* ---- Letter spacing --------------------------------------- */
  --ls-tight:     -0.02em; /* @kind font */
  --ls-normal:    0; /* @kind font */
  --ls-wide:      0.04em; /* @kind font */
  --ls-eyebrow:   0.18em;   /* uppercase eyebrows / labels @kind font */

  /* ============================================================
     SEMANTIC TEXT ROLES
     ============================================================ */
  --text-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display);
  --text-h1:      var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --text-h2:      var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --text-h3:      var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display);
  --text-h4:      var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-sans);
  --text-lead:    var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-sans);
  --text-body:    var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-small:   var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-sans);
}

/* Eyebrow / kicker label — the brand's signature uppercase mono-ish tag */
.tt-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}