/* ETOPCHANGER type system (design decision 5, owner 2026-10-03).
   Linked from EVERY customer page; tests/test_type_system.py pins it.

   FACES
   Inter      reading text, buttons, labels, numbers (tabular-nums on amounts).
   Archivo    headings, on every page (it used to load on the home page only).
   JetBrains Mono  codes only (order code, TxID, wallet address, SteamID,
              referral code) and the receipt paper. Never for plain numbers.
   The three families are requested by one Google Fonts link in each page's
   head (preload + media swap, as the home page always did).

   SCALE  (px; nothing between the steps, no half-pixels)
     11  --fs-2xs  micro badges and tags only (the floor)
     12  --fs-xs   captions, table heads, pills
     13  --fs-sm   secondary text, form hints, nav
     14  --fs-md   UI text: controls, rows, table cells, buttons
     16  --fs-base THE body size, every page (and inputs: iOS never zooms)
     18  --fs-lg   lead paragraph, compact member headers
     22  --fs-xl   h2 (page section titles), a bill total
     28  --fs-2xl  big numbers
     36  --fs-3xl  page title ceiling
     clamp(30,5.4vw,46)  --fs-hero  the home hero, the one documented exception
   WEIGHTS  400 500 600 700 (all loaded).
   LINE-HEIGHT  1.15 headings | 1.5 UI | 1.6 reading text | 1 icons and chips.
   TRACKING  headings -0.02em | caps +0.08em | everything else 0. */

:root{
  --font-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-disp:Archivo,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,Consolas,monospace;
  /* short names the pages already use */
  --disp:var(--font-disp);
  --mono:var(--font-mono);

  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:16px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
  --fs-h1:clamp(28px,4vw,36px);
  --fs-hero:clamp(30px,5.4vw,46px);

  --lh-head:1.15; --lh-ui:1.5; --lh-body:1.6;
  --ls-head:-.02em; --ls-caps:.08em;
}

/* Headings: Archivo 700, one h1, the same on every page. Page rules may set a
   different size from the scale for a heading inside a component; they may not
   pick another face, weight or tracking. */
h1,h2,h3,.h1,.h2,.h3{font-family:var(--font-disp);font-weight:700;letter-spacing:var(--ls-head);line-height:var(--lh-head)}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-xl)}
h3,.h3{font-size:var(--fs-base)}   /* component and panel titles */

/* Form controls wear the page face (a bare <input> falls back to the OS font). */
button,input,select,textarea{font-family:inherit}

/* Numbers: Inter with tabular figures, so digits line up in columns and
   amounts do not jitter. "mono" is a historic class name and means exactly
   this; it does NOT switch the face. */
.num,.tnum,.mono,td,th,input[type=number]{font-variant-numeric:tabular-nums}

/* Codes and ids: the only place JetBrains Mono appears outside the receipt. */
.code,code,kbd,samp{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500}

/* Scale classes for new markup. */
.fs-2xs{font-size:var(--fs-2xs)} .fs-xs{font-size:var(--fs-xs)} .fs-sm{font-size:var(--fs-sm)}
.fs-md{font-size:var(--fs-md)} .fs-base{font-size:var(--fs-base)} .fs-lg{font-size:var(--fs-lg)}
.fs-xl{font-size:var(--fs-xl)} .fs-2xl{font-size:var(--fs-2xl)} .fs-3xl{font-size:var(--fs-3xl)}
.lh-head{line-height:var(--lh-head)} .lh-ui{line-height:var(--lh-ui)} .lh-body{line-height:var(--lh-body)}
.caps{letter-spacing:var(--ls-caps)}