/* Typography Hierarchy Classes */
/* These classes combine font-size from typescale.css with line-height, letter-spacing, and font-weight from typography.css */

/* Display Typography */
.typography-display-large {
  font-size: var(--step-11);
  line-height: var(--display-large-leading);
  letter-spacing: var(--display-large-tracking);
  font-weight: var(--display-large-weight);
}

.typography-display-medium {
  font-size: var(--step-9);
  line-height: var(--display-medium-leading);
  letter-spacing: var(--display-medium-tracking);
  font-weight: var(--display-medium-weight);
}

.typography-display-small {
  font-size: var(--step-7);
  line-height: var(--display-small-leading);
  letter-spacing: var(--display-small-tracking);
  font-weight: var(--display-small-weight);
}

/* Headline Typography */
.typography-headline-large {
  font-size: var(--step-6);
  line-height: var(--headline-large-leading);
  letter-spacing: var(--headline-large-tracking);
  font-weight: var(--headline-large-weight);
}

.typography-headline-medium {
  font-size: var(--step-5);
  line-height: var(--headline-medium-leading);
  letter-spacing: var(--headline-medium-tracking);
  font-weight: var(--headline-medium-weight);
}

.typography-headline-small {
  font-size: var(--step-4);
  line-height: var(--headline-small-leading);
  letter-spacing: var(--headline-small-tracking);
  font-weight: var(--headline-small-weight);
}

/* Title Typography */
.typography-title-large {
  font-size: var(--step-3);
  line-height: var(--title-large-leading);
  letter-spacing: var(--title-large-tracking);
  font-weight: var(--title-large-weight);
}

.typography-title-medium {
  font-size: var(--step-0);
  line-height: var(--title-medium-leading);
  letter-spacing: var(--title-medium-tracking);
  font-weight: var(--title-medium-weight);
}

.typography-title-small {
  font-size: var(--step--1);
  line-height: var(--title-small-leading);
  letter-spacing: var(--title-small-tracking);
  font-weight: var(--title-small-weight);
}

/* Body Typography */
.typography-body-large {
  font-size: var(--step-0);
  line-height: var(--body-large-leading);
  letter-spacing: var(--body-large-tracking);
  font-weight: var(--body-large-weight);
}

.typography-body-medium {
  font-size: var(--step--1);
  line-height: var(--body-medium-leading);
  letter-spacing: var(--body-medium-tracking);
  font-weight: var(--body-medium-weight);
}

.typography-body-small {
  font-size: var(--step--2);
  line-height: var(--body-small-leading);
  letter-spacing: var(--body-small-tracking);
  font-weight: var(--body-small-weight);
}

/* Label Typography */
.typography-label-large {
  font-size: var(--step--1);
  line-height: var(--label-large-leading);
  letter-spacing: var(--label-large-tracking);
  font-weight: var(--label-large-weight);
}

.typography-label-medium {
  font-size: var(--step--2);
  line-height: var(--label-medium-leading);
  letter-spacing: var(--label-medium-tracking);
  font-weight: var(--label-medium-weight);
}

.typography-label-small {
  font-size: var(--step--3);
  line-height: var(--label-small-leading);
  letter-spacing: var(--label-small-tracking);
  font-weight: var(--label-small-weight);
}