body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.h1,
h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.h2,
h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.h3,
h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.h4,
h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.body-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.caption {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Backward-compatible aliases (STEP 6A) */
.text-h1 { font-size: 48px; font-weight: 800; line-height: 1.2; color: var(--color-text-primary); }
.text-h2 { font-size: 36px; font-weight: 700; line-height: 1.3; color: var(--color-text-primary); }
.text-h3 { font-size: 28px; font-weight: 700; line-height: 1.35; color: var(--color-text-primary); }
.text-h4 { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--color-text-primary); }
.text-body { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--color-text-secondary); }
.text-caption { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--color-text-muted); }

@media (max-width: 760px) {
  .h1,
  h1,
  .text-h1 {
    font-size: clamp(32px, 8vw, 48px);
  }

  .h2,
  h2,
  .text-h2 {
    font-size: clamp(28px, 6vw, 36px);
  }
}