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

html {
    --anchor-offset: 65px;
    min-width: 320px;
    background: var(--color-bg);
    scroll-behavior: smooth;
    scroll-padding-top: var(--anchor-offset);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    margin: 0;
}

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

.site-shell {
    width: min(var(--layout-shell), calc(100vw - (var(--layout-gutter) * 2)));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: var(--z-skip-link);
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: var(--color-on-primary);
    background: var(--color-primary-strong);
    border-radius: var(--radius-card-small);
    transform: translateY(-180%);
    transition: transform var(--duration-ui) var(--ease-ui);
}

.skip-link:focus {
    transform: translateY(0);
}

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

/* Folga das ancoras abaixo do header fixo, compartilhada com a rolagem suave. */
@media (max-width: 899px) {
    html {
        --anchor-offset: 72px;
    }
}

@media (max-width: 640px) {
    html {
        --anchor-offset: 68px;
    }
}

/* Feedback global de toque: um unico comportamento para todo elemento interativo mobile. */
@media (hover: none) and (pointer: coarse) {
    :where(a[href], button:not(:disabled), [role="button"], [role="link"], summary):not([data-press-feedback-off]) {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    :where(a[href], button:not(:disabled), [role="button"], [role="link"], summary)[data-press-active]:not([data-press-feedback-off]) {
        opacity: var(--interaction-press-opacity);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}