/* ==========================================================================
 * STM Design System → Angular Material Bridge
 * ==========================================================================
 * Maps STM design token CSS custom properties to Angular Material's
 * --mat-* and --mdc-* variables. Load AFTER stm-light.css (or brand variant)
 * and AFTER Angular Material's theme CSS.
 *
 * Variable names match the output of transform-tokens.js:
 *   --color-primary, --color-onPrimary, --color-error, etc.
 *   --typography-body-font-family, --typography-label-font-weight, etc.
 * ========================================================================== */

/* ── Primary Color (replaces Indigo #3f51b5) ── */
html {
  --mat-option-selected-state-label-text-color: var(--stm-color-primary);
  --mat-full-pseudo-checkbox-selected-icon-color: var(--stm-color-primary);
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--stm-color-primary);
}

/* ── Text Fields ── */
html {
  --mdc-filled-text-field-caret-color: var(--stm-color-primary);
  --mdc-filled-text-field-focus-active-indicator-color: var(--stm-color-primary);
  --mdc-filled-text-field-focus-label-text-color: var(--stm-color-primary);
  --mdc-filled-text-field-container-color: var(--stm-color-surfaceVariant);
  --mdc-filled-text-field-label-text-color: var(--stm-color-onSurfaceVariant);
  --mdc-filled-text-field-input-text-color: var(--stm-color-onSurface);
  --mdc-filled-text-field-input-text-placeholder-color: var(--stm-color-onSurfaceSubtle);
  --mdc-filled-text-field-error-label-text-color: var(--stm-color-error);
  --mdc-filled-text-field-error-caret-color: var(--stm-color-error);
  --mdc-filled-text-field-error-active-indicator-color: var(--stm-color-error);
  --mdc-outlined-text-field-caret-color: var(--stm-color-primary);
  --mdc-outlined-text-field-focus-outline-color: var(--stm-color-primary);
  --mdc-outlined-text-field-focus-label-text-color: var(--stm-color-primary);
  --mdc-outlined-text-field-label-text-color: var(--stm-color-onSurfaceVariant);
  --mdc-outlined-text-field-input-text-color: var(--stm-color-onSurface);
  --mdc-outlined-text-field-outline-color: var(--stm-color-outline);
  --mdc-outlined-text-field-hover-outline-color: var(--stm-color-outlineStrong);
  --mdc-outlined-text-field-error-outline-color: var(--stm-color-error);
  --mat-form-field-error-text-color: var(--stm-color-error);
}

/* ── Buttons ── */
.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--stm-color-primary);
  --mdc-filled-button-label-text-color: var(--stm-color-onPrimary);
}
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: var(--stm-color-primary);
  --mdc-protected-button-label-text-color: var(--stm-color-onPrimary);
}
.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: var(--stm-color-primary);
}
.mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: var(--stm-color-primary);
}
.mat-mdc-button.mat-warn,
.mat-mdc-unelevated-button.mat-warn,
.mat-mdc-raised-button.mat-warn {
  --mdc-filled-button-container-color: var(--stm-color-error);
  --mdc-filled-button-label-text-color: var(--stm-color-onError);
  --mdc-text-button-label-text-color: var(--stm-color-error);
}
html .mat-mdc-icon-button.mat-primary {
  --mdc-icon-button-icon-color: var(--stm-color-primary);
}
html .mat-mdc-fab.mat-primary, html .mat-mdc-mini-fab.mat-primary {
  --mdc-fab-container-color: var(--stm-color-primary);
  --mat-fab-foreground-color: var(--stm-color-onPrimary);
  --mdc-fab-small-container-color: var(--stm-color-primary);
  --mat-fab-small-foreground-color: var(--stm-color-onPrimary);
}

/* ── Checkbox ── */
.mat-mdc-checkbox.mat-primary, .mat-mdc-checkbox.mat-accent {
  --mdc-checkbox-selected-focus-icon-color: var(--stm-color-primary);
  --mdc-checkbox-selected-hover-icon-color: var(--stm-color-primary);
  --mdc-checkbox-selected-icon-color: var(--stm-color-primary);
  --mdc-checkbox-selected-pressed-icon-color: var(--stm-color-primary);
  --mdc-checkbox-selected-checkmark-color: var(--stm-color-onPrimary);
  --mdc-checkbox-unselected-icon-color: var(--stm-color-outline);
}

/* ── Radio ── */
.mat-mdc-radio-button.mat-primary {
  --mdc-radio-selected-focus-icon-color: var(--stm-color-primary);
  --mdc-radio-selected-hover-icon-color: var(--stm-color-primary);
  --mdc-radio-selected-icon-color: var(--stm-color-primary);
  --mdc-radio-selected-pressed-icon-color: var(--stm-color-primary);
  --mdc-radio-unselected-icon-color: var(--stm-color-outline);
  --mat-radio-label-text-color: var(--stm-color-onSurface);
}

/* ── Switch ── */
html {
  --mdc-switch-selected-handle-color: var(--stm-color-primary);
  --mdc-switch-selected-hover-handle-color: var(--stm-color-primaryHover);
  --mdc-switch-selected-track-color: var(--stm-color-primarySubtle);
  --mdc-switch-selected-hover-track-color: var(--stm-color-primarySubtle);
  --mdc-switch-unselected-track-color: var(--stm-color-outlineVariant);
}

/* ── Tabs ── */
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
  --mdc-tab-indicator-active-indicator-color: var(--stm-color-primary);
  --mat-tab-header-active-label-text-color: var(--stm-color-primary);
  --mat-tab-header-inactive-label-text-color: var(--stm-color-onSurfaceVariant);
}

/* ── Stepper ── */
html {
  --mat-stepper-header-selected-state-icon-background-color: var(--stm-color-primary);
  --mat-stepper-header-selected-state-icon-foreground-color: var(--stm-color-onPrimary);
  --mat-stepper-header-done-state-icon-background-color: var(--stm-color-primary);
  --mat-stepper-header-done-state-icon-foreground-color: var(--stm-color-onPrimary);
  --mat-stepper-line-color: var(--stm-color-outlineVariant);
  --mat-stepper-header-label-text-color: var(--stm-color-onSurfaceVariant);
  --mat-stepper-header-selected-state-label-text-color: var(--stm-color-onSurface);
  --mat-stepper-header-error-state-label-text-color: var(--stm-color-error);
  --mat-stepper-container-color: var(--stm-color-surface);
}

/* ── Progress ── */
.mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: var(--stm-color-primary);
  --mdc-linear-progress-track-color: var(--stm-color-primarySubtle);
}
html {
  --mdc-circular-progress-active-indicator-color: var(--stm-color-primary);
}

/* ── Select ── */
html {
  --mat-select-panel-background-color: var(--stm-color-surface);
  --mat-select-enabled-trigger-text-color: var(--stm-color-onSurface);
  --mat-select-placeholder-text-color: var(--stm-color-onSurfaceSubtle);
  --mat-select-focused-arrow-color: var(--stm-color-primary);
  --mat-select-invalid-arrow-color: var(--stm-color-error);
}

/* ── Dialog ── */
html {
  --mdc-dialog-container-color: var(--stm-color-surface);
  --mdc-dialog-subhead-color: var(--stm-color-onSurface);
  --mdc-dialog-supporting-text-color: var(--stm-color-onSurfaceVariant);
}

/* ── Card, Tooltip, Snackbar, Table, Menu, List ── */
html {
  --mdc-elevated-card-container-color: var(--stm-color-surface);
  --mdc-outlined-card-container-color: var(--stm-color-surface);
  --mdc-outlined-card-outline-color: var(--stm-color-outlineVariant);
  --mdc-plain-tooltip-container-color: var(--stm-color-onSurface);
  --mdc-plain-tooltip-supporting-text-color: var(--stm-color-surface);
  --mdc-snackbar-container-color: var(--stm-color-onSurface);
  --mdc-snackbar-supporting-text-color: var(--stm-color-surface);
  --mat-table-background-color: var(--stm-color-surface);
  --mat-table-header-headline-color: var(--stm-color-onSurface);
  --mat-table-row-item-label-text-color: var(--stm-color-onSurface);
  --mat-table-row-item-outline-color: var(--stm-color-outlineVariant);
  --mat-menu-container-color: var(--stm-color-surface);
  --mat-menu-item-label-text-color: var(--stm-color-onSurface);
  --mat-menu-divider-color: var(--stm-color-outlineVariant);
  --mdc-list-list-item-label-text-color: var(--stm-color-onSurface);
  --mdc-list-list-item-supporting-text-color: var(--stm-color-onSurfaceVariant);
  --mat-divider-color: var(--stm-color-outlineVariant);
}

/* ── Toolbar ── */
html {
  --mat-toolbar-container-background-color: var(--stm-color-surfaceVariant);
  --mat-toolbar-container-text-color: var(--stm-color-onSurface);
}
.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: var(--stm-color-primary);
  --mat-toolbar-container-text-color: var(--stm-color-onPrimary);
}

/* ── App Background ── */
html {
  --mat-app-background-color: var(--stm-color-surfaceVariant);
  --mat-app-text-color: var(--stm-color-onSurface);
}

/* ── Focus Indicator ── */
html {
  --mat-focus-indicator-border-color: var(--stm-color-primary);
  --mat-mdc-focus-indicator-border-color: var(--stm-color-primary);
}

/* ── Badge ── */
html {
  --mat-badge-background-color: var(--stm-color-primary);
  --mat-badge-text-color: var(--stm-color-onPrimary);
}

/* ── Datepicker ── */
html {
  --mat-datepicker-calendar-date-selected-state-background-color: var(--stm-color-primary);
  --mat-datepicker-calendar-date-selected-state-text-color: var(--stm-color-onPrimary);
  --mat-datepicker-calendar-date-focus-state-background-color: var(--stm-color-primarySubtle);
  --mat-datepicker-calendar-date-hover-state-background-color: var(--stm-color-primarySubtle);
  --mat-datepicker-toggle-active-state-icon-color: var(--stm-color-primary);
  --mat-datepicker-calendar-date-today-outline-color: var(--stm-color-primary);
  --mat-datepicker-calendar-container-background-color: var(--stm-color-surface);
  --mat-datepicker-calendar-container-text-color: var(--stm-color-onSurface);
}

/* ── Expansion, Sidenav, Paginator, Autocomplete, Slider ── */
html {
  --mat-expansion-container-background-color: var(--stm-color-surface);
  --mat-expansion-container-text-color: var(--stm-color-onSurface);
  --mat-expansion-header-text-color: var(--stm-color-onSurface);
  --mat-expansion-actions-divider-color: var(--stm-color-outlineVariant);
  --mat-sidenav-container-background-color: var(--stm-color-surface);
  --mat-sidenav-container-text-color: var(--stm-color-onSurface);
  --mat-sidenav-content-background-color: var(--stm-color-surfaceVariant);
  --mat-sidenav-container-divider-color: var(--stm-color-outlineVariant);
  --mat-paginator-container-background-color: var(--stm-color-surface);
  --mat-paginator-container-text-color: var(--stm-color-onSurface);
  --mat-autocomplete-background-color: var(--stm-color-surface);
  --mdc-slider-handle-color: var(--stm-color-primary);
  --mdc-slider-active-track-color: var(--stm-color-primary);
  --mdc-slider-inactive-track-color: var(--stm-color-primarySubtle);
}

/* ==========================================================================
 * M3 system tokens (--mat-sys-*) — TOK-29, Angular Material v18+ (M3 themes)
 * ==========================================================================
 * Everything ABOVE this block targets the M2-era per-component tokens
 * (--mdc-* / --mat-{component}-*), which Angular Material renames across
 * majors. From v18 (M3 stable; documented public theming API in v19/v20)
 * components read the version-stable SYSTEM tokens below — an M3-themed
 * consumer gets brand coherence from this block alone, and the legacy block
 * keeps M2 consumers working. Per-component verification against the actual
 * consumer's Angular Material version stays consumer-gated (spec §TOK-29).
 *
 * Deliberate approximations (no 1:1 STM token):
 *   tertiary            → the indigo family (STM's third accent; "undecided")
 *   inverse-*           → onSurface/surface flipped + primarySubtle
 *   surface-container-* → the surface/surfaceContainer/surfaceVariant ramp
 *   level5              → clamped to elevation level-004 (STM tops out at 4)
 * Not mapped (no runtime STM source; vendor defaults stand):
 *   shape corners (STM radius is compile-time SCSS), state-layer opacities,
 *   shadow/scrim (STM shadow color is baked into its elevation composites).
 * ========================================================================== */

/* ── M3 color roles ── */
html {
  --mat-sys-primary: var(--stm-color-primary);
  --mat-sys-on-primary: var(--stm-color-onPrimary);
  --mat-sys-primary-container: var(--stm-color-primaryContainer);
  --mat-sys-on-primary-container: var(--stm-color-onPrimaryContainer);
  --mat-sys-secondary: var(--stm-color-neutral);
  --mat-sys-on-secondary: var(--stm-color-onNeutral);
  --mat-sys-secondary-container: var(--stm-color-neutralContainer);
  --mat-sys-on-secondary-container: var(--stm-color-onNeutralContainer);
  --mat-sys-tertiary: var(--stm-color-indigo);
  --mat-sys-on-tertiary: var(--stm-color-onIndigo);
  --mat-sys-tertiary-container: var(--stm-color-indigoContainer);
  --mat-sys-on-tertiary-container: var(--stm-color-onIndigoSubtle);
  --mat-sys-error: var(--stm-color-error);
  --mat-sys-on-error: var(--stm-color-onError);
  --mat-sys-error-container: var(--stm-color-errorContainer);
  --mat-sys-on-error-container: var(--stm-color-onErrorContainer);

  --mat-sys-background: var(--stm-color-pageBackground);
  --mat-sys-on-background: var(--stm-color-onSurface);
  --mat-sys-surface: var(--stm-color-surface);
  --mat-sys-on-surface: var(--stm-color-onSurface);
  --mat-sys-surface-variant: var(--stm-color-surfaceVariant);
  --mat-sys-on-surface-variant: var(--stm-color-onSurfaceVariant);
  --mat-sys-surface-container-lowest: var(--stm-color-surface);
  --mat-sys-surface-container-low: var(--stm-color-surfaceContainer);
  --mat-sys-surface-container: var(--stm-color-surfaceContainer);
  --mat-sys-surface-container-high: var(--stm-color-surfaceVariant);
  --mat-sys-surface-container-highest: var(--stm-color-surfaceVariant);
  --mat-sys-surface-dim: var(--stm-color-surfaceVariant);
  --mat-sys-surface-bright: var(--stm-color-surface);
  --mat-sys-surface-tint: var(--stm-color-primary);

  --mat-sys-inverse-surface: var(--stm-color-onSurface);
  --mat-sys-inverse-on-surface: var(--stm-color-surface);
  --mat-sys-inverse-primary: var(--stm-color-primarySubtle);

  --mat-sys-outline: var(--stm-color-outline);
  --mat-sys-outline-variant: var(--stm-color-outlineVariant);
}

/* ── M3 elevation levels (box-shadow composites) ── */
html {
  --mat-sys-level0: var(--stm-elevation-level-000);
  --mat-sys-level1: var(--stm-elevation-level-001);
  --mat-sys-level2: var(--stm-elevation-level-002);
  --mat-sys-level3: var(--stm-elevation-level-003);
  --mat-sys-level4: var(--stm-elevation-level-004);
  --mat-sys-level5: var(--stm-elevation-level-004);
}

/* ── M3 typescale (parts + the font shorthand Angular Material also reads) ──
 * STM ramp mapping: display→display/heading1/heading2, headline→heading2-4,
 * title→heading4-6, body→bodyLarge/body/bodySmall, label→label/labelSmall. */
html {
  --mat-sys-display-large-font: var(--stm-typography-display-font-family);
  --mat-sys-display-large-size: var(--stm-typography-display-font-size);
  --mat-sys-display-large-weight: var(--stm-typography-display-font-weight);
  --mat-sys-display-large-line-height: var(--stm-typography-display-line-height);
  --mat-sys-display-large-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font);
  --mat-sys-display-medium-font: var(--stm-typography-heading1-font-family);
  --mat-sys-display-medium-size: var(--stm-typography-heading1-font-size);
  --mat-sys-display-medium-weight: var(--stm-typography-heading1-font-weight);
  --mat-sys-display-medium-line-height: var(--stm-typography-heading1-line-height);
  --mat-sys-display-medium-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
  --mat-sys-display-small-font: var(--stm-typography-heading2-font-family);
  --mat-sys-display-small-size: var(--stm-typography-heading2-font-size);
  --mat-sys-display-small-weight: var(--stm-typography-heading2-font-weight);
  --mat-sys-display-small-line-height: var(--stm-typography-heading2-line-height);
  --mat-sys-display-small-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font);

  --mat-sys-headline-large-font: var(--stm-typography-heading2-font-family);
  --mat-sys-headline-large-size: var(--stm-typography-heading2-font-size);
  --mat-sys-headline-large-weight: var(--stm-typography-heading2-font-weight);
  --mat-sys-headline-large-line-height: var(--stm-typography-heading2-line-height);
  --mat-sys-headline-large-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
  --mat-sys-headline-medium-font: var(--stm-typography-heading3-font-family);
  --mat-sys-headline-medium-size: var(--stm-typography-heading3-font-size);
  --mat-sys-headline-medium-weight: var(--stm-typography-heading3-font-weight);
  --mat-sys-headline-medium-line-height: var(--stm-typography-heading3-line-height);
  --mat-sys-headline-medium-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font);
  --mat-sys-headline-small-font: var(--stm-typography-heading4-font-family);
  --mat-sys-headline-small-size: var(--stm-typography-heading4-font-size);
  --mat-sys-headline-small-weight: var(--stm-typography-heading4-font-weight);
  --mat-sys-headline-small-line-height: var(--stm-typography-heading4-line-height);
  --mat-sys-headline-small-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);

  --mat-sys-title-large-font: var(--stm-typography-heading4-font-family);
  --mat-sys-title-large-size: var(--stm-typography-heading4-font-size);
  --mat-sys-title-large-weight: var(--stm-typography-heading4-font-weight);
  --mat-sys-title-large-line-height: var(--stm-typography-heading4-line-height);
  --mat-sys-title-large-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font);
  --mat-sys-title-medium-font: var(--stm-typography-heading5-font-family);
  --mat-sys-title-medium-size: var(--stm-typography-heading5-font-size);
  --mat-sys-title-medium-weight: var(--stm-typography-heading5-font-weight);
  --mat-sys-title-medium-line-height: var(--stm-typography-heading5-line-height);
  --mat-sys-title-medium-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font);
  --mat-sys-title-small-font: var(--stm-typography-heading6-font-family);
  --mat-sys-title-small-size: var(--stm-typography-heading6-font-size);
  --mat-sys-title-small-weight: var(--stm-typography-heading6-font-weight);
  --mat-sys-title-small-line-height: var(--stm-typography-heading6-line-height);
  --mat-sys-title-small-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font);

  --mat-sys-body-large-font: var(--stm-typography-bodyLarge-font-family);
  --mat-sys-body-large-size: var(--stm-typography-bodyLarge-font-size);
  --mat-sys-body-large-weight: var(--stm-typography-bodyLarge-font-weight);
  --mat-sys-body-large-line-height: var(--stm-typography-bodyLarge-line-height);
  --mat-sys-body-large-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font);
  --mat-sys-body-medium-font: var(--stm-typography-body-font-family);
  --mat-sys-body-medium-size: var(--stm-typography-body-font-size);
  --mat-sys-body-medium-weight: var(--stm-typography-body-font-weight);
  --mat-sys-body-medium-line-height: var(--stm-typography-body-line-height);
  --mat-sys-body-medium-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font);
  --mat-sys-body-small-font: var(--stm-typography-bodySmall-font-family);
  --mat-sys-body-small-size: var(--stm-typography-bodySmall-font-size);
  --mat-sys-body-small-weight: var(--stm-typography-bodySmall-font-weight);
  --mat-sys-body-small-line-height: var(--stm-typography-bodySmall-line-height);
  --mat-sys-body-small-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font);

  --mat-sys-label-large-font: var(--stm-typography-label-font-family);
  --mat-sys-label-large-size: var(--stm-typography-label-font-size);
  --mat-sys-label-large-weight: var(--stm-typography-label-font-weight);
  --mat-sys-label-large-line-height: var(--stm-typography-label-line-height);
  --mat-sys-label-large-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font);
  --mat-sys-label-medium-font: var(--stm-typography-label-font-family);
  --mat-sys-label-medium-size: var(--stm-typography-label-font-size);
  --mat-sys-label-medium-weight: var(--stm-typography-label-font-weight);
  --mat-sys-label-medium-line-height: var(--stm-typography-label-line-height);
  --mat-sys-label-medium-tracking: var(--stm-typography-letterSpacing-normal);
  --mat-sys-label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font);
  --mat-sys-label-small-font: var(--stm-typography-labelSmall-font-family);
  --mat-sys-label-small-size: var(--stm-typography-labelSmall-font-size);
  --mat-sys-label-small-weight: var(--stm-typography-labelSmall-font-weight);
  --mat-sys-label-small-line-height: var(--stm-typography-labelSmall-line-height);
  --mat-sys-label-small-tracking: var(--stm-typography-letterSpacing-wide);
  --mat-sys-label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font);
}