@define-mixin typo_display-1 {
  font-family: var(--font-display);
  font-size: var(--type-10);
  font-weight: 400;
  line-height: var(--leading-10);
  text-transform: none;
  letter-spacing: var(--tracking-10);
}

@define-mixin typo_display-2 {
  font-family: var(--font-display);
  font-size: var(--type-9);
  font-weight: 400;
  line-height: var(--leading-9);
  text-transform: none;
  letter-spacing: var(--tracking-9);
}

@define-mixin typo_heading-1 {
  font-family: var(--font-header);
  font-size: var(--type-8);
  font-weight: 900;
  line-height: var(--leading-8);
  text-transform: uppercase;
  letter-spacing: var(--tracking-8);
}

@define-mixin typo_heading-2 {
  font-family: var(--font-header);
  font-size: var(--type-7);
  font-weight: 800;
  line-height: var(--leading-7);
  text-transform: uppercase;
  letter-spacing: var(--tracking-7);
}

@define-mixin typo_heading-3 {
  font-family: var(--font-header);
  font-size: var(--type-6);
  font-weight: 800;
  line-height: var(--leading-6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-6);
}

@define-mixin typo_heading-4 {
  font-family: var(--font-header);
  font-size: var(--type-5);
  font-weight: 800;
  line-height: var(--leading-5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-5);
}

@define-mixin typo_heading-5 {
  font-family: var(--font-header);
  font-size: var(--type-4);
  font-weight: 700;
  line-height: var(--leading-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-4);
}

@define-mixin typo_heading-6 {
  font-family: var(--font-header);
  font-size: var(--type-3);
  font-weight: 700;
  line-height: var(--leading-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-3);
}

@define-mixin typo_body-large {
  font-family: var(--font-body);
  font-size: var(--type-2);
  font-weight: 400;
  line-height: var(--leading-2);
  text-transform: none;
  letter-spacing: var(--tracking-2);
}

@define-mixin typo_body-alt {
  font-family: var(--font-body);
  font-size: var(--type-1);
  font-weight: 400;
  line-height: var(--leading-1);
  text-transform: none;
  letter-spacing: var(--tracking-1);
}

@define-mixin typo_body {
  font-family: var(--font-body);
  font-size: var(--type-0);
  font-weight: 400;
  line-height: var(--leading-0);
  text-transform: none;
  letter-spacing: var(--tracking-0);
}

@define-mixin typo_body-small {
  font-family: var(--font-body);
  font-size: var(--type--1);
  font-weight: 400;
  line-height: var(--leading--1);
  text-transform: none;
  letter-spacing: var(--tracking--1);
}

@define-mixin typo_label {
  font-family: var(--font-header);
  font-size: var(--type--2);
  font-weight: 700;
  line-height: var(--leading--2);
  text-transform: none;
  letter-spacing: var(--tracking--2);
}

@define-mixin typo_fine {
  font-family: var(--font-body);
  font-size: var(--type--3);
  font-weight: 400;
  line-height: var(--leading--3);
  text-transform: none;
  letter-spacing: var(--tracking--3);
}

@define-mixin typo_code {
  font-family: var(--font-mono);
  font-size: var(--type--1);
  font-weight: 400;
  line-height: var(--leading--1);
  text-transform: none;
  letter-spacing: var(--tracking-0);
}

@define-mixin typo_table-header {
  font-family: var(--font-header);
  font-size: var(--type--1);
  font-weight: 700;
  line-height: var(--leading-0);
  text-transform: uppercase;
  letter-spacing: var(--tracking-0);
}

@define-mixin typo_table-data {
  font-family: var(--font-mono);
  font-size: var(--type--1);
  font-weight: 400;
  line-height: var(--leading--1);
  text-transform: none;
  letter-spacing: var(--tracking-0);
}

@define-mixin typo_definition-header {
  font-family: var(--font-header);
  font-size: var(--type--0);
  font-weight: 700;
  line-height: var(--leading-0);
  text-transform: uppercase;
  letter-spacing: var(--tracking-0);
}

@define-mixin typo_definition-data {
  font-family: var(--font-mono);
  font-size: var(--type--1);
  font-weight: 400;
  line-height: var(--leading--1);
  text-transform: none;
  letter-spacing: var(--tracking-0);
}

@define-mixin typo_subtitle {
  font-family: var(--font-header);
  font-size: var(--type-0);
  font-weight: 300;
  line-height: var(--leading-0);
  text-transform: uppercase;
  letter-spacing: 0.0875em;
}

@define-mixin typo_meta-label {
  font-family: var(--font-header);
  font-size: var(--type--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--size-1);

  leading: var(--leading--3);
}

@define-mixin typo_meta-data {
  font-family: var(--font-mono);
  font-size: var(--type-0);
  text-transform: uppercase;
  letter-spacing: var(--size--3);

  leading: var(--leading-0);
}
