/* ═══════════════════════════════════════════════════════════════════════════
   VANTA — TYPOGRAPHY
   The type register is taken from the client's own vial labels, which are the
   only artwork in this build the client actually drew. Two faces are legible
   on them and they are doing two different jobs:

     · the VANTA wordmark and the product name (the catalogue code) — a squarish,
       engineered geometric sans, wide-tracked, uppercase, flat terminals.
     · the fine print (PURITY EXCEEDS 99% FOR RESEARCH PURPOSES ONLY) — the
       same squarish skeleton at a small size, bold and letter-spaced.

   So the site takes SORA for display and BARLOW for body:

     · Sora is the one genuinely futuristic face in the factory's font pool —
       geometric with flattened curves and angular joints, drawn for a
       technology brief. It is what the label's caps are reaching for.
     · Barlow is a low-contrast, slightly squared grotesk. It is the closest
       thing on disk to the label's fine print, and unlike a display face it
       stays comfortable at paragraph sizes.

   This REPLACES the scaffolded `editorial-serif` pair (Literata / Karla).
   A book serif is the peer-reviewed-journal register — the opposite of the
   label's, and the reason the site and the vial did not look related.

   HOW THIS FILE WORKS — and why it is only two custom properties.
   Every font-family in this build resolves through --sf-font-display or
   --sf-font-body: theme.css, sf-base.css and each page's own inline
   `body { font-family: var(--sf-font-body) }` all read the tokens, and the
   one per-page type rule points headings at the display token. Nothing
   hard-codes a family. So changing the type sitewide is a TOKEN change, and
   this file never has to fight a component's specificity or be re-fought when
   the master template moves.

   SPECIFICITY NOTE: declared on `html:root` (0,1,1), not `:root` (0,1,0), so
   these beat theme.css and every page's inline <style> block regardless of
   where the build links this file.

   BOTH FACES ARE ALREADY SELF-HOSTED. brand_assets/fonts/fonts.css declares
   Sora and Barlow (with metric-matched local fallbacks, so the swap window
   costs no layout shift) and the .woff2 files are already in the output.
   Nothing here reaches the network — which is what makes it safe for a demo
   on a laptop with no internet.
   ═══════════════════════════════════════════════════════════════════════════ */

html:root {
  /* Headings, the hero title, section headings, prices, stat figures. */
  --sf-font-display: 'Sora', 'Sora Fallback', 'Segoe UI', system-ui, sans-serif;

  /* Body copy, nav, buttons, forms, tables, the footer. */
  --sf-font-body: 'Barlow', 'Barlow Fallback', 'Segoe UI', system-ui, sans-serif;
}

/* ── OPTICAL TRACKING ───────────────────────────────────────────────────────
   Not decoration — a correction. Literata is a text serif and sets tight at
   display sizes; Sora is geometric and sets LOOSE, so dropping it into
   headings drawn for a serif leaves them visibly gappy. Large type wants
   negative tracking, and the larger it is the more it wants: the hero takes
   the most, section headings less, card headings none. Body copy is left
   alone — Barlow is drawn for it.
   ── */
.hero-h1,
.sf-hero-title,
h1 {
  letter-spacing: -0.021em;
}

h2,
.section-heading,
.sf-section-heading {
  letter-spacing: -0.014em;
}

h3,
h4 {
  letter-spacing: -0.008em;
}

/* ── THE LABEL'S OWN REGISTER ───────────────────────────────────────────────
   Small uppercase type on the label is WIDE-tracked, and that is the detail
   that reads as "this is the vial's typography". It applies only where the
   template already sets uppercase small text — eyebrows that carry real
   information, badge/pill chips, table headers and button labels. It is a
   letter-spacing change only: nothing here turns anything uppercase that was
   not already, and nothing here restores a section kicker.
   ── */
.sf-badge,
.sf-pill,
.sf-tag,
.sf-chip,
.badge,
.pill,
thead th {
  letter-spacing: 0.075em;
}

/* ── THE DATA REGISTER ──────────────────────────────────────────────────────
   --sf-font-mono carries lot numbers, batch codes, tracking numbers and order
   IDs (coa-library, track, checkout, admin). It shipped as a SYSTEM stack, so
   it resolved to Consolas on Windows and SF Mono on a Mac — the client's proof
   surfaces literally rendered in a different typeface depending on whose laptop
   was open. JetBrains Mono is self-hosted here already, is the technical
   register the label's data lines are reaching for, and is the same everywhere.
   Monospace is kept on purpose: a lot number should read as data, not as prose.
   ── */
html:root {
  --sf-font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}