:root{
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Fluid display sizes - the top three scale with the viewport. */
  --fs-display-xl: clamp(44px, 6.4vw, 88px); /* @kind font */
  --fs-display-lg: clamp(36px, 4.6vw, 62px); /* @kind font */
  --fs-display-md: clamp(30px, 3.4vw, 44px); /* @kind font */
  --fs-h1: clamp(28px, 2.8vw, 36px); /* @kind font */
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-overline: 12px;
  --fs-mono: 14px;

  --lh-display: 1.02; /* @kind font */
  --lh-tight: 1.14; /* @kind font */
  --lh-heading: 1.25; /* @kind font */
  --lh-body: 1.62; /* @kind font */
  --lh-flat: 1; /* @kind font */

  --ls-display: -0.035em;
  --ls-heading: -0.02em;
  --ls-body: -0.005em;
  --ls-overline: 0.14em;
  --ls-wordmark: 0.2em;

  /* Composite roles */
  --text-display-xl: var(--fw-extrabold) var(--fs-display-xl)/var(--lh-display) var(--font-sans);
  --text-display-lg: var(--fw-extrabold) var(--fs-display-lg)/var(--lh-display) var(--font-sans);
  --text-display-md: var(--fw-bold) var(--fs-display-md)/var(--lh-tight) var(--font-sans);
  --text-h1: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-sans);
  --text-h2: var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-sans);
  --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-sans);
  --text-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-sans);
  --text-lead: var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-sans);
  --text-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-body-sm: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans);
  --text-caption: var(--fw-medium) var(--fs-caption)/1.45 var(--font-sans);
  --text-overline: var(--fw-semibold) var(--fs-overline)/var(--lh-flat) var(--font-sans);
  --text-label: var(--fw-medium) var(--fs-body-sm)/1.4 var(--font-sans);
  --text-button: var(--fw-semibold) var(--fs-body-sm)/var(--lh-flat) var(--font-sans);
  --text-spec: var(--fw-medium) var(--fs-mono)/1.5 var(--font-mono);
}