@layer base {
    html {
        font-size: 100%;
    }

    body {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        background: var(--color-canvas);
        color: var(--color-ink);
        font-family: var(--font-sans);
        line-height: 1.5;
        margin: 0;
        text-rendering: optimizeLegibility;
        text-size-adjust: 100%;
    }

    a {
        color: var(--color-link);
        text-decoration: underline;
        text-decoration-skip-ink: auto;
        text-underline-offset: 0.12em;
    }

    :is(a, button, input, textarea, select) {
        touch-action: manipulation;
    }

    :is(a, button, input, textarea, select):where(:focus-visible) {
        outline: var(--focus-ring-size) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
    }

    :is(button, input, textarea, select):where([disabled]) {
        cursor: not-allowed;
        opacity: 0.6;
    }

    ::selection {
        background: var(--color-selected);
    }

    :where(ul, ol):where([role="list"]) {
        list-style: none;
        margin: 0;
        padding: 0;
    }

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

    :is(img, video, canvas, svg) {
        display: block;
        max-inline-size: 100%;
    }

    .turbo-progress-bar {
        background-color: var(--color-link);
        height: 3px;
    }
    
    /* turbo-frame,
    turbo-cable-stream-source {
        display: contents;
    } */
}