:root {
  --fs-display-1: 76px;
  --fs-display-2: 58px;
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 24px;
  --fs-h4: 19px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13.5px;
  --fs-eyebrow: 11.5px;
  --fs-micro: 10.5px;

  --lh-display: 1.06; /* @kind font */
  --lh-heading: 1.18; /* @kind font */
  --lh-body: 1.68; /* @kind font */
  --lh-tight: 1.35; /* @kind font */

  --ls-display: -0.01em; /* @kind font */
  --ls-heading: 0.005em; /* @kind font */
  --ls-body: 0.005em; /* @kind font */
  --ls-eyebrow: 0.28em; /* @kind font */
  --ls-button: 0.16em; /* @kind font */
  --ls-logo: 0.42em; /* @kind font */

  --fw-thin: 200; /* @kind font */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* Semantic type roles */
  --type-display: var(--fw-light) var(--fs-display-1) / var(--lh-display) var(--font-display); /* @kind font */
  --type-h1: var(--fw-light) var(--fs-h1) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h2: var(--fw-light) var(--fs-h2) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3: var(--fw-regular) var(--fs-h3) / var(--lh-tight) var(--font-display); /* @kind font */
  --type-h4: var(--fw-medium) var(--fs-h4) / var(--lh-tight) var(--font-sans); /* @kind font */
  --type-body: var(--fw-light) var(--fs-body) / var(--lh-body) var(--font-sans); /* @kind font */
  --type-body-lg: var(--fw-light) var(--fs-body-lg) / var(--lh-body) var(--font-sans); /* @kind font */
  --type-eyebrow: var(--fw-medium) var(--fs-eyebrow) / 1.2 var(--font-sans); /* @kind font */
  --type-button: var(--fw-medium) var(--fs-body-sm) / 1 var(--font-sans); /* @kind font */
  --type-nav: var(--fw-regular) var(--fs-body-sm) / 1 var(--font-sans); /* @kind font */
}