/* Material 3 — Typography (type scale)
   Source: Typescale variable collection (45 styles × size/line-height/tracking/weight).
   Brand & Plain fonts both resolve to "Roboto" in this file. Values verbatim from the file. */

:root {
  /* Font families (Font theme collection) */
  --md-sys-typescale-brand-font: "Roboto", system-ui, sans-serif;
  --md-sys-typescale-plain-font: "Roboto", system-ui, sans-serif;
  --md-ref-typeface-mono: "Roboto Mono", ui-monospace, monospace;

  /* Weights */
  --md-sys-typescale-weight-regular: 400;
  --md-sys-typescale-weight-medium: 500;
  --md-sys-typescale-weight-bold: 600;

  /* ---- Display ---- */
  --md-sys-typescale-display-large-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-large-weight: 400;

  --md-sys-typescale-display-medium-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-tracking: 0px;
  --md-sys-typescale-display-medium-weight: 400;

  --md-sys-typescale-display-small-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-display-small-weight: 400;

  /* ---- Headline ---- */
  --md-sys-typescale-headline-large-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-tracking: 0px;
  --md-sys-typescale-headline-large-weight: 400;

  --md-sys-typescale-headline-medium-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-medium-weight: 400;

  --md-sys-typescale-headline-small-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-headline-small-weight: 400;

  /* ---- Title ---- */
  --md-sys-typescale-title-large-font: var(--md-sys-typescale-brand-font);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-large-weight: 400;

  --md-sys-typescale-title-medium-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-medium-weight: 500;

  --md-sys-typescale-title-small-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-title-small-weight: 500;

  /* ---- Body ---- */
  --md-sys-typescale-body-large-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-large-weight: 400;

  --md-sys-typescale-body-medium-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-medium-weight: 400;

  --md-sys-typescale-body-small-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-body-small-weight: 400;

  /* ---- Label ---- */
  --md-sys-typescale-label-large-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-large-weight: 500;

  --md-sys-typescale-label-medium-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-medium-weight: 500;

  --md-sys-typescale-label-small-font: var(--md-sys-typescale-plain-font);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  --md-sys-typescale-label-small-weight: 500;
}

/* Convenience role classes — apply a full type style in one class. */
.md-display-large   { font-family: var(--md-sys-typescale-display-large-font);   font-size: var(--md-sys-typescale-display-large-size);   line-height: var(--md-sys-typescale-display-large-line-height);   letter-spacing: var(--md-sys-typescale-display-large-tracking);   font-weight: var(--md-sys-typescale-display-large-weight); }
.md-display-medium  { font-family: var(--md-sys-typescale-display-medium-font);  font-size: var(--md-sys-typescale-display-medium-size);  line-height: var(--md-sys-typescale-display-medium-line-height);  letter-spacing: var(--md-sys-typescale-display-medium-tracking);  font-weight: var(--md-sys-typescale-display-medium-weight); }
.md-display-small   { font-family: var(--md-sys-typescale-display-small-font);   font-size: var(--md-sys-typescale-display-small-size);   line-height: var(--md-sys-typescale-display-small-line-height);   letter-spacing: var(--md-sys-typescale-display-small-tracking);   font-weight: var(--md-sys-typescale-display-small-weight); }
.md-headline-large  { font-family: var(--md-sys-typescale-headline-large-font);  font-size: var(--md-sys-typescale-headline-large-size);  line-height: var(--md-sys-typescale-headline-large-line-height);  letter-spacing: var(--md-sys-typescale-headline-large-tracking);  font-weight: var(--md-sys-typescale-headline-large-weight); }
.md-headline-medium { font-family: var(--md-sys-typescale-headline-medium-font); font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); font-weight: var(--md-sys-typescale-headline-medium-weight); }
.md-headline-small  { font-family: var(--md-sys-typescale-headline-small-font);  font-size: var(--md-sys-typescale-headline-small-size);  line-height: var(--md-sys-typescale-headline-small-line-height);  letter-spacing: var(--md-sys-typescale-headline-small-tracking);  font-weight: var(--md-sys-typescale-headline-small-weight); }
.md-title-large     { font-family: var(--md-sys-typescale-title-large-font);     font-size: var(--md-sys-typescale-title-large-size);     line-height: var(--md-sys-typescale-title-large-line-height);     letter-spacing: var(--md-sys-typescale-title-large-tracking);     font-weight: var(--md-sys-typescale-title-large-weight); }
.md-title-medium    { font-family: var(--md-sys-typescale-title-medium-font);    font-size: var(--md-sys-typescale-title-medium-size);    line-height: var(--md-sys-typescale-title-medium-line-height);    letter-spacing: var(--md-sys-typescale-title-medium-tracking);    font-weight: var(--md-sys-typescale-title-medium-weight); }
.md-title-small     { font-family: var(--md-sys-typescale-title-small-font);     font-size: var(--md-sys-typescale-title-small-size);     line-height: var(--md-sys-typescale-title-small-line-height);     letter-spacing: var(--md-sys-typescale-title-small-tracking);     font-weight: var(--md-sys-typescale-title-small-weight); }
.md-body-large      { font-family: var(--md-sys-typescale-body-large-font);      font-size: var(--md-sys-typescale-body-large-size);      line-height: var(--md-sys-typescale-body-large-line-height);      letter-spacing: var(--md-sys-typescale-body-large-tracking);      font-weight: var(--md-sys-typescale-body-large-weight); }
.md-body-medium     { font-family: var(--md-sys-typescale-body-medium-font);     font-size: var(--md-sys-typescale-body-medium-size);     line-height: var(--md-sys-typescale-body-medium-line-height);     letter-spacing: var(--md-sys-typescale-body-medium-tracking);     font-weight: var(--md-sys-typescale-body-medium-weight); }
.md-body-small      { font-family: var(--md-sys-typescale-body-small-font);      font-size: var(--md-sys-typescale-body-small-size);      line-height: var(--md-sys-typescale-body-small-line-height);      letter-spacing: var(--md-sys-typescale-body-small-tracking);      font-weight: var(--md-sys-typescale-body-small-weight); }
.md-label-large     { font-family: var(--md-sys-typescale-label-large-font);     font-size: var(--md-sys-typescale-label-large-size);     line-height: var(--md-sys-typescale-label-large-line-height);     letter-spacing: var(--md-sys-typescale-label-large-tracking);     font-weight: var(--md-sys-typescale-label-large-weight); }
.md-label-medium    { font-family: var(--md-sys-typescale-label-medium-font);    font-size: var(--md-sys-typescale-label-medium-size);    line-height: var(--md-sys-typescale-label-medium-line-height);    letter-spacing: var(--md-sys-typescale-label-medium-tracking);    font-weight: var(--md-sys-typescale-label-medium-weight); }
.md-label-small     { font-family: var(--md-sys-typescale-label-small-font);     font-size: var(--md-sys-typescale-label-small-size);     line-height: var(--md-sys-typescale-label-small-line-height);     letter-spacing: var(--md-sys-typescale-label-small-tracking);     font-weight: var(--md-sys-typescale-label-small-weight); }