/* ============================================================
   Tech Rim Standards — Typography
   Headings are SET IN UPPERCASE SAIRA with tight tracking to echo
   the "TECH RIM" wordmark. Body is Archivo. Serif for editorial
   moments. Mono for part numbers / spec tables.
   ============================================================ */
:root {
  /* ---- families ---- */
  --font-display: 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --font-condensed: 'Saira Condensed', 'Saira', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', 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 */

  /* ---- fluid type scale (1.250 major-third-ish) ---- */
  --fs-display: 4.5rem;   /* 72px hero */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.75rem;       /* 28 */
  --fs-h4: 1.375rem;      /* 22 */
  --fs-h5: 1.125rem;      /* 18 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.8125rem;/* 13 */
  --fs-overline: 0.75rem; /* 12 */

  /* ---- line heights ---- */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug:  1.2; /* @kind font */
  --lh-heading: 1.15; /* @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-overline:0.18em;   /* @kind font */
  --ls-mega:    0.28em; /* @kind font */
}

/* ---- ready-made type classes (optional helpers) ---- */
.trs-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-strong);
}
.trs-h1 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight);
  text-transform: uppercase; color: var(--text-strong); }
.trs-h2 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--text-strong); }
.trs-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.trs-overline {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--brand);
}
.trs-body { font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.trs-serif { font-family: var(--font-serif); font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed); color: var(--text-body); }
.trs-mono { font-family: var(--font-mono); font-size: var(--fs-body-sm);
  letter-spacing: 0.01em; color: var(--text-body); }