:root{
  /* Display — Outfit, tight tracking, light-to-regular weight at large sizes */
  --display-xl-size:72px;   --display-xl-lh:1.04; /* @kind other */  --display-xl-ls:-0.025em; /* @kind other */ --display-xl-weight:400; /* @kind font */
  --display-l-size:56px;    --display-l-lh:1.07; /* @kind other */  --display-l-ls:-0.022em; /* @kind other */ --display-l-weight:400; /* @kind font */
  --display-m-size:44px;    --display-m-lh:1.10; /* @kind other */  --display-m-ls:-0.02em; /* @kind other */  --display-m-weight:400; /* @kind font */

  /* Headings — Outfit */
  --h1-size:36px; --h1-lh:1.15; /* @kind other */ --h1-ls:-0.018em; /* @kind other */ --h1-weight:500; /* @kind font */
  --h2-size:30px; --h2-lh:1.20; /* @kind other */ --h2-ls:-0.015em; /* @kind other */ --h2-weight:500; /* @kind font */
  --h3-size:24px; --h3-lh:1.25; /* @kind other */ --h3-ls:-0.012em; /* @kind other */ --h3-weight:500; /* @kind font */
  --h4-size:20px; --h4-lh:1.30; /* @kind other */ --h4-ls:-0.008em; /* @kind other */ --h4-weight:600; /* @kind font */

  /* Text — Figtree. Marketing body runs at 500, UI body at 400. */
  --body-l-size:18px;  --body-l-lh:1.60; /* @kind other */
  --body-size:16px;    --body-lh:1.60; /* @kind other */
  --body-s-size:14px;  --body-s-lh:1.55; /* @kind other */
  --caption-size:13px; --caption-lh:1.45; /* @kind other */
  --micro-size:11px;   --micro-lh:1.35; /* @kind other */

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

  --label-ls:0.01em; /* @kind other */
  --eyebrow-size:13px; --eyebrow-weight:500; /* @kind font */ --eyebrow-ls:0.005em; /* @kind other */
  --overline-size:11px; --overline-weight:600; /* @kind font */ --overline-ls:0.12em; /* @kind other */
}
