:root{
  /* composite roles: font: <weight> <size>/<line-height> <family>  */
  --type-display-xl:600 72px/1.05 var(--font-display);
  --type-display-xl-tracking:-0.5px;
  --type-display-xl-mobile:600 40px/1.08 var(--font-display);

  --type-display-lg:600 52px/1.12 var(--font-display);
  --type-display-lg-tracking:-0.3px;

  --type-headline:600 26px/1.35 var(--font-display);
  --type-headline-tracking:-0.1px;

  --type-subhead:400 24px/1.4 var(--font-display);
  --type-subhead-tracking:0;

  --type-card-title:600 22px/1.4 var(--font-sans);
  --type-body-lg:400 19px/1.5 var(--font-sans);
  --type-body:400 17px/1.5 var(--font-sans);
  --type-body-sm:400 15px/1.5 var(--font-sans);
  --type-link:500 17px/1.5 var(--font-sans);
  --type-button:600 17px/1.4 var(--font-sans);

  --type-eyebrow:600 13px/1.3 var(--font-sans);
  --type-eyebrow-tracking:1.5px;
  --type-caption:500 12px/1.3 var(--font-sans);
  --type-caption-tracking:0.6px;

  /* individual axes, for cases that need one value */
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-feature-default:"kern" 1;
}