@use '~flux/components/css/mixin';

@layer flux-base {
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        text-wrap: balance;
    }

    // h1 and h2 sit above the text scale and carry their own pair.
    h1 {
        color: var(--foreground-prominent);
        font-size: 27px;
        line-height: 42px;
    }

    h2 {
        color: var(--foreground-prominent);
        font-size: 21px;
        line-height: 33px;
    }

    h3 {
        @include mixin.text(xlarge);

        color: var(--foreground);
    }

    h4 {
        @include mixin.text(large);
    }

    h5 {
        @include mixin.text(default);
    }

    h6 {
        @include mixin.text(small);
    }

    a:not([class]), a[class=""] {
        align-self: start;
        color: var(--primary-600);
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-decoration-skip: auto;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;

        @include mixin.hover {
            text-decoration: none;
        }
    }

    small {
        @include mixin.text(small);
    }

    // Only the monospace font is a light default; the rich prose treatment of
    // code, blockquotes, images, lists and the vertical rhythm lives in FluxProse.
    code, kbd, samp, pre {
        font-family: var(--font-monospace), monospace;
    }
}