/* ============================================================
   TYPOGRAPHY — xAI Design System
   Weight 400 for everything. Negative tracking on display does the
   emphasis work. GeistMono UPPERCASE (positive tracking) for eyebrows.
   ============================================================ */
:root {
  /* --- Display (Universal Sans / Inter sub, weight 400) --- */
  --display-xl-size: 96px;  --display-xl-line: 96px;  --display-xl-track: -2.4px;
  --display-lg-size: 72px;  --display-lg-line: 72px;  --display-lg-track: -1.8px;
  --display-md-size: 48px;  --display-md-line: 48px;  --display-md-track: -1.2px;
  --display-sm-size: 32px;  --display-sm-line: 36px;  --display-sm-track: -0.6px;
  --display-xs-size: 20px;  --display-xs-line: 28px;  --display-xs-track: 0px;

  /* --- Body --- */
  --body-lg-size: 18px;  --body-lg-line: 28px;
  --body-md-size: 16px;  --body-md-line: 24px;
  --body-sm-size: 14px;  --body-sm-line: 20px;

  /* --- Mono captions (GeistMono uppercase) --- */
  --caption-mono-size: 14px;     --caption-mono-line: 20px;  --caption-mono-track: 1.4px;
  --caption-mono-sm-size: 12px;  --caption-mono-sm-line: 16px; --caption-mono-sm-track: 1.2px;

  /* --- Button --- */
  --button-md-size: 14px;  --button-md-line: 20px;

  --font-weight-regular: 400;
}

/* Reusable type roles — apply as classes if convenient. */
.t-display-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--display-xl-size); line-height: var(--display-xl-line); letter-spacing: var(--display-xl-track); }
.t-display-lg { font-family: var(--font-display); font-weight: 400; font-size: var(--display-lg-size); line-height: var(--display-lg-line); letter-spacing: var(--display-lg-track); }
.t-display-md { font-family: var(--font-display); font-weight: 400; font-size: var(--display-md-size); line-height: var(--display-md-line); letter-spacing: var(--display-md-track); }
.t-display-sm { font-family: var(--font-display); font-weight: 400; font-size: var(--display-sm-size); line-height: var(--display-sm-line); letter-spacing: var(--display-sm-track); }
.t-display-xs { font-family: var(--font-display); font-weight: 400; font-size: var(--display-xs-size); line-height: var(--display-xs-line); letter-spacing: var(--display-xs-track); }
.t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--body-lg-size); line-height: var(--body-lg-line); }
.t-body-md { font-family: var(--font-body); font-weight: 400; font-size: var(--body-md-size); line-height: var(--body-md-line); }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.t-eyebrow { font-family: var(--font-mono); font-weight: 400; font-size: var(--caption-mono-size); line-height: var(--caption-mono-line); letter-spacing: var(--caption-mono-track); text-transform: uppercase; }
.t-eyebrow-sm { font-family: var(--font-mono); font-weight: 400; font-size: var(--caption-mono-sm-size); line-height: var(--caption-mono-sm-line); letter-spacing: var(--caption-mono-sm-track); text-transform: uppercase; }