@layer base {
    html {
        font-size: 100%;                  /* respect user pref */
        -webkit-text-size-adjust: 100%;
    }

    body {
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        font-feature-settings: "kern", "liga";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    a {
        color: var(--accent);
        text-decoration: none;
    }
    a:hover { text-decoration: underline; }
    a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }
    /* Same-document anchor links carry .link-inpage so we can mark
     * them differently from cross-page links — dotted underline
     * signals "this jumps inside the article you're already on". */
    a.link-inpage {
        text-decoration: underline dotted;
        text-underline-offset: 0.2em;
    }
    a.link-inpage:hover { text-decoration: underline; }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-body);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        margin-top: var(--space-6);
        margin-bottom: var(--space-3);
    }
    h1 {
        font-size: var(--text-4xl);
        font-weight: var(--weight-bold);
        letter-spacing: -0.02em;
        margin-top: 0;
    }
    h2 {
        font-size: var(--text-3xl);
        letter-spacing: -0.01em;
    }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }
    h5 { font-size: var(--text-lg); }
    h6 { font-size: var(--text-base); color: var(--fg-muted); }

    p, ul, ol, dl, blockquote, pre, table {
        margin-bottom: var(--space-4);
    }
    p:last-child, ul:last-child, ol:last-child,
    dl:last-child, blockquote:last-child,
    pre:last-child, table:last-child {
        margin-bottom: 0;
    }

    /* Inline code — flush with body text size; only a subtle pill
     * background distinguishes it. Pre-blocks own their own block. */
    code, kbd, samp {
        font-family: var(--font-mono);
        font-size: 0.95em;
        font-feature-settings: "calt" off;
    }
    :not(pre) > code {
        padding: 0.15em 0.35em;
        border-radius: var(--radius-sm);
        background: var(--code-bg);
        color: var(--code-fg);
    }
    pre {
        font-family: var(--font-mono);
        background: var(--code-bg);
        color: var(--code-fg);
        padding: var(--space-4);
        border-radius: var(--radius-md);
        overflow-x: auto;
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        margin: var(--space-4) 0;
        position: relative;
    }
    pre code { background: transparent; padding: 0; font-size: inherit; }

    blockquote {
        border-left: 4px solid var(--border);
        padding-left: var(--space-4);
        color: var(--fg-muted);
        margin: var(--space-4) 0;
    }

    /* Highlight — match-text inside autocomplete results, search hit
     * snippets, etc. Use the accent tint instead of the browser's
     * default yellow so it sits inside the theme. No padding —
     * highlight must not shift surrounding glyphs. */
    mark {
        background: var(--accent-bg);
        color: inherit;
    }

    hr {
        border: 0;
        border-top: 1px solid var(--border);
        margin: var(--space-6) 0;
    }
}