@layer base {
    html {
        font-family: var(--font-family);
        font-size: 100%;
        color: var(--color-ink);
        background-color: var(--color-canvas);

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

    body {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-size: var(--text-base);
        line-height: 1.375;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
        font-weight: 700;
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }

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

    a:hover {
        text-decoration-thickness: 2px;
    }

    hr {
        border: none;
        border-block-start: 1px solid var(--color-border);
        margin-block: var(--block-space);
    }

    ::selection {
        background-color: oklch(from var(--color-blue) l c h / 0.3);
    }

    /* Focus styles for accessibility */
    :focus-visible {
        outline: 2px solid var(--color-link);
        outline-offset: 2px;
    }

    /* Keyboard shortcut hints */
    kbd {
        border: 1px solid;
        border-radius: 0.3em;
        box-shadow: 0 0.1em 0 currentColor;
        font-family: var(--font-family-mono);
        font-size: 0.8em;
        font-weight: 600;
        opacity: 0.7;
        padding: 0 0.4em;
        text-transform: uppercase;
        vertical-align: middle;
        white-space: nowrap;
    }
}