/* Material Design 3 — Type Scale
   15 baseline styles across 5 roles (Display, Headline, Title, Body, Label) × 3 sizes.
   Brand typeface (Roboto Flex) drives Display + Headline; Plain typeface (Roboto)
   drives Title, Body, Label. Each style exposes font / weight / size / line-height /
   tracking axis tokens plus a `--md-sys-typescale-<style>` shorthand for the `font:` prop. */

:root {
  /* Reference typefaces */
  --md-ref-typeface-brand: var(--font-roboto-flex), var(--font-roboto), system-ui, sans-serif;
  --md-ref-typeface-plain: var(--font-roboto), system-ui, sans-serif;
  --md-ref-typeface-mono: var(--font-roboto-mono), ui-monospace, monospace;

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

  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-size: 2.8125rem;   /* 45 */
  --md-sys-typescale-display-medium-line-height: 3.25rem; /* 52 */
  --md-sys-typescale-display-medium-tracking: 0;
  --md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-brand);

  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-size: 2.25rem;   /* 36 */
  --md-sys-typescale-display-small-line-height: 2.75rem; /* 44 */
  --md-sys-typescale-display-small-tracking: 0;
  --md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-brand);

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

  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-size: 1.75rem;   /* 28 */
  --md-sys-typescale-headline-medium-line-height: 2.25rem; /* 36 */
  --md-sys-typescale-headline-medium-tracking: 0;
  --md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-brand);

  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-size: 1.5rem;   /* 24 */
  --md-sys-typescale-headline-small-line-height: 2rem; /* 32 */
  --md-sys-typescale-headline-small-tracking: 0;
  --md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-brand);

  /* ---------- Title ---------- */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-size: 1.375rem;   /* 22 */
  --md-sys-typescale-title-large-line-height: 1.75rem; /* 28 */
  --md-sys-typescale-title-large-tracking: 0;
  --md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-plain);

  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-size: 1rem;   /* 16 */
  --md-sys-typescale-title-medium-line-height: 1.5rem; /* 24 */
  --md-sys-typescale-title-medium-tracking: 0.009375rem; /* 0.15px */
  --md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-plain);

  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-size: 0.875rem;   /* 14 */
  --md-sys-typescale-title-small-line-height: 1.25rem; /* 20 */
  --md-sys-typescale-title-small-tracking: 0.00625rem; /* 0.1px */
  --md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);

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

  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-size: 0.875rem;   /* 14 */
  --md-sys-typescale-body-medium-line-height: 1.25rem; /* 20 */
  --md-sys-typescale-body-medium-tracking: 0.015625rem; /* 0.25px */
  --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-plain);

  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-size: 0.75rem;   /* 12 */
  --md-sys-typescale-body-small-line-height: 1rem; /* 16 */
  --md-sys-typescale-body-small-tracking: 0.025rem; /* 0.4px */
  --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-plain);

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

  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-size: 0.75rem;   /* 12 */
  --md-sys-typescale-label-medium-line-height: 1rem; /* 16 */
  --md-sys-typescale-label-medium-tracking: 0.03125rem; /* 0.5px */
  --md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-plain);

  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-size: 0.6875rem;   /* 11 */
  --md-sys-typescale-label-small-line-height: 1rem; /* 16 */
  --md-sys-typescale-label-small-tracking: 0.03125rem; /* 0.5px */
  --md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-plain);
}