/* ============================================================
   Biome.blue — Typography tokens
   Display  : Audiowide  (logotype, hero numerals — UPPERCASE only)
   Heading  : Genos       (techy humanist grotesque; tight tracking)
   Body     : Hanken Grotesk (readable long-form — Google substitute)
   Mono     : Space Mono  (sensor data, blueprint labels, technical)
   ============================================================ */

:root {
  --font-display: 'Audiowide', 'Genos', system-ui, sans-serif;
  --font-heading: 'Genos', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Genos runs tall & a touch narrow — bump its size when used as a
     heading; these are the working weights. */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (1.250 major-third, 16px base) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  46px;
  --text-4xl:  60px;
  --text-5xl:  78px;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* mono labels / eyebrows */
  --tracking-display: 0.02em;
}

/* ---- Ready-made type roles (optional helpers) ---- */
.bb-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.bb-h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.bb-h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.bb-h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.bb-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.bb-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.bb-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--text-body);
}
.bb-gradient-text {
  background: var(--bb-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}