/* ==========================================================================
   Shoopet — Base
   Reset, tipografia e utilitários mínimos. Componentes ficam em componentes.css.
   ========================================================================== */

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

* { margin: 0; padding: 0; }

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

body {
    font-family: var(--fonte);
    font-size: var(--texto-base);
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
}

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

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

button { background: none; border: 0; cursor: pointer; }

a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color var(--transicao);
}

a:hover { color: var(--cor-primaria-hover); }

/* Foco visível apenas para navegação por teclado. */
:focus-visible {
    outline: none;
    box-shadow: var(--foco);
    border-radius: var(--raio-pequeno);
}

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

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--texto);
}

h1 { font-size: var(--texto-h1); }
h2 { font-size: var(--texto-h2); }
h3 { font-size: var(--texto-h3); }

.texto-secundario { color: var(--texto-secundario); }
.texto-pequeno    { font-size: var(--texto-pequeno); }
.texto-mini       { font-size: var(--texto-mini); }
.texto-medio      { font-weight: 500; }
.texto-forte      { font-weight: 600; }

/* ---------- Utilitários de layout ---------- */

.pilha    { display: flex; flex-direction: column; }
.linha    { display: flex; align-items: center; }
.entre    { justify-content: space-between; }
.centro   { justify-content: center; align-items: center; }
.crescer  { flex: 1; }

.g1 { gap: var(--e1); }
.g2 { gap: var(--e2); }
.g3 { gap: var(--e3); }
.g4 { gap: var(--e4); }
.g5 { gap: var(--e5); }
.g6 { gap: var(--e6); }

.separador { height: 1px; background: var(--borda); }

/* Acessibilidade: visível apenas para leitores de tela. */
.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;
}