/* ============================================================
   Typography — Material 3 type scale (15 roles)
   ------------------------------------------------------------
   Built on the Typescale Variable collection materialized into
   fig-tokens.css. Those tokens are UNITLESS floats, so lengths are
   composed here with calc(var(--x) * 1px). Each role has a base
   class and an .-emphasized modifier that swaps to the emphasized
   weight axis (M3 Expressive weight feedback).
   ============================================================ */

.md-typescale-display-large,
.md-typescale-display-medium,
.md-typescale-display-small,
.md-typescale-headline-large,
.md-typescale-headline-medium,
.md-typescale-headline-small { font-family: var(--md-ref-typeface-brand); }

.md-typescale-title-large,
.md-typescale-title-medium,
.md-typescale-title-small,
.md-typescale-body-large,
.md-typescale-body-medium,
.md-typescale-body-small,
.md-typescale-label-large,
.md-typescale-label-medium,
.md-typescale-label-small { font-family: var(--md-ref-typeface-plain); }

.md-typescale-display-large {
  font-size: calc(var(--static-display-large-size) * 1px);
  line-height: calc(var(--static-display-large-line-height) * 1px);
  letter-spacing: calc(var(--static-display-large-tracking) * 1px);
  font-weight: var(--static-display-large-weight);
}
.md-typescale-display-large.md-emphasized { font-weight: var(--static-display-large-weight-emphasized); }

.md-typescale-display-medium {
  font-size: calc(var(--static-display-medium-size) * 1px);
  line-height: calc(var(--static-display-medium-line-height) * 1px);
  letter-spacing: calc(var(--static-display-medium-tracking) * 1px);
  font-weight: var(--static-display-medium-weight);
}
.md-typescale-display-medium.md-emphasized { font-weight: var(--static-display-medium-weight-emphasized); }

.md-typescale-display-small {
  font-size: calc(var(--static-display-small-size) * 1px);
  line-height: calc(var(--static-display-small-line-height) * 1px);
  letter-spacing: calc(var(--static-display-small-tracking) * 1px);
  font-weight: var(--static-display-small-weight);
}
.md-typescale-display-small.md-emphasized { font-weight: var(--static-display-small-weight-emphasized); }

.md-typescale-headline-large {
  font-size: calc(var(--static-headline-large-size) * 1px);
  line-height: calc(var(--static-headline-large-line-height) * 1px);
  letter-spacing: calc(var(--static-headline-large-tracking) * 1px);
  font-weight: var(--static-headline-large-weight);
}
.md-typescale-headline-large.md-emphasized { font-weight: var(--static-headline-large-weight-emphasized); }

.md-typescale-headline-medium {
  font-size: calc(var(--static-headline-medium-size) * 1px);
  line-height: calc(var(--static-headline-medium-line-height) * 1px);
  letter-spacing: calc(var(--static-headline-medium-tracking) * 1px);
  font-weight: var(--static-headline-medium-weight);
}
.md-typescale-headline-medium.md-emphasized { font-weight: var(--static-headline-medium-weight-emphasized); }

.md-typescale-headline-small {
  font-size: calc(var(--static-headline-small-size) * 1px);
  line-height: calc(var(--static-headline-small-line-height) * 1px);
  letter-spacing: calc(var(--static-headline-small-tracking) * 1px);
  font-weight: var(--static-headline-small-weight);
}
.md-typescale-headline-small.md-emphasized { font-weight: var(--static-headline-small-weight-emphasized); }

.md-typescale-title-large {
  font-size: calc(var(--static-title-large-size) * 1px);
  line-height: calc(var(--static-title-large-line-height) * 1px);
  letter-spacing: calc(var(--static-title-large-tracking) * 1px);
  font-weight: var(--static-title-large-weight);
}
.md-typescale-title-large.md-emphasized { font-weight: var(--static-title-large-weight-emphasized); }

.md-typescale-title-medium {
  font-size: calc(var(--static-title-medium-size) * 1px);
  line-height: calc(var(--static-title-medium-line-height) * 1px);
  letter-spacing: calc(var(--static-title-medium-tracking) * 1px);
  font-weight: var(--static-title-medium-weight);
}
.md-typescale-title-medium.md-emphasized { font-weight: var(--static-title-medium-weight-emphasized); }

.md-typescale-title-small {
  font-size: calc(var(--static-title-small-size) * 1px);
  line-height: calc(var(--static-title-small-line-height) * 1px);
  letter-spacing: calc(var(--static-title-small-tracking) * 1px);
  font-weight: var(--static-title-small-weight);
}
.md-typescale-title-small.md-emphasized { font-weight: var(--static-title-small-weight-emphasized); }

.md-typescale-body-large {
  font-size: calc(var(--static-body-large-size) * 1px);
  line-height: calc(var(--static-body-large-line-height) * 1px);
  letter-spacing: calc(var(--static-body-large-tracking) * 1px);
  font-weight: var(--static-body-large-weight);
}
.md-typescale-body-large.md-emphasized { font-weight: var(--static-body-large-weight-emphasized); }

.md-typescale-body-medium {
  font-size: calc(var(--static-body-medium-size) * 1px);
  line-height: calc(var(--static-body-medium-line-height) * 1px);
  letter-spacing: calc(var(--static-body-medium-tracking) * 1px);
  font-weight: var(--static-body-medium-weight);
}
.md-typescale-body-medium.md-emphasized { font-weight: var(--static-body-medium-weight-emphasized); }

.md-typescale-body-small {
  font-size: calc(var(--static-body-small-size) * 1px);
  line-height: calc(var(--static-body-small-line-height) * 1px);
  letter-spacing: calc(var(--static-body-small-tracking) * 1px);
  font-weight: var(--static-body-small-weight);
}
.md-typescale-body-small.md-emphasized { font-weight: var(--static-body-small-weight-emphasized); }

.md-typescale-label-large {
  font-size: calc(var(--static-label-large-size) * 1px);
  line-height: calc(var(--static-label-large-line-height) * 1px);
  letter-spacing: calc(var(--static-label-large-tracking) * 1px);
  font-weight: var(--static-label-large-weight);
}
.md-typescale-label-large.md-emphasized { font-weight: var(--static-label-large-weight-emphasized); }

.md-typescale-label-medium {
  font-size: calc(var(--static-label-medium-size) * 1px);
  line-height: calc(var(--static-label-medium-line-height) * 1px);
  letter-spacing: calc(var(--static-label-medium-tracking) * 1px);
  font-weight: var(--static-label-medium-weight);
}
.md-typescale-label-medium.md-emphasized { font-weight: var(--static-label-medium-weight-emphasized); }

.md-typescale-label-small {
  font-size: calc(var(--static-label-small-size) * 1px);
  line-height: calc(var(--static-label-small-line-height) * 1px);
  letter-spacing: calc(var(--static-label-small-tracking) * 1px);
  font-weight: var(--static-label-small-weight);
}
.md-typescale-label-small.md-emphasized { font-weight: var(--static-label-small-weight-emphasized); }