@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: 5.5rem;
        -webkit-tap-highlight-color: transparent;
        background-color: var(--canvas);
    }

    html:has(dialog[open]:modal) {
        overflow: hidden;
    }

    body {
        min-height: 100dvh;
        background-color: var(--canvas);
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: var(--text-body);
        line-height: var(--text-body--line-height);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p,
    li,
    figcaption {
        text-wrap: pretty;
    }

    :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

    ::selection {
        background-color: var(--color-sky-200);
        color: var(--color-navy-950);
    }

    :target {
        scroll-margin-top: 6rem;
    }

    [x-cloak] {
        display: none !important;
    }

    dialog {
        color: inherit;
    }

    dialog::backdrop {
        background-color: var(--overlay);
        backdrop-filter: blur(4px);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--ink-subtle);
        opacity: 1;
    }

    input[type='number'] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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