/* Todas as cores do site moram neste arquivo, como variaveis.
   Nenhum outro CSS pode escrever cor literal. */
:root {
  --fundo: #0e0e13;
  --fundo-cartao: #16161d;
  --borda: #2a2a36;
  --borda-fraca: #23232c;
  --texto: #eceaf3;
  --texto-fraco: #8f8aa8;
  --texto-fraquissimo: #6f6a85;
  --marca: #7b5cf0;
  --marca-texto: #ffffff;
  --coracao: #e2415c;
  --especial: #f2c14e;
  --aviso: #f2c14e;
  --erro: #ff6b6b;
  --avatar-saturacao: 45%;
  /* Escurecimento do mosaico de capas na tela de entrar. Nao e cor de marca:
     e um veu para o formulario ficar legivel por cima das capas. */
  --veu-entrar: rgb(10 10 14 / .56);
  --veu-entrar-borda: rgb(10 10 14 / .95);
  --avatar-luz: 42%;

  --raio: 10px;
  --espaco: 12px;
  --fonte: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* O atributo hidden tem que vencer qualquer display que uma classe defina.
   Sem isto, `.escolhido { display: flex }` faz a caixa vazia aparecer. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 var(--espaco) 84px;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 22px; margin: 18px 0 12px; }
h2 { font-size: 17px; margin: 20px 0 10px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }