@layer cx.typography {
  .cx-display-xl,
  .cx-display {
    margin: 0;
    font-family: var(--cx-font-display);
    font-size: var(--cx-type-display-xl);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: var(--cx-leading-display);
  }

  .cx-display-lg,
  .cx-title {
    margin: 0;
    font-family: var(--cx-font-display);
    font-size: var(--cx-type-display-lg);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.04;
  }

  .cx-heading-1 { margin: 0; font-size: var(--cx-type-heading-1); line-height: var(--cx-leading-heading); letter-spacing: -0.025em; }
  .cx-heading-2 { margin: 0; font-size: var(--cx-type-heading-2); line-height: var(--cx-leading-heading); letter-spacing: -0.02em; }
  .cx-heading-3,
  .cx-heading { margin: 0; font-size: var(--cx-type-heading-3); line-height: var(--cx-leading-heading); letter-spacing: -0.018em; }

  .cx-body-lg,
  .cx-lead { margin: 0; max-width: 44rem; font-size: var(--cx-type-body-lg); line-height: var(--cx-leading-body); color: var(--cx-color-ink-muted); }
  .cx-body { font-size: var(--cx-type-body); line-height: var(--cx-leading-body); }
  .cx-body-sm { font-size: var(--cx-type-body-sm); line-height: 1.6; }
  .cx-label,
  .cx-eyebrow { font-size: var(--cx-type-label); line-height: var(--cx-leading-compact); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .cx-eyebrow { color: var(--cx-color-accent); }
  .cx-caption,
  .cx-meta { font-size: var(--cx-type-caption); line-height: 1.5; color: var(--cx-color-ink-muted); }
  .cx-data { font-family: var(--cx-font-data); font-variant-numeric: tabular-nums; }
}