.display-title {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.02em;
}
.headline-md {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.title-sm {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.body-lg {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
}
.body-md {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.label-sm {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.01em;
}
.caption {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-on-surface-variant); }
.text-on-primary { color: var(--color-on-primary); }
.text-error { color: var(--color-error); }