/* Botnest typography — Freight Sans (UI) / Freight Text (reading),
   Alegreya Sans / Alegreya on fallback. Tuned for hours-long use:
   15px UI base, 16px reading base, generous line heights,
   restrained-but-confident bold headings. */

:root {
  --bn-text-display: 40px;
  --bn-text-h1: 30px;
  --bn-text-h2: 24px;
  --bn-text-h3: 20px;
  --bn-text-h4: 17px;
  --bn-text-body: var(--bn-font-body); /* 15px comfortable / 14px compact */
  --bn-text-reading: 16px;
  --bn-text-small: var(--bn-font-small);
  --bn-text-tiny: 12px;

  --bn-leading-tight: 1.25;
  --bn-leading-body: 1.55;
  --bn-leading-reading: 1.7;

  --bn-tracking-tight: -0.01em;
  --bn-tracking-caps: 0.09em;

  --bn-weight-regular: 400;
  --bn-weight-medium: 500;
  --bn-weight-bold: 700;
  --bn-weight-heavy: 800;
}

html, body {
  font-family: var(--bn-font-ui);
  font-size: var(--bn-text-body);
  line-height: var(--bn-leading-body);
  color: var(--bn-text);
  background: var(--bn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Semantic class helpers (match component variant names) ---- */
.bn-display, .bn-h1, .bn-h2, .bn-h3, .bn-h4,
h1, h2, h3, h4 { color: var(--bn-text); margin: 0; text-wrap: pretty; }

.bn-display     { font: var(--bn-weight-heavy) var(--bn-text-display)/1.15 var(--bn-font-ui); letter-spacing: var(--bn-tracking-tight); }
.bn-h1, h1      { font: var(--bn-weight-bold) var(--bn-text-h1)/1.2 var(--bn-font-ui); letter-spacing: var(--bn-tracking-tight); }
.bn-h2, h2      { font: var(--bn-weight-bold) var(--bn-text-h2)/1.25 var(--bn-font-ui); letter-spacing: var(--bn-tracking-tight); }
.bn-h3, h3      { font: var(--bn-weight-bold) var(--bn-text-h3)/1.3 var(--bn-font-ui); }
.bn-h4, h4      { font: var(--bn-weight-bold) var(--bn-text-h4)/1.35 var(--bn-font-ui); }

.bn-body    { font: var(--bn-weight-regular) var(--bn-text-body)/var(--bn-leading-body) var(--bn-font-ui); color: var(--bn-text); }
.bn-reading { font: var(--bn-weight-regular) var(--bn-text-reading)/var(--bn-leading-reading) var(--bn-font-reading); color: var(--bn-text); max-width: 68ch; text-wrap: pretty; }
.bn-small   { font: var(--bn-weight-regular) var(--bn-text-small)/1.5 var(--bn-font-ui); color: var(--bn-text-2); }
.bn-tiny    { font: var(--bn-weight-regular) var(--bn-text-tiny)/1.45 var(--bn-font-ui); color: var(--bn-text-3); }

.bn-overline {
  font: var(--bn-weight-bold) var(--bn-text-tiny)/1.4 var(--bn-font-ui);
  letter-spacing: var(--bn-tracking-caps);
  text-transform: uppercase;
  color: var(--bn-text-3);
}

.bn-num { font-variant-numeric: tabular-nums; }

code, kbd, pre, samp { font-family: var(--bn-font-mono); font-size: 0.86em; }

a { color: var(--bn-link); text-decoration: none; transition: color var(--bn-dur-1) var(--bn-ease); }
a:hover { color: var(--bn-link-hover); text-decoration: underline; text-underline-offset: 3px; }