/* ============================================================
   TYPOGRAPHY
   Two faces, two roles. Display (700) is sentence-case, never
   letter-spaced. Text (400/500) carries body, button, link.
   ============================================================ */

:root {
  /* ---- Display scale (UberMove 700) ---- */
  --type-display-xxl-size: 52px;  --type-display-xxl-lh: 64px;  --type-display-xxl-weight: 700;
  --type-display-xl-size: 36px;   --type-display-xl-lh: 44px;   --type-display-xl-weight: 700;
  --type-display-lg-size: 32px;   --type-display-lg-lh: 40px;   --type-display-lg-weight: 700;
  --type-display-md-size: 24px;   --type-display-md-lh: 32px;   --type-display-md-weight: 700;
  --type-display-sm-size: 20px;   --type-display-sm-lh: 28px;   --type-display-sm-weight: 700;

  /* ---- Body scale (UberMoveText 400/500) ---- */
  --type-body-lg-size: 18px;        --type-body-lg-lh: 24px;        --type-body-lg-weight: 500;
  --type-body-md-size: 16px;        --type-body-md-lh: 24px;        --type-body-md-weight: 400;
  --type-body-md-strong-size: 16px; --type-body-md-strong-lh: 20px; --type-body-md-strong-weight: 500;
  --type-body-sm-size: 14px;        --type-body-sm-lh: 20px;        --type-body-sm-weight: 400;
  --type-body-sm-strong-size: 14px; --type-body-sm-strong-lh: 16px; --type-body-sm-strong-weight: 500;
  --type-caption-size: 12px;        --type-caption-lh: 20px;        --type-caption-weight: 400;

  /* ---- Button labels (UberMoveText 500) ---- */
  --type-button-large-size: 18px;   --type-button-large-lh: 24px;   --type-button-large-weight: 500;
  --type-button-md-size: 16px;      --type-button-md-lh: 20px;      --type-button-md-weight: 500;
}

/* ---- Reusable type classes ---- */
.u-display-xxl { font-family: var(--font-display); font-weight: 700; font-size: var(--type-display-xxl-size); line-height: var(--type-display-xxl-lh); font-feature-settings: var(--font-display-features); letter-spacing: 0; }
.u-display-xl  { font-family: var(--font-display); font-weight: 700; font-size: var(--type-display-xl-size);  line-height: var(--type-display-xl-lh);  font-feature-settings: var(--font-display-features); letter-spacing: 0; }
.u-display-lg  { font-family: var(--font-display); font-weight: 700; font-size: var(--type-display-lg-size);  line-height: var(--type-display-lg-lh);  font-feature-settings: var(--font-display-features); letter-spacing: 0; }
.u-display-md  { font-family: var(--font-display); font-weight: 700; font-size: var(--type-display-md-size);  line-height: var(--type-display-md-lh);  font-feature-settings: var(--font-display-features); letter-spacing: 0; }
.u-display-sm  { font-family: var(--font-display); font-weight: 700; font-size: var(--type-display-sm-size);  line-height: var(--type-display-sm-lh);  font-feature-settings: var(--font-display-features); letter-spacing: 0; }

.u-body-lg        { font-family: var(--font-text); font-weight: 500; font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); }
.u-body-md        { font-family: var(--font-text); font-weight: 400; font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); }
.u-body-md-strong { font-family: var(--font-text); font-weight: 500; font-size: var(--type-body-md-strong-size); line-height: var(--type-body-md-strong-lh); }
.u-body-sm        { font-family: var(--font-text); font-weight: 400; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); }
.u-body-sm-strong { font-family: var(--font-text); font-weight: 500; font-size: var(--type-body-sm-strong-size); line-height: var(--type-body-sm-strong-lh); }
.u-caption        { font-family: var(--font-text); font-weight: 400; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); }