/* Design System — Mundo dos Animais Falantes
   Paleta "livro ilustrado de guache": céu, papel, folha, manga, goiaba, rio.
   Display: Baloo 2 (rechonchuda, infantil sem ser caricata). Corpo: Nunito. */
:root {
  --ceu: #BDE7F7;
  --ceu-fundo: #E8F6FC;
  --papel: #FFFDF6;
  --tinta: #33415C;
  --tinta-suave: #6B7A99;
  --folha: #58B368;
  --folha-escura: #3E8E4E;
  --manga: #FF9F45;
  --manga-escura: #E07E1B;
  --goiaba: #F26D85;
  --goiaba-escura: #D14863;
  --rio: #4EA8DE;
  --rio-escuro: #2F7FB5;
  --sol: #FFD447;
  --tronco: #5C4033;
  --branco: #FFFFFF;
  --sombra: 0 6px 0 rgba(51, 65, 92, 0.12);
  --raio: 24px;
  --display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --corpo: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--corpo);
  color: var(--tinta);
  background: var(--ceu-fundo);
  line-height: 1.5;
  min-height: 100vh;
}
h1, h2, h3, .display { font-family: var(--display); line-height: 1.15; }
img { max-width: 100%; }
a { color: var(--rio-escuro); }

/* Botões grandes, "apertáveis" (borda inferior grossa = profundidade de brinquedo) */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  color: var(--branco); background: var(--folha);
  border: none; border-bottom: 6px solid var(--folha-escura);
  border-radius: var(--raio); padding: 0.8em 1.6em;
  min-height: 56px; min-width: 56px;
  cursor: pointer; text-decoration: none;
  transition: transform 0.08s ease, border-bottom-width 0.08s ease;
}
.botao:active { transform: translateY(4px); border-bottom-width: 2px; }
.botao.manga { background: var(--manga); border-bottom-color: var(--manga-escura); }
.botao.goiaba { background: var(--goiaba); border-bottom-color: var(--goiaba-escura); }
.botao.rio { background: var(--rio); border-bottom-color: var(--rio-escuro); }
.botao.fantasma { background: var(--branco); color: var(--tinta); border-bottom-color: #D8DEE9; }
.botao.grande { font-size: 1.5rem; padding: 0.9em 2em; min-height: 72px; }
.botao:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 4px solid var(--rio); outline-offset: 3px;
}

.cartao {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.5rem;
}

input, select, textarea {
  font-family: var(--corpo); font-size: 1rem; color: var(--tinta);
  background: var(--branco); border: 2px solid #D8DEE9; border-radius: 14px;
  padding: 0.75em 1em; width: 100%;
}
label { font-weight: 700; font-size: 0.9rem; display: block; margin: 0.9em 0 0.3em; }

.erro-msg { color: var(--goiaba-escura); font-weight: 700; margin-top: 0.75em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}