:root{
  --font-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --font-display:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-thin:200;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900;        /* the "ATTO" weight — display only */

  /* size ramp */
  --text-display-xl:64px;
  --text-display-lg:48px;
  --text-display-md:36px;
  --text-h1:30px;
  --text-h2:24px;
  --text-h3:20px;
  --text-h4:17px;
  --text-body-lg:17px;
  --text-body:15px;
  --text-body-sm:13px;
  --text-caption:12px;
  --text-overline:11px;

  /* line heights */
  --leading-display:1.02;
  --leading-tight:1.16;
  --leading-heading:1.28;
  --leading-body:1.6;
  --leading-snug:1.45;

  /* tracking */
  --tracking-display:-0.03em;   /* black display sets tight, like the ATTO wordmark */
  --tracking-heading:-0.015em;
  --tracking-body:0em;
  --tracking-overline:0.14em;   /* wide caps, like PORTAL in the lockup */
  --tracking-lockup:0.32em;

  /* ready-made pairs */
  --type-display-xl:var(--weight-black) var(--text-display-xl)/var(--leading-display) var(--font-display);
  --type-display-lg:var(--weight-black) var(--text-display-lg)/var(--leading-display) var(--font-display);
  --type-display-md:var(--weight-bold) var(--text-display-md)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-h1)/var(--leading-tight) var(--font-sans);
  --type-h2:var(--weight-semibold) var(--text-h2)/var(--leading-heading) var(--font-sans);
  --type-h3:var(--weight-semibold) var(--text-h3)/var(--leading-heading) var(--font-sans);
  --type-h4:var(--weight-semibold) var(--text-h4)/var(--leading-snug) var(--font-sans);
  --type-body-lg:var(--weight-regular) var(--text-body-lg)/var(--leading-body) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--text-body-sm)/var(--leading-snug) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-body-sm)/1.3 var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-caption)/1.4 var(--font-sans);
  --type-overline:var(--weight-semibold) var(--text-overline)/1.2 var(--font-sans);
  --type-mono:var(--weight-regular) var(--text-body-sm)/1.5 var(--font-mono);
}