/* ═══════════════════════════════════════════════════════════
   ATOM: Heading
   h1–h4 using Inter Tight, with responsive sizing on h1/h2
   ═══════════════════════════════════════════════════════════ */

.heading {
  font-family: var(--font-heading);
  color: var(--color-text-1);
  margin: 0;
}

.heading--1 {
  font-size: clamp(2rem, 5vw, 3rem);       /* 32–48px */
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.heading--2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem); /* 24–40px */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.heading--3 {
  font-size: var(--text-3xl);               /* 24px */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
}

.heading--4 {
  font-size: var(--text-2xl);               /* 20px */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}