:root{
  /* display — editorial serif, always light, always tight */
  --size-display-1:clamp(56px,9vw,148px);
  --size-display-2:clamp(40px,5.4vw,88px);
  --size-display-3:clamp(30px,3.2vw,52px);
  --size-title:26px;
  --size-subtitle:20px;

  /* body */
  --size-body-lg:17px;
  --size-body:15px;
  --size-body-sm:13px;

  /* labels — uppercase, letterspaced, the workhorse of the UI */
  --size-label:11px;
  --size-label-sm:10px;

  --weight-display:300; /* @kind font */
  --weight-display-mid:400; /* @kind font */
  --weight-body:300; /* @kind font */
  --weight-body-mid:400; /* @kind font */
  --weight-label:400; /* @kind font */
  --weight-label-mid:500; /* @kind font */

  --leading-display:0.94; /* @kind font */
  --leading-title:1.14; /* @kind font */
  --leading-body:1.62; /* @kind font */
  --leading-label:1.1; /* @kind font */

  --tracking-display:-0.02em; /* @kind font */
  --tracking-display-tight:-0.03em; /* @kind font */
  --tracking-body:0.005em; /* @kind font */
  --tracking-label:0.18em; /* @kind font */
  --tracking-label-wide:0.28em; /* @kind font */

  /* composed roles */
  --type-display-1:var(--weight-display) var(--size-display-1)/var(--leading-display) var(--font-display); /* @kind font */
  --type-display-2:var(--weight-display) var(--size-display-2)/var(--leading-display) var(--font-display); /* @kind font */
  --type-display-3:var(--weight-display) var(--size-display-3)/var(--leading-title) var(--font-display); /* @kind font */
  --type-title:var(--weight-display-mid) var(--size-title)/var(--leading-title) var(--font-display); /* @kind font */
  --type-body:var(--weight-body) var(--size-body)/var(--leading-body) var(--font-body); /* @kind font */
  --type-body-lg:var(--weight-body) var(--size-body-lg)/var(--leading-body) var(--font-body); /* @kind font */
  --type-body-sm:var(--weight-body) var(--size-body-sm)/var(--leading-body) var(--font-body); /* @kind font */
  --type-label:var(--weight-label) var(--size-label)/var(--leading-label) var(--font-label); /* @kind font */
}