/**
 * @file heading.css
 * Display sizes for the Heading SDC component.
 *
 * These classes are applied by CVA (heading-responsive-*). They are defined
 * here explicitly because they are not generated by Tailwind’s scanner — without
 * them, base.css h1–h6 rules alone control font size, so the “Text size”
 * control had no visible effect.
 */

.heading-responsive-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.heading-responsive-2xl {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

.heading-responsive-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

.heading-responsive-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
}

.heading-responsive-5xl {
  font-size: var(--text-5xl);
  line-height: var(--text-5xl--line-height);
}

.heading-responsive-6xl {
  font-size: var(--text-6xl);
  line-height: var(--text-6xl--line-height);
}

.heading-responsive-7xl {
  font-size: var(--text-7xl);
  line-height: var(--text-7xl--line-height);
}

.heading-responsive-8xl {
  font-size: var(--text-8xl);
  line-height: var(--text-8xl--line-height);
}

/* Slightly smaller on narrow viewports so 8XL–5XL stay usable */
@media (max-width: 767px) {
  .heading-responsive-8xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }

  .heading-responsive-7xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }

  .heading-responsive-6xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }

  .heading-responsive-5xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }
}