:root {
  --type-heading-2xl-size: 42px;
  --type-heading-2xl-line: 40px;
  --type-heading-2xl-track: -0.05px;

  --type-heading-xl-size: 28px;
  --type-heading-xl-line: 30px;
  --type-heading-xl-track: 0;

  --type-heading-lg-size: 28px;
  --type-heading-lg-line: 30px;

  --type-heading-md-size: 20px;
  --type-heading-md-line: 24px;
  --type-heading-md-track: -0.02px;

  --type-heading-sm-size: 16px;
  --type-heading-sm-line: 20px;
  --type-heading-sm-track: 1px;

  --type-heading-xs-size: 14px;
  --type-heading-xs-line: 16px;
  --type-heading-xs-track: 1px;

  --type-body-lg-size: 16px;
  --type-body-lg-line: 22px;
  --type-body-md-size: 14px;
  --type-body-md-line: 20px;
  --type-body-sm-size: 12px;
  --type-body-sm-line: 16px;
  --type-body-xs-size: 10px;
  --type-body-xs-line: 16px;

  --type-button-lg-size: 16px;
  --type-button-lg-line: 16px;
  --type-button-lg-track: 0.48px;

  --type-label-lg-size: 16px;
  --type-label-lg-line: 20px;
  --type-label-lg-track: 0;

  --type-label-md-size: 14px;
  --type-label-md-line: 20px;
  --type-label-md-track: 0;
}

.type-heading-2xl,
.type-heading-xl,
.type-heading-lg,
.type-heading-md,
.type-heading-sm,
.type-heading-xs {
  margin: 0;
  color: inherit;
  text-transform: uppercase;
}

.type-heading-2xl {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: var(--type-heading-2xl-size);
  line-height: var(--type-heading-2xl-line);
  letter-spacing: var(--type-heading-2xl-track);
}

.type-heading-xl {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
  letter-spacing: var(--type-heading-xl-track);
}

.type-heading-lg {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-heading-lg-size);
  line-height: var(--type-heading-lg-line);
  font-weight: 700;
}

.type-heading-md {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-heading-md-size);
  line-height: var(--type-heading-md-line);
  letter-spacing: var(--type-heading-md-track);
  font-weight: 700;
  text-transform: none;
}

.type-heading-sm {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
}

.type-heading-xs {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
}

.type-body-lg,
.type-body-md,
.type-body-sm,
.type-body-xs,
.type-button-lg,
.type-label-lg,
.type-label-md {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  color: inherit;
  text-transform: none;
}

.type-body-lg {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  font-weight: 400;
}

.type-body-md {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: 400;
}

.type-body-sm {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: 400;
}

.type-body-xs {
  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-line);
  font-weight: 400;
}

.type-button-lg {
  font-size: var(--type-button-lg-size);
  line-height: var(--type-button-lg-line);
  letter-spacing: var(--type-button-lg-track);
  font-weight: 500;
}

.type-label-lg {
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  letter-spacing: var(--type-label-lg-track);
  font-weight: 500;
}

.type-label-md {
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-line);
  letter-spacing: var(--type-label-md-track);
  font-weight: 500;
}