/* Typography utility classes consume the semantic bridge layer only. */
.typography-body-large {
  font-family: var(--body-large-font-desktop);
  font-size: var(--body-large-size-rem-smartphone);
  font-weight: var(--body-large-weight-desktop);
  line-height: var(--body-large-line-height-rem-smartphone);
}

.typography-body-small {
  font-family: var(--body-small-font-desktop);
  font-size: var(--body-small-size-rem-smartphone);
  font-weight: var(--body-small-weight-desktop);
  line-height: var(--body-small-line-height-rem-smartphone);
}

.typography-display-large {
  font-family: var(--display-large-font-desktop);
  font-size: var(--display-large-size-rem-smartphone);
  font-weight: var(--display-large-weight-desktop);
  line-height: var(--display-large-line-height-rem-smartphone);
}

.typography-heading-large {
  font-family: var(--heading-large-font-desktop);
  font-size: var(--heading-large-size-rem-smartphone);
  font-weight: var(--heading-large-weight-desktop);
  line-height: var(--heading-large-line-height-rem-smartphone);
}

.typography-heading-medium {
  font-family: var(--heading-medium-font-desktop);
  font-size: var(--heading-medium-size-rem-smartphone);
  font-weight: var(--heading-medium-weight-desktop);
  line-height: var(--heading-medium-line-height-rem-smartphone);
}

.typography-heading-small {
  font-family: var(--heading-small-font-desktop);
  font-size: var(--heading-small-size-rem-smartphone);
  font-weight: var(--heading-small-weight-desktop);
  line-height: var(--heading-small-line-height-rem-smartphone);
}

.typography-label-large {
  font-family: var(--label-large-font-desktop);
  font-size: var(--label-large-size-rem-desktop);
  font-weight: var(--label-large-weight-desktop);
  line-height: var(--label-large-line-height-rem-desktop);
}

.typography-label-medium {
  font-family: var(--label-medium-font-desktop);
  font-size: var(--label-medium-size-rem-desktop);
  font-weight: var(--label-medium-weight-desktop);
  line-height: var(--label-medium-line-height-rem-desktop);
}

.typography-label-small {
  font-family: var(--label-small-font-desktop);
  font-size: var(--label-small-size-rem-smartphone);
  font-weight: var(--label-small-weight-desktop);
  line-height: var(--label-small-line-height-rem-smartphone);
}

.typography-label-x-large {
  font-family: var(--label-x-large-font-desktop);
  font-size: var(--label-x-large-size-rem-smartphone);
  font-weight: var(--label-x-large-weight-desktop);
  line-height: var(--label-x-large-line-height-rem-smartphone);
}

.typography-title-large {
  font-family: var(--title-large-font-desktop);
  font-size: var(--title-large-size-rem-smartphone);
  font-weight: var(--title-large-weight-desktop);
  line-height: var(--title-large-line-height-rem-smartphone);
}

.typography-title-small {
  font-family: var(--title-small-font-desktop);
  font-size: var(--title-small-size-rem-smartphone);
  font-weight: var(--title-small-weight-desktop);
  line-height: var(--title-small-line-height-rem-smartphone);
}

@media (width >= 768px) {
  
  .typography-body-large {
    font-size: var(--body-large-size-rem-desktop);
    line-height: var(--body-large-line-height-rem-desktop);
  }

  .typography-body-small {
    font-size: var(--body-small-size-rem-desktop);
    line-height: var(--body-small-line-height-rem-desktop);
  }

  .typography-display-large {
    font-size: var(--display-large-size-rem-desktop);
    line-height: var(--display-large-line-height-rem-desktop);
  }

  .typography-heading-large {
    font-size: var(--heading-large-size-rem-desktop);
    line-height: var(--heading-large-line-height-rem-desktop);
  }

  .typography-heading-medium {
    font-size: var(--heading-medium-size-rem-desktop);
    line-height: var(--heading-medium-line-height-rem-desktop);
  }

  .typography-heading-small {
    font-size: var(--heading-small-size-rem-desktop);
    line-height: var(--heading-small-line-height-rem-desktop);
  }

  .typography-label-small {
    font-size: var(--label-small-size-rem-desktop);
    line-height: var(--label-small-line-height-rem-desktop);
  }

  .typography-label-x-large {
    font-size: var(--label-x-large-size-rem-desktop);
    line-height: var(--label-x-large-line-height-rem-desktop);
  }

  .typography-title-large {
    font-size: var(--title-large-size-rem-desktop);
    line-height: var(--title-large-line-height-rem-desktop);
  }

  .typography-title-small {
    font-size: var(--title-small-size-rem-desktop);
    line-height: var(--title-small-line-height-rem-desktop);
  }
}