/* Heading Component Styles */

.heading {
  font-weight: var(--heading-font-weight, 700);
  letter-spacing: var(--heading-tracking, -0.01em);
  color: var(--heading-color, var(--color-semantic-text-primary));
}

.heading-1 {
  font-size: var(--heading-1-font-size, 2.25rem);
  line-height: var(--heading-1-line-height, 2.5rem);
}
.heading-2 {
  font-size: var(--heading-2-font-size, 1.875rem);
  line-height: var(--heading-2-line-height, 2.25rem);
}
.heading-3 {
  font-size: var(--heading-3-font-size, 1.5rem);
  line-height: var(--heading-3-line-height, 2rem);
}
.heading-4 {
  font-size: var(--heading-4-font-size, 1.25rem);
  line-height: var(--heading-4-line-height, 1.75rem);
}
.heading-5 {
  font-size: var(--heading-5-font-size, 1.125rem);
  line-height: var(--heading-5-line-height, 1.5rem);
}
.heading-6 {
  font-size: var(--heading-6-font-size, 1rem);
  line-height: var(--heading-6-line-height, 1.25rem);
}

@media (min-width: 640px) {
  .heading-1 {
    font-size: var(--heading-1-font-size-sm, 3.75rem);
    line-height: var(--heading-1-line-height-sm, 1);
  }
  .heading-2 {
    font-size: var(--heading-2-font-size-sm, 2.25rem);
    line-height: var(--heading-2-line-height-sm, 2.5rem);
  }
  .heading-3 {
    font-size: var(--heading-3-font-size-sm, 1.875rem);
    line-height: var(--heading-3-line-height-sm, 2.25rem);
  }
  .heading-4 {
    font-size: var(--heading-4-font-size-sm, 1.5rem);
    line-height: var(--heading-4-line-height-sm, 2rem);
  }
  .heading-5 {
    font-size: var(--heading-5-font-size-sm, 1.25rem);
    line-height: var(--heading-5-line-height-sm, 1.75rem);
  }
  .heading-6 {
    font-size: var(--heading-6-font-size-sm, 1.125rem);
    line-height: var(--heading-6-line-height-sm, 1.5rem);
  }
}