/* ══════════════════════════════════════════════════════
   MD3 Typography Utility Classes
   Apply via class="m3-typescale-{role}-{size}"
   ══════════════════════════════════════════════════════ */

/* ── Display ── */
.m3-typescale-display-large {
    font-family: var(--m3-sys-typescale-display-large-font-family);
    font-size: var(--m3-sys-typescale-display-large-size);
    line-height: var(--m3-sys-typescale-display-large-line-height);
    font-weight: var(--m3-sys-typescale-display-large-weight);
    letter-spacing: var(--m3-sys-typescale-display-large-tracking);
}

.m3-typescale-display-medium {
    font-family: var(--m3-sys-typescale-display-medium-font-family);
    font-size: var(--m3-sys-typescale-display-medium-size);
    line-height: var(--m3-sys-typescale-display-medium-line-height);
    font-weight: var(--m3-sys-typescale-display-medium-weight);
    letter-spacing: var(--m3-sys-typescale-display-medium-tracking);
}

.m3-typescale-display-small {
    font-family: var(--m3-sys-typescale-display-small-font-family);
    font-size: var(--m3-sys-typescale-display-small-size);
    line-height: var(--m3-sys-typescale-display-small-line-height);
    font-weight: var(--m3-sys-typescale-display-small-weight);
    letter-spacing: var(--m3-sys-typescale-display-small-tracking);
}

/* ── Headline ── */
.m3-typescale-headline-large {
    font-family: var(--m3-sys-typescale-headline-large-font-family);
    font-size: var(--m3-sys-typescale-headline-large-size);
    line-height: var(--m3-sys-typescale-headline-large-line-height);
    font-weight: var(--m3-sys-typescale-headline-large-weight);
    letter-spacing: var(--m3-sys-typescale-headline-large-tracking);
}

.m3-typescale-headline-medium {
    font-family: var(--m3-sys-typescale-headline-medium-font-family);
    font-size: var(--m3-sys-typescale-headline-medium-size);
    line-height: var(--m3-sys-typescale-headline-medium-line-height);
    font-weight: var(--m3-sys-typescale-headline-medium-weight);
    letter-spacing: var(--m3-sys-typescale-headline-medium-tracking);
}

.m3-typescale-headline-small {
    font-family: var(--m3-sys-typescale-headline-small-font-family);
    font-size: var(--m3-sys-typescale-headline-small-size);
    line-height: var(--m3-sys-typescale-headline-small-line-height);
    font-weight: var(--m3-sys-typescale-headline-small-weight);
    letter-spacing: var(--m3-sys-typescale-headline-small-tracking);
}

/* ── Title ── */
.m3-typescale-title-large {
    font-family: var(--m3-sys-typescale-title-large-font-family);
    font-size: var(--m3-sys-typescale-title-large-size);
    line-height: var(--m3-sys-typescale-title-large-line-height);
    font-weight: var(--m3-sys-typescale-title-large-weight);
    letter-spacing: var(--m3-sys-typescale-title-large-tracking);
}

.m3-typescale-title-medium {
    font-family: var(--m3-sys-typescale-title-medium-font-family);
    font-size: var(--m3-sys-typescale-title-medium-size);
    line-height: var(--m3-sys-typescale-title-medium-line-height);
    font-weight: var(--m3-sys-typescale-title-medium-weight);
    letter-spacing: var(--m3-sys-typescale-title-medium-tracking);
}

.m3-typescale-title-small {
    font-family: var(--m3-sys-typescale-title-small-font-family);
    font-size: var(--m3-sys-typescale-title-small-size);
    line-height: var(--m3-sys-typescale-title-small-line-height);
    font-weight: var(--m3-sys-typescale-title-small-weight);
    letter-spacing: var(--m3-sys-typescale-title-small-tracking);
}

/* ── Body ── */
.m3-typescale-body-large {
    font-family: var(--m3-sys-typescale-body-large-font-family);
    font-size: var(--m3-sys-typescale-body-large-size);
    line-height: var(--m3-sys-typescale-body-large-line-height);
    font-weight: var(--m3-sys-typescale-body-large-weight);
    letter-spacing: var(--m3-sys-typescale-body-large-tracking);
}

.m3-typescale-body-medium {
    font-family: var(--m3-sys-typescale-body-medium-font-family);
    font-size: var(--m3-sys-typescale-body-medium-size);
    line-height: var(--m3-sys-typescale-body-medium-line-height);
    font-weight: var(--m3-sys-typescale-body-medium-weight);
    letter-spacing: var(--m3-sys-typescale-body-medium-tracking);
}

.m3-typescale-body-small {
    font-family: var(--m3-sys-typescale-body-small-font-family);
    font-size: var(--m3-sys-typescale-body-small-size);
    line-height: var(--m3-sys-typescale-body-small-line-height);
    font-weight: var(--m3-sys-typescale-body-small-weight);
    letter-spacing: var(--m3-sys-typescale-body-small-tracking);
}

/* ── Label ── */
.m3-typescale-label-large {
    font-family: var(--m3-sys-typescale-label-large-font-family);
    font-size: var(--m3-sys-typescale-label-large-size);
    line-height: var(--m3-sys-typescale-label-large-line-height);
    font-weight: var(--m3-sys-typescale-label-large-weight);
    letter-spacing: var(--m3-sys-typescale-label-large-tracking);
}

.m3-typescale-label-medium {
    font-family: var(--m3-sys-typescale-label-medium-font-family);
    font-size: var(--m3-sys-typescale-label-medium-size);
    line-height: var(--m3-sys-typescale-label-medium-line-height);
    font-weight: var(--m3-sys-typescale-label-medium-weight);
    letter-spacing: var(--m3-sys-typescale-label-medium-tracking);
}

.m3-typescale-label-small {
    font-family: var(--m3-sys-typescale-label-small-font-family);
    font-size: var(--m3-sys-typescale-label-small-size);
    line-height: var(--m3-sys-typescale-label-small-line-height);
    font-weight: var(--m3-sys-typescale-label-small-weight);
    letter-spacing: var(--m3-sys-typescale-label-small-tracking);
}