/* Atom Force — type. Zalando Sans SemiExpanded for titles, Archivo for body, IBM Plex Mono for claims and data. */
:root{
  --font-display:"Zalando Sans SemiExpanded","Zalando Sans",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  /* Scale — 1.25 major third, clamped for fluid layouts */
  --text-3xs:11px;
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:15px;
  --text-md:17px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-3xl:38px;
  --text-4xl:48px;
  --text-5xl:62px;
  --text-6xl:80px;

  --leading-tight:1.04;
  --leading-snug:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-display:-0.02em;   /* titles pull in slightly */
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-claim:0.16em;      /* mono claims, always uppercase */
  --tracking-button:0.09em;     /* mono uppercase button and nav labels */

  /* Semantic roles */
  --type-hero:var(--weight-bold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-display:var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-title:var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-subtitle:var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-body-lg:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --type-body:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-body);
  --type-claim:var(--weight-regular) var(--text-2xs)/var(--leading-normal) var(--font-mono);
  --type-button:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);
  --type-nav:var(--weight-regular) var(--text-2xs)/1 var(--font-mono);
  /* The site alternates two heading voices: bold display for statements, regular for questions. */
  --type-title-regular:var(--weight-regular) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-data:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
}
