@layer base {
    html {
        font-size: 100%;

        @media (min-width: 100ch) {
            font-size: 1.1875rem;
        }
    }

    body {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        background: var(--color-base-50);
        color: var(--color-base-content);
        font-family: var(--font-sans);
        interpolate-size: allow-keywords;
        line-height: 1.375;
        max-inline-size: 100vw;
        scroll-behavior: auto;
        text-rendering: optimizeLegibility;
        text-size-adjust: none;
    }

    a {
        text-decoration: none;
        color: var(--color-base-content);
        font-weight: 500;

        &:not([class]) {
            color: black;
            text-decoration: underline;
            text-decoration-skip-ink: auto;
        }
    }
}