/* Generated from the type roles. Colour comes from the text.* roles and spacing
   from the margin.* roles, so a class here sets type and nothing else. */

.text-heading-1 {
  font-family: var(--sg-heading-1-font-family);
  font-size: var(--sg-heading-1-font-size);
  line-height: var(--sg-heading-1-line-height);
  font-weight: var(--sg-heading-1-font-weight);
}

.text-heading-2 {
  font-family: var(--sg-heading-2-font-family);
  font-size: var(--sg-heading-2-font-size);
  line-height: var(--sg-heading-2-line-height);
  font-weight: var(--sg-heading-2-font-weight);
}

.text-heading-3 {
  font-family: var(--sg-heading-3-font-family);
  font-size: var(--sg-heading-3-font-size);
  line-height: var(--sg-heading-3-line-height);
  font-weight: var(--sg-heading-3-font-weight);
}

.text-heading-4 {
  font-family: var(--sg-heading-4-font-family);
  font-size: var(--sg-heading-4-font-size);
  line-height: var(--sg-heading-4-line-height);
  font-weight: var(--sg-heading-4-font-weight);
}

.text-body-large {
  font-family: var(--sg-body-large-font-family);
  font-size: var(--sg-body-large-font-size);
  line-height: var(--sg-body-large-line-height);
  font-weight: var(--sg-body-large-font-weight);
}

.text-body-medium {
  font-family: var(--sg-body-medium-font-family);
  font-size: var(--sg-body-medium-font-size);
  line-height: var(--sg-body-medium-line-height);
  font-weight: var(--sg-body-medium-font-weight);
}

.text-body-small {
  font-family: var(--sg-body-small-font-family);
  font-size: var(--sg-body-small-font-size);
  line-height: var(--sg-body-small-line-height);
  font-weight: var(--sg-body-small-font-weight);
}

.text-body-x-small {
  font-family: var(--sg-body-x-small-font-family);
  font-size: var(--sg-body-x-small-font-size);
  line-height: var(--sg-body-x-small-line-height);
  font-weight: var(--sg-body-x-small-font-weight);
}