/* ============================================================================
   typography.css — Phase 1: give the app a real type hierarchy.

   Loaded LAST, after the legacy sheets, so these `font-family` assignments win.
   That is safe because none of base.css / pro-theme.css / mobile-dashboard.css
   sets `font-family` on these elements — verified before writing this file.

   Why a second family instead of bigger weights: Manrope's usable range is
   200–800, so the 900 / 950 / 1000 the old CSS asked for never existed. Measured
   result — 11 requested weights rendered as only 3 distinct faces. Unbounded is a
   display face that genuinely reaches 900, and it ships full Cyrillic.

   Sizes are measured, not guessed. Unbounded's letterforms are ~25% wider than
   Manrope's at the same px, so each size below keeps the heading inside the box
   the Manrope original occupied. Measured: Unbounded 800 @ 20px = 380.7px vs
   Manrope 800 @ 28px = 385.8px for the hero string (-1.3%).

   Every var() carries a literal fallback so this file still renders correctly if
   it is ever loaded without tokens.css.
   ========================================================================= */

/* ── Display headings ────────────────────────────────────────────────────── */
.pro-hero h2,
.service-modal-head h2,
.device-dossier-head h2,
#serviceModalTitle,
#device-dossier-title,
.login-title {
  font-family: var(--font-display, 'Unbounded', 'Manrope', system-ui, sans-serif);
  font-weight: var(--fw-display, 800);   /* 800 — a weight Unbounded actually has */
  letter-spacing: var(--ls-display, -.02em);
}

/* The hero title is the app's signature heading. */
.pro-hero h2 {
  font-size: 23px;
  line-height: 1.15;
}

/* Modal and dossier heads sit in wide panels, so they can carry more size. */
.service-modal-head h2,
#serviceModalTitle,
#device-dossier-title,
.device-dossier-head h2 {
  font-size: 19px;
  line-height: 1.25;
}

/* Short login card title — safe to render in the display face. */
.login-title {
  font-size: 24px;
  line-height: 1.2;
}

/* Mobile: Unbounded is wide, so the display sizes step down, not the family. */
@media (max-width: 640px) {
  .pro-hero h2 { font-size: 17px; }
  .service-modal-head h2,
  #serviceModalTitle,
  #device-dossier-title,
  .device-dossier-head h2 { font-size: 16px; }
  .login-title { font-size: 21px; }
}

/* ── UI text ─────────────────────────────────────────────────────────────────
   Manrope stays the workhorse. 700 and 800 are now real weights: self-hosting
   the variable font restored the intermediate steps that used to collapse. */
body,
input,
select,
textarea,
button {
  font-family: var(--font-ui, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

/* Machine-readable values (serials, IMEI, DSN) get the mono stack declared once
   instead of re-listed in four places. */
.wh-device-table td:nth-child(2),
.wh-device-table td:nth-child(3),
.wh-device-table td:nth-child(4),
.device-card-id,
.hist-sn,
.stock-field input {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}