h1,
h2,
h3,
h4,
h5,
h6 {
    --palette-background-normal: currentColor;

    @apply font-bold text-[var(--palette-background-normal)];

    text-align: var(--align-text, inherit);
    text-transform: var(--transform-text, inherit);

    transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &[data-palette] {
        @apply text-[rgb(var(--palette-background-normal))];
    }

    &[data-variation~="truncate"] {
        @apply truncate;
    }
}

h1 {
    @apply leading-[var(--font-content-line-height-massive)];

    font-size: var(--font-content-size-massive);

    &[data-variation~="headline"] {
        @apply leading-[var(--font-headline-line-height-massive)];

        font-size: var(--font-headline-size-massive);
    }
}

h2 {
    @apply leading-[var(--font-content-line-height-huge)];

    font-size: var(--font-content-size-huge);

    &[data-variation~="headline"] {
        @apply leading-[var(--font-headline-line-height-huge)];

        font-size: var(--font-headline-size-huge);
    }
}

h3 {
    @apply leading-[var(--font-content-line-height-large)];

    font-size: var(--font-content-size-large);

    &[data-variation~="headline"] {
        @apply leading-[var(--font-headline-line-height-large)];

        font-size: var(--font-headline-size-large);
    }
}

h4 {
    @apply leading-[var(--font-content-line-height-medium)];

    font-size: var(--font-content-size-medium);

    &[data-variation~="headline"] {
        @apply leading-[var(--font-headline-line-height-medium)];

        font-size: var(--font-headline-size-medium);
    }
}

h5 {
    @apply leading-[var(--font-content-line-height-small)];

    font-size: var(--font-content-size-small);

    &[data-variation~="headline"] {
        @apply leading-[var(--font-headline-line-height-small)];

        font-size: var(--font-headline-size-small);
    }
}

h6 {
    @apply leading-[var(--font-content-line-height-tiny)];

    font-size: var(--font-content-size-tiny);

    &[data-variation~="headline"] {
        @apply leading-[var(--font-headline-line-height-tiny)];

        font-size: var(--font-headline-size-tiny);
    }
}