/* ===========================================================================
   machado.group — Type utilities
   ---------------------------------------------------------------------------
   Role classes for every step in the scale. Headings/display use the sans at
   medium weight + tight tracking; body is regular; labels are mono caps with
   wide tracking; data uses the pixel face. All read from typography.css tokens.
   =========================================================================== */

/* ---- display (grotesk) ------------------------------------------------
   The big end of the ladder. `.title` is the house default title step (120px);
   `.display-4xl` / `.mega` are poster / full-bleed statements. */
.mega, .display-4xl, .display-3xl, .title, .display-2xl, .display-xl, .display-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.mega        { font-size: var(--fs-mega);        line-height: var(--lh-mega); }
.display-4xl { font-size: var(--fs-display-4xl); line-height: var(--lh-display-4xl); }
.display-3xl,
.title       { font-size: var(--fs-display-3xl); line-height: var(--lh-display-3xl); }
.display-2xl { font-size: var(--fs-display-2xl); line-height: var(--lh-display-2xl); }
.display-xl  { font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl); }
.display-lg  { font-size: var(--fs-display-lg);  line-height: var(--lh-display-lg); }

/* ---- headings (grotesk) ------------------------------------------------ */
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tracking-normal); }

/* ---- lede / standfirst -------------------------------------------------
   The line that sits under a title: bigger than body, quieter than a heading. */
.lede {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-secondary);
  text-wrap: pretty;
}

/* ---- pull quote --------------------------------------------------------- */
.quote {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--fs-display-lg);
  line-height: 1.16;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  text-wrap: balance;
}

/* ---- body (mono-led) -------------------------------------------------- */
/* Body copy defaults to the technical mono (JetBrains Mono). Slightly snug
   tracking + a touch more line-height keep the wider mono rhythm readable. */
.text-body-lg, .text-body, .text-body-sm, .text-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  text-wrap: pretty;
}
.text-body-lg { font-size: var(--fs-body-lg); line-height: 1.65; }
.text-body    { font-size: var(--fs-body);    line-height: 1.65; }
.text-body-sm { font-size: var(--fs-body-sm); line-height: 1.6; font-weight: var(--weight-medium); }
.text-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--weight-medium); color: var(--ink-secondary); }

/* ---- editorial serif title (Baskervville) ----------------------------- */
/* The underlined question-headline treatment from the references. Pair with
   --underline for the thin rule under each line. */
.title-serif, .title-serif-lg, .title-serif-sm {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  text-wrap: balance;
}
.title-serif-lg { font-size: var(--fs-display-lg); line-height: 1.1; }
.title-serif    { font-size: var(--fs-h1);         line-height: 1.18; }
.title-serif-sm { font-size: var(--fs-h3);         line-height: 1.3; }
.title-serif--italic { font-style: italic; }
.title-serif--underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
}

/* serif body — for longer editorial reading passages */
.text-serif {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---- mono labels (caps, tracked) -------------------------------------- */
.mono-label, .mono-label-sm {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-secondary);
}
.mono-label    { font-size: var(--fs-label);    line-height: var(--lh-label); }
.mono-label-sm { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); letter-spacing: var(--tracking-wider); }

/* an editorial bracketed index, e.g. [004] */
.index {
  font-family: var(--font-numeric);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

/* ---- numerals --------------------------------------------------------
   The house rule: every figure in our content is JetBrains Mono. Wrap any
   number that isn't already inside a numeric component (badge, index, data)
   in .num — inline figures in sans/serif copy, table cells, stats, counters,
   timestamps, prices. .num--tabular locks equal-width columns for alignment. */
.num {
  font-family: var(--font-numeric);
  letter-spacing: var(--tracking-numeric);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.num--tabular {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---- data (LCD numerals) ---------------------------------------------- */
.data-lg, .data {
  font-family: var(--font-numeric);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--tracking-numeric);
  color: var(--ink);
}
.data-lg { font-size: var(--fs-data-lg); line-height: var(--lh-data-lg); }
.data    { font-size: var(--fs-data);    line-height: var(--lh-data); }

/* ---- helpers ---------------------------------------------------------- */
.ink-secondary { color: var(--ink-secondary); }
.ink-tertiary  { color: var(--ink-tertiary); }
.ink-accent    { color: var(--accent); }

/* ---- wordmark --------------------------------------------------------
   The house mark, ONE style across every material: MACHADO.GROUP set in
   mono CAPS, muted ink, no colored dot, no background. Size it from context
   (font-size on the parent); the mark itself inherits em. */
.wordmark {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  white-space: nowrap;
}

/* ---- body face overrides ---------------------------------------------
   Mono is the body face. [data-body="mono"] forces it explicitly; the legacy
   [data-body="sans"] hook now also resolves to mono (sans retired).
   `.text-mono` / `.text-light` are one-off utilities for a single block. */
[data-body="sans"],
[data-body="mono"] {
  --font-body: var(--font-mono-tech);
}

/* one-off utility for a single block */
.text-mono {
  font-family: var(--font-mono-tech);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}
/* JetBrains Mono in its light (300) cut — the airy editorial register */
.text-light {
  font-family: var(--font-mono-tech);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-snug);
}