/* Type. Three faces and a neutral size ladder (px values, matching src/style/tokens.ts
   fontSize: size / line-height pairs). The v4 hand-off's faces: Instrument Sans for the
   interface, Bricolage Grotesque for display (headings and big numbers), JetBrains Mono
   for code and meta. Custom fonts don't auto-map weight in React Native, so the kit
   selects a face per weight (ThemeProvider `fonts`); on the web the weight axis is enough
   when the family is registered with a weight range. */
:root{
  --font-sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-display:"Bricolage Grotesque","Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --text-xs:12px;   --leading-xs:16px;
  --text-sm:14px;   --leading-sm:20px;
  --text-base:16px; --leading-base:24px;
  --text-lg:18px;   --leading-lg:28px;
  --text-xl:20px;   --leading-xl:30px;
  --text-2xl:24px;  --leading-2xl:32px;
  --text-3xl:28px;  --leading-3xl:36px;
  --text-4xl:36px;  --leading-4xl:44px;
  --text-5xl:40px;  --leading-5xl:48px;
  --text-6xl:55px;  --leading-6xl:64px;
  --text-7xl:64px;  --leading-7xl:70px;

  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  --tracking-tighter:-0.8px;
  --tracking-tight:-0.4px;
  --tracking-normal:0px;
  --tracking-wide:0.4px;
  --tracking-wider:0.8px;
  --tracking-widest:1.6px;

  /* Semantic roles (Typography atom), the v4 hand-off's scale (src/style/type-scale.ts
     typeRoles, test/v4-type-scale.test.ts): medium display-face titles with tightened
     tracking from the 56 display down to the 21 h4, the 17 UI h5, body 15/24, lead 19,
     small 13, caption 12, tiny 11, and the 11px mono eyebrow (uppercase, tracked +0.1em). */
  --role-display:500 56px/56px var(--font-display);
  --role-h1:500 44px/47px var(--font-display);
  --role-h2:500 34px/38px var(--font-display);
  --role-h3:500 26px/30px var(--font-display);
  --role-h4:500 21px/26px var(--font-display);
  --role-h5:var(--weight-semibold) 17px/23px var(--font-sans);
  --role-lead:var(--weight-normal) 19px/29px var(--font-sans);
  --role-body:var(--weight-normal) 15px/24px var(--font-sans);
  --role-label:var(--weight-medium) 13px/17px var(--font-sans);
  --role-small:var(--weight-normal) 13px/20px var(--font-sans);
  --role-caption:var(--weight-normal) 12px/18px var(--font-sans);
  --role-tiny:var(--weight-normal) 11px/16px var(--font-sans);
  --role-eyebrow:var(--weight-medium) 11px/11px var(--font-mono);
  --tracking-display:-0.04em;
  --tracking-eyebrow:0.1em;
}