:root {
  //heading
  --typography-size-heading-h1: 32px;
  --typography-size-heading-h2: 28px;
  --typography-size-heading-h3: 24px;
  --typography-size-heading-h4: 20px;

  //display
  --typography-size-display-h1: 64px;
  --typography-size-display-h2: 46px;
  --typography-size-display-h3: 32px;
  --typography-size-display-h4: 22px;

  --typography-size-body-xs: 12px;
  --typography-size-body-sm: 14px;
  --typography-size-body-md: 16px;
  --typography-size-body-lg: 18px;
  --typography-size-body-xl: 20px;

  //icon 
  --icon-size-sm: 24px;
  --icon-size-md: 32px;
  --icon-size-lg: 40px;
}