@layer base {
    body {
        font-family: var(--font-sans);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-normal);
        color: var(--color-text);
        background: var(--color-bg);
    }

    :is(h1, h2, h3, h4) {
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--font-size-3xl);
        margin-block-end: var(--space-6);
    }

    h2 {
        font-size: var(--font-size-2xl);
        margin-block-end: var(--space-4);
    }

    h3 {
        font-size: var(--font-size-xl);
        margin-block-end: var(--space-3);
    }

    p {
        margin-block-end: var(--space-4);
        color: var(--color-text);
    }

    a {
        color: var(--color-accent);
    }

    a:hover {
        color: var(--color-accent-hover);
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

    :is(code, kbd, samp) {
        font-family: var(--font-mono);
        font-size: 0.9em;
    }
}