:root {
  --font-display: 'Space Grotesk', 'GT Walsheim Medium Placeholder', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-feature-body: "cv01" 1, "cv05" 1, "cv09" 1, "cv11" 1, "ss03" 1, "ss07" 1, "dlig" 1;
  --font-feature-tabular: "tnum" 1;

  /* size / weight / line-height / letter-spacing, one token per tier */
  --type-display-xxl-size: 110px;   --type-display-xxl-weight: 500; --type-display-xxl-lh: 0.85; --type-display-xxl-ls: -5.5px;
  --type-display-xl-size: 85px;     --type-display-xl-weight: 500;  --type-display-xl-lh: 0.95;  --type-display-xl-ls: -4.25px;
  --type-display-lg-size: 62px;     --type-display-lg-weight: 500;  --type-display-lg-lh: 1.00;  --type-display-lg-ls: -3.1px;
  --type-display-md-size: 32px;     --type-display-md-weight: 500;  --type-display-md-lh: 1.13;  --type-display-md-ls: -1.0px;
  --type-headline-size: 22px;       --type-headline-weight: 700;    --type-headline-lh: 1.20;    --type-headline-ls: -0.8px;
  --type-subhead-size: 24px;        --type-subhead-weight: 400;     --type-subhead-lh: 1.30;     --type-subhead-ls: -0.01px;
  --type-body-lg-size: 18px;        --type-body-lg-weight: 400;     --type-body-lg-lh: 1.30;     --type-body-lg-ls: -0.18px;
  --type-body-size: 15px;           --type-body-weight: 400;        --type-body-lh: 1.30;        --type-body-ls: -0.15px;
  --type-body-sm-size: 14px;        --type-body-sm-weight: 500;     --type-body-sm-lh: 1.40;     --type-body-sm-ls: -0.14px;
  --type-caption-size: 13px;        --type-caption-weight: 500;     --type-caption-lh: 1.20;     --type-caption-ls: -0.13px;
  --type-micro-size: 12px;          --type-micro-weight: 400;       --type-micro-lh: 1.20;       --type-micro-ls: -0.12px;
  --type-button-size: 14px;         --type-button-weight: 500;      --type-button-lh: 1.0;       --type-button-ls: -0.14px;
}

.type-display-xxl { font-family: var(--font-display); font-size: var(--type-display-xxl-size); font-weight: var(--type-display-xxl-weight); line-height: var(--type-display-xxl-lh); letter-spacing: var(--type-display-xxl-ls); }
.type-display-xl  { font-family: var(--font-display); font-size: var(--type-display-xl-size);  font-weight: var(--type-display-xl-weight);  line-height: var(--type-display-xl-lh);  letter-spacing: var(--type-display-xl-ls); }
.type-display-lg  { font-family: var(--font-display); font-size: var(--type-display-lg-size);  font-weight: var(--type-display-lg-weight);  line-height: var(--type-display-lg-lh);  letter-spacing: var(--type-display-lg-ls); }
.type-display-md  { font-family: var(--font-display); font-size: var(--type-display-md-size);  font-weight: var(--type-display-md-weight);  line-height: var(--type-display-md-lh);  letter-spacing: var(--type-display-md-ls); }
.type-headline    { font-family: var(--font-body); font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); line-height: var(--type-headline-lh); letter-spacing: var(--type-headline-ls); }
.type-subhead     { font-family: var(--font-body); font-size: var(--type-subhead-size); font-weight: var(--type-subhead-weight); line-height: var(--type-subhead-lh); letter-spacing: var(--type-subhead-ls); }
.type-body-lg     { font-family: var(--font-body); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-lh); letter-spacing: var(--type-body-lg-ls); font-feature-settings: var(--font-feature-body); }
.type-body        { font-family: var(--font-body); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); font-feature-settings: var(--font-feature-body); }
.type-body-sm     { font-family: var(--font-body); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-lh); letter-spacing: var(--type-body-sm-ls); font-feature-settings: var(--font-feature-body), var(--font-feature-tabular); }
.type-caption     { font-family: var(--font-body); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); }
.type-micro       { font-family: var(--font-body); font-size: var(--type-micro-size); font-weight: var(--type-micro-weight); line-height: var(--type-micro-lh); letter-spacing: var(--type-micro-ls); }
.type-button      { font-family: var(--font-body); font-size: var(--type-button-size); font-weight: var(--type-button-weight); line-height: var(--type-button-lh); letter-spacing: var(--type-button-ls); }