/* =============================================================================
   base.css — reset, variáveis e tipografia
   Pizzaria Espaço Liberdade
   ========================================================================== */

:root {
    /* --- Base (fundo escuro do logo) --- */
    --preto:            #17100D;
    --preto-suave:      #221813;
    --carvao:           #2E211A;

    /* --- Tricolor italiano --- */
    --vermelho:         #CE2B37;
    --vermelho-escuro:  #A81F2A;
    --verde:            #009246;
    --verde-escuro:     #007035;

    /* --- Neutros --- */
    --creme:            #F4F1EA;
    --branco:           #FFFFFF;
    --cinza:            #8B8178;
    --cinza-claro:      #D9D3CA;

    /* --- Destaque --- */
    --dourado:          #E8C547;

    /* --- Semânticos --- */
    --sucesso:          #2E9E5B;
    --erro:             #D93B3B;
    --alerta:           #E8A33D;
    --info:             #3D7EA6;

    /* --- Superfícies --- */
    --fundo:            var(--preto);
    --superficie:       var(--preto-suave);
    --superficie-alta:  var(--carvao);
    --borda:            rgba(244, 241, 234, .12);
    --texto:            var(--creme);
    --texto-suave:      var(--cinza-claro);

    /* --- Tipografia --- */
    --fonte-titulo: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fonte-texto:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --fs-xs:   .75rem;
    --fs-sm:   .875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  3rem;

    /* --- Espaçamento --- */
    --esp-1: .25rem;  --esp-2: .5rem;   --esp-3: .75rem;  --esp-4: 1rem;
    --esp-5: 1.5rem;  --esp-6: 2rem;    --esp-8: 3rem;    --esp-10: 4rem;

    /* --- Forma --- */
    --raio-sm:   6px;
    --raio:      12px;
    --raio-lg:   20px;
    --raio-full: 999px;

    --sombra:    0 2px 8px rgba(0, 0, 0, .35);
    --sombra-lg: 0 8px 28px rgba(0, 0, 0, .45);

    --transicao: 180ms ease;

    --container: 1200px;
}

/* --- Reset ---------------------------------------------------------------- */

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

* { margin: 0; }

/* O atributo hidden tem que vencer qualquer display declarado depois.
   Sem isto, algo como `.modal { display: grid }` faz o elemento aparecer
   mesmo estando marcado como hidden. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--fonte-texto);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--texto);
    background-color: var(--fundo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

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

/* --- Tipografia ----------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

.destaque { color: var(--dourado); }
.centralizado { text-align: center; }

/* --- Acessibilidade ------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--dourado);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: var(--esp-3) var(--esp-4);
    background: var(--dourado);
    color: var(--preto);
    font-weight: 600;
    border-radius: 0 0 var(--raio) 0;
}

.pular-para-conteudo:focus {
    left: 0;
    top: 0;
}

.apenas-leitor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Escala tipográfica maior no desktop ---------------------------------- */

@media (min-width: 768px) {
    h1 { font-size: var(--fs-4xl); }
    h2 { font-size: var(--fs-3xl); }
}