/* ============================================================
   Linax / Simac — Typography tokens
   Display: Saira (geometric, technical — pairs with SIMAC wordmark)
   Body:    IBM Plex Sans (scientific, precise, neutral)
   Mono:    IBM Plex Mono (measurements, beam data, code)
   ============================================================ */
:root {
  /* Families */
  --font-display: "Saira", "Saira Semi Condensed", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex 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 */

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  3.75rem;   /* 60px */
  --text-5xl:  4.75rem;   /* 76px */

  /* Line heights */
  --leading-tight: 1.05; /* @kind other */
  --leading-snug: 1.2; /* @kind other */
  --leading-normal: 1.5; /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;   /* product descriptors (BEAM MODEL) */
  --tracking-caps: 0.16em;

  /* Semantic roles */
  --type-display-font: var(--font-display);
  --type-display-weight: var(--fw-bold);
  --type-heading-font: var(--font-display);
  --type-heading-weight: var(--fw-semibold);
  --type-body-font: var(--font-body);
  --type-eyebrow-tracking: var(--tracking-wider);
}

/* ============================================================
   Type role utility classes (optional convenience)
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.t-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}