/* enrooted typography — chapter 4. Poppins for headings + logo, Lato for body. */
:root{
  --font-display:"Poppins","Montserrat",system-ui,sans-serif;
  --font-body:"Lato","Open Sans",Calibri,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* utility only — no brand mono is specified */

  --weight-body:400;
  --weight-body-bold:700;
  --weight-h1:600;   /* Poppins SemiBold */
  --weight-h2:500;   /* Poppins Medium */
  --weight-h3:500;

  /* Web scale (chapter 4.3) */
  --size-display:56px;
  --size-h1:40px;
  --size-h2:30px;
  --size-h3:22px;
  --size-body-lg:18px;
  --size-body:16px;
  --size-caption:13px;

  --lh-heading:1.15; /* @kind other */
  --lh-body:1.5; /* @kind other */
  --lh-tight:1.3;      /* @kind other */

  --tracking-logo:-0.02em;      /* wordmark kerning */
  --tracking-heading:-0.01em;
  --tracking-vertical-lockup:0.06em;
  --tracking-normal:0;
  --tracking-label:0.04em;      /* small UI labels; never full-caps paragraphs */

  /* Text roles, ready to spread onto elements */
  --type-h1:var(--weight-h1) var(--size-h1)/var(--lh-heading) var(--font-display);
  --type-h2:var(--weight-h2) var(--size-h2)/var(--lh-heading) var(--font-display);
  --type-h3:var(--weight-h3) var(--size-h3)/var(--lh-tight) var(--font-display);
  --type-body:var(--weight-body) var(--size-body)/var(--lh-body) var(--font-body);
  --type-body-lg:var(--weight-body) var(--size-body-lg)/var(--lh-body) var(--font-body);
  --type-caption:var(--weight-body) var(--size-caption)/1.4 var(--font-body);
}