/* Escala padrão do site em telas grandes.
   O layout foi desenhado para ficar melhor com o navegador em 80% (notebook)
   e 90% (monitor de PC). Em vez de pedir para a pessoa mudar o zoom, aplicamos
   a mesma escala aqui. Celular e tablet (< 1024px) ficam em 100%.
   `zoom` é suportado por Chrome, Edge, Safari e Firefox 126+.

   `--site-zoom-inv` compensa alturas em vh (ex.: hero da landing):
   height: calc(100dvh * var(--site-zoom-inv)) ≈ 1 viewport visual. */

:root {
  --site-zoom: 1;
  --site-zoom-inv: 1;
}

/* Notebook: 1024px a 1599px de largura (1366×768, 1440×900, 1536×864…) */
@media (min-width: 1024px) and (max-width: 1599px) {
  :root {
    --site-zoom: 0.8;
    --site-zoom-inv: 1.25;
  }
  html {
    zoom: 0.8;
  }
}

/* PC: 1600px ou mais (1920×1080, 2560×1440…) */
@media (min-width: 1600px) {
  :root {
    --site-zoom: 0.9;
    --site-zoom-inv: calc(1 / 0.9);
  }
  html {
    zoom: 0.9;
  }
}

/*
  Login, dashboard, profile e donate usam shell de viewport (100vh + card
  centralizado / chrome interna). Zoom no html deixa o modal/card deslocado
  ou com faixa vazia. Nestas páginas a escala fica em 100%.
*/
@media (min-width: 1024px) {
  html:has(#shell),
  html:has(.auth-split),
  html:has(#profile-card),
  html:has(#donate-main),
  html:has(#donate-card),
  html:has(#team-invite-page) {
    zoom: 1;
  }
}