/* Plain elements in the brand (knowledge/brand.md): page, text, headings, links, lists, focus. */

@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        color-scheme: light;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        min-height: 100vh;
        background: var(--color-bg);
        color: var(--color-ink);
        font-family: var(--font-body);
        font-size: var(--text-body-size);
        font-weight: 400;
        line-height: var(--text-body-leading);
        /* Only 500 italic is hosted; faux italics are allowed, faux bold isn't. */
        font-synthesis: style;
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 var(--space-3);
        font-family: var(--font-display);
        font-weight: 700;
        line-height: var(--text-heading-leading);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--text-title-size);
    }

    h2 {
        font-size: var(--text-list-size);
    }

    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-body);
        font-size: var(--text-body-size);
        font-weight: 600;
    }

    p,
    ul,
    ol,
    dl,
    blockquote,
    figure,
    pre {
        margin: 0 0 var(--space-4);
    }

    ul,
    ol {
        padding-inline-start: var(--space-5);
    }

    li + li {
        margin-top: var(--space-1);
    }

    b,
    strong {
        font-weight: 600;
    }

    small {
        font-size: var(--text-small-size);
    }

    a {
        color: var(--color-purple);
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
    }

    a:hover {
        text-decoration-color: var(--color-acid);
        text-decoration-thickness: 3px;
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--font-mono);
        font-size: var(--text-prompt-size);
    }

    pre {
        line-height: var(--text-prompt-leading);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    hr {
        border: 0;
        border-top: var(--rule-hairline);
        margin: var(--space-5) 0;
    }

    img,
    svg,
    video {
        max-width: 100%;
        height: auto;
    }

    ::selection {
        background: var(--color-acid);
        color: var(--color-ink);
    }

    :focus-visible {
        outline: var(--focus-width) solid var(--focus-color);
        outline-offset: var(--focus-offset);
    }

    /* A skip-link target or a focused heading needs no ring of its own. */
    [tabindex="-1"]:focus:not(:focus-visible) {
        outline: none;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}