/* Type scale. Sizes/weights/line-heights/tracking are literal captured values ,
   do not round them. Display tracking is aggressively negative on purpose. */
:root {
  --text-display-xl: 48px;
  --lh-display-xl: 48px;
  --ls-display-xl: -2.4px;

  --text-display-lg: 32px;
  --lh-display-lg: 40px;
  --ls-display-lg: -1.28px;

  --text-display-md: 24px;
  --lh-display-md: 32px;
  --ls-display-md: -0.96px;

  --text-display-sm: 20px;
  --lh-display-sm: 28px;
  --ls-display-sm: -0.6px;

  --text-body-lg: 18px;
  --lh-body-lg: 28px;

  --text-body-md: 16px;
  --lh-body-md: 24px;

  --text-body-sm: 14px;
  --lh-body-sm: 20px;
  --ls-body-sm: -0.28px;

  --text-caption: 12px;
  --lh-caption: 16px;

  --text-code: 13px;
  --lh-code: 20px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-display: 600; /* display ceiling, never 700 */
}

/* Composite shorthands (font: shorthand, family last) */
:root {
  --type-display-xl: var(--weight-display) var(--text-display-xl) / var(--lh-display-xl) var(--font-sans);
  --type-display-lg: var(--weight-display) var(--text-display-lg) / var(--lh-display-lg) var(--font-sans);
  --type-display-md: var(--weight-display) var(--text-display-md) / var(--lh-display-md) var(--font-sans);
  --type-display-sm: var(--weight-display) var(--text-display-sm) / var(--lh-display-sm) var(--font-sans);
  --type-body-lg: var(--weight-regular) var(--text-body-lg) / var(--lh-body-lg) var(--font-sans);
  --type-body-md: var(--weight-regular) var(--text-body-md) / var(--lh-body-md) var(--font-sans);
  --type-body-md-strong: var(--weight-medium) var(--text-body-md) / var(--lh-body-md) var(--font-sans);
  --type-body-sm: var(--weight-regular) var(--text-body-sm) / var(--lh-body-sm) var(--font-sans);
  --type-body-sm-strong: var(--weight-medium) var(--text-body-sm) / var(--lh-body-sm) var(--font-sans);
  --type-caption: var(--weight-regular) var(--text-caption) / var(--lh-caption) var(--font-sans);
  --type-caption-mono: var(--weight-regular) var(--text-caption) / var(--lh-caption) var(--font-mono);
  --type-code: var(--weight-regular) var(--text-code) / var(--lh-code) var(--font-mono);
  --type-button-md: var(--weight-medium) var(--text-body-sm) / var(--lh-body-sm) var(--font-sans);
  --type-button-lg: var(--weight-medium) var(--text-body-md) / var(--lh-body-md) var(--font-sans);
}