:root{
  --font-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --font-body:"Barlow","Barlow Fallback",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-hero:64px; /* @kind font */
  --fs-display:48px; /* @kind font */
  --fs-h1:40px; /* @kind font */
  --fs-h2:32px; /* @kind font */
  --fs-h3:24px; /* @kind font */
  --fs-h4:20px; /* @kind font */
  --fs-lead:20px; /* @kind font */
  --fs-body:17px; /* @kind font */
  --fs-body-sm:15px; /* @kind font */
  --fs-caption:13px; /* @kind font */
  --fs-eyebrow:12px; /* @kind font */

  --lh-tight:1.06; /* @kind font */
  --lh-heading:1.14; /* @kind font */
  --lh-snug:1.32; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-loose:1.75; /* @kind font */

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:800; /* @kind font */

  --ls-hero:-0.025em; /* @kind font */
  --ls-heading:-0.015em; /* @kind font */
  --ls-body:0; /* @kind font */
  --ls-eyebrow:0.1em; /* @kind font */

  /* Composite roles */
  --type-hero:var(--fw-black) var(--fs-hero)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-display:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind font */
  --type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-display); /* @kind font */
  --type-lead:var(--fw-regular) var(--fs-lead)/var(--lh-snug) var(--font-body); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-body); /* @kind font */
  --type-caption:var(--fw-medium) var(--fs-caption)/var(--lh-snug) var(--font-body); /* @kind font */
  --type-eyebrow:var(--fw-bold) var(--fs-eyebrow)/1.2 var(--font-display); /* @kind font */
  --type-button:var(--fw-bold) var(--fs-body-sm)/1 var(--font-display); /* @kind font */
}