/* Based on affordances approach - https://fractaledmind.com/2026/01/02/writing-tailwind-compatible-semantic-css/ */
@source inline("ui-heading-h{1,2,3,4,5,6}");

@utility ui-heading-h1 {
  :where(&) {
    @apply text-3xl leading-tight font-bold mb-2;
  }
}

@utility ui-heading-h2 {
  :where(&) {
    @apply text-xl md:text-2xl md:leading-tight font-semibold mt-2 mb-2;
  }
}

@utility ui-heading-h3 {
  :where(&) {
    @apply text-lg md:text-xl md:leading-tight font-semibold mt-3 mb-2;
  }
}

@utility ui-heading-h4 {
  :where(&) {
    @apply text-lg md:text-xl mt-3;
  }
}

@utility ui-heading-h5 {
  :where(&) {
    @apply text-base mt-2;
  }
}

@utility ui-heading-h6 {
  :where(&) {
    @apply text-base;
  }
}