/* Reset, typography and accessibility defaults. */
@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :root {
        color-scheme: var(--color-scheme);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        min-height: 100vh;
        font-family: var(--text-body-font-family);
        font-size: var(--text-body-font-size);
        font-weight: var(--text-body-font-weight);
        line-height: var(--text-body-line-height);
        color: var(--color-text);
        background: var(--color-bg-canvas);
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 var(--space-3);
        color: var(--color-text);
        text-wrap: balance;
    }

    h1 { font: var(--text-h1-font-weight) var(--text-h1-font-size) / var(--text-h1-line-height) var(--text-h1-font-family); letter-spacing: var(--text-h1-letter-spacing); }
    h2 { font: var(--text-h2-font-weight) var(--text-h2-font-size) / var(--text-h2-line-height) var(--text-h2-font-family); letter-spacing: var(--text-h2-letter-spacing); }
    h3 { font: var(--text-h3-font-weight) var(--text-h3-font-size) / var(--text-h3-line-height) var(--text-h3-font-family); letter-spacing: var(--text-h3-letter-spacing); }
    h4 { font: var(--text-h4-font-weight) var(--text-h4-font-size) / var(--text-h4-line-height) var(--text-h4-font-family); }
    h5 { font: var(--text-h5-font-weight) var(--text-h5-font-size) / var(--text-h5-line-height) var(--text-h5-font-family); }
    h6 { font: var(--text-h6-font-weight) var(--text-h6-font-size) / var(--text-h6-line-height) var(--text-h6-font-family); }

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

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

    a:hover {
        color: var(--color-text-link-hover);
    }

    img, svg, video {
        display: block;
        max-width: 100%;
    }

    img, video {
        height: auto;
    }

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

    code {
        padding: 0.1em 0.35em;
        border-radius: var(--radius-sm);
        background: var(--color-bg-subtle);
    }

    pre {
        padding: var(--space-4);
        overflow-x: auto;
        border-radius: var(--radius-surface);
        background: var(--color-bg-subtle);
    }

    pre code {
        padding: 0;
        background: none;
    }

    kbd {
        padding: 0.1em 0.4em;
        border: var(--border-width-thin) solid var(--color-border-strong);
        border-bottom-width: var(--border-width-thick);
        border-radius: var(--radius-sm);
        background: var(--color-bg-surface);
    }

    hr {
        margin: var(--space-6) 0;
        border: 0;
        border-top: var(--border-width-thin) solid var(--color-border);
    }

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

    button, input, select, textarea {
        font: inherit;
        color: inherit;
    }

    [hidden] {
        display: none !important;
    }

    /* Visible focus for keyboard users only. */
    :focus-visible {
        outline: var(--focus-ring-width) solid var(--color-focus-ring);
        outline-offset: var(--focus-ring-offset);
    }

    ::selection {
        background: var(--color-primary-subtle-hover);
    }

    @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;
        }
    }
}