/* ============================================================
   BASE — reset minimo, tipografia, focus, icone.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

html {
    /* Scroll fluido nativo (no polyfill JS) quando il browser lo supporta;
       prefers-reduced-motion sotto lo disattiva per chi lo richiede. */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* niente resize automatico del testo in landscape su iOS */
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
button {
    font-family: inherit;
    touch-action: manipulation; /* risposta al tap immediata su tutti i controlli, un'unica regola */
}

:focus-visible {
    outline: 2.5px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 6px;
}

.material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes modalShow { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* Rispetta la preferenza di sistema per animazioni ridotte: spegne transizioni
   e keyframe (rotazione automatica 3D inclusa) invece di ignorarla. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}