<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

@use "@imarc/pronto/resources/styles/imported" as pronto;

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
  --accent-color: var(--heading-color, var(--root-color-headings));
  color: var(--accent-color);
  line-height: 1.125;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-weight: 700;

  /* Collapse margin between adjacent headings. */
  &:has(+ &) {
    margin-bottom: 0;
  }
}

h1, .h1 {
  font-size: var(--root-font-size-h1);
  margin-bottom: #{pronto.fluid-rems(1, 1.5, 2)};
}

h2, .h2 {
  font-size: var(--root-font-size-h2);
  margin-bottom: #{pronto.fluid-rems(1, 1.5, 1.5)};
}

h3, .h3 {
  font-size: var(--root-font-size-h3);
}

h4, .h4 {
  font-size: var(--root-font-size-h4);
}

h5, .h5 {
  font-size: var(--root-font-size-h5);
}

h6, .h6 {
  font-size: var(--root-font-size-h6);
  font-weight: 700;
}