/* ──────────────────────────────────────────────────────────────
   MITEC Design System — Typography tokens
   Display set on Geist (GT Walsheim substitute) with aggressive
   negative tracking. Body on Inter Variable with the brand's
   OpenType character variants enabled everywhere.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Families ─────────────────────────────────────────────── */
  --font-display: 'Geist', 'GT Walsheim Medium', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* The brand body voice — keep these on wherever Inter appears */
  --font-feature-body: 'cv01', 'cv05', 'cv09', 'cv11', 'ss03', 'ss07';

  /* ── Display scale (Geist, weight 500, hard negative tracking) ─ */
  --type-display-xxl-size: 110px;
  --type-display-xxl-line: 0.85;
  --type-display-xxl-track: -5.5px;

  --type-display-xl-size: 85px;
  --type-display-xl-line: 0.95;
  --type-display-xl-track: -4.25px;

  --type-display-lg-size: 62px;
  --type-display-lg-line: 1.0;
  --type-display-lg-track: -3.1px;

  --type-display-md-size: 32px;
  --type-display-md-line: 1.13;
  --type-display-md-track: -1px;

  /* ── Text scale (Inter) ───────────────────────────────────── */
  --type-headline-size: 22px;
  --type-headline-weight: 700;
  --type-headline-line: 1.2;
  --type-headline-track: -0.8px;

  --type-subhead-size: 24px;
  --type-subhead-weight: 400;
  --type-subhead-line: 1.3;
  --type-subhead-track: -0.01px;

  --type-body-lg-size: 18px;
  --type-body-lg-line: 1.3;
  --type-body-lg-track: -0.18px;

  --type-body-size: 15px;
  --type-body-line: 1.3;
  --type-body-track: -0.15px;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 500;
  --type-body-sm-line: 1.4;
  --type-body-sm-track: -0.14px;

  --type-caption-size: 13px;
  --type-caption-weight: 500;
  --type-caption-line: 1.2;
  --type-caption-track: -0.13px;

  --type-micro-size: 12px;
  --type-micro-line: 1.2;
  --type-micro-track: -0.12px;

  --type-button-size: 14px;
  --type-button-weight: 500;
  --type-button-line: 1;
  --type-button-track: -0.14px;
}

/* ── Reusable type classes ──────────────────────────────────── */
.t-display-xxl, .t-display-xl, .t-display-lg, .t-display-md {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
  text-wrap: balance;
}
.t-display-xxl { font-size: var(--type-display-xxl-size); line-height: var(--type-display-xxl-line); letter-spacing: var(--type-display-xxl-track); }
.t-display-xl  { font-size: var(--type-display-xl-size);  line-height: var(--type-display-xl-line);  letter-spacing: var(--type-display-xl-track); }
.t-display-lg  { font-size: var(--type-display-lg-size);  line-height: var(--type-display-lg-line);  letter-spacing: var(--type-display-lg-track); }
.t-display-md  { font-size: var(--type-display-md-size);  line-height: var(--type-display-md-line);  letter-spacing: var(--type-display-md-track); }

.t-headline, .t-subhead, .t-body-lg, .t-body, .t-body-sm, .t-caption, .t-micro, .t-button {
  font-family: var(--font-body);
  font-feature-settings: var(--font-feature-body);
}
.t-headline { font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); line-height: var(--type-headline-line); letter-spacing: var(--type-headline-track); color: var(--color-ink); }
.t-subhead  { font-size: var(--type-subhead-size);  font-weight: var(--type-subhead-weight);  line-height: var(--type-subhead-line);  letter-spacing: var(--type-subhead-track); color: var(--color-ink); }
.t-body-lg  { font-size: var(--type-body-lg-size);  line-height: var(--type-body-lg-line);  letter-spacing: var(--type-body-lg-track); }
.t-body     { font-size: var(--type-body-size);     line-height: var(--type-body-line);     letter-spacing: var(--type-body-track); }
.t-body-sm  { font-size: var(--type-body-sm-size);  font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-line); letter-spacing: var(--type-body-sm-track); }
.t-caption  { font-size: var(--type-caption-size);  font-weight: var(--type-caption-weight); line-height: var(--type-caption-line); letter-spacing: var(--type-caption-track); }
.t-micro    { font-size: var(--type-micro-size);    line-height: var(--type-micro-line);    letter-spacing: var(--type-micro-track); }
.t-button   { font-size: var(--type-button-size);   font-weight: var(--type-button-weight); line-height: var(--type-button-line); letter-spacing: var(--type-button-track); }

.t-eyebrow {
  font-family: var(--font-body);
  font-feature-settings: var(--font-feature-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
