/* Base global mínima: reset, corpo do documento, seleção e tipografia display.
   Layout de cada tela continua em styles.css; componentes, em components/. */

* {
  box-sizing: border-box;
}

/* overflow:hidden só no body não basta: os drawers de mobile (sidebar de
   canais/lista de membros) ficam fora da tela via transform (translateX),
   e sem isso no <html> também, o navegador conta essa área transformada
   como conteúdo "de verdade" e aumenta o viewport de layout pra caber tudo
   — a página inteira aparece zoom-out, ligeiramente menor/deslocada do que
   deveria (reproduzido com viewport 390px virando ~429px de layout). */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
}

::selection {
  background: color-mix(in srgb, var(--accent-base) 40%, transparent);
  color: var(--text);
}

/* Títulos usam a fonte display (Sora) — é ela que tira a cara "genérica" das
   telas de entrada, do header do canal e dos cabeçalhos de modal/chamada. */
h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}