/*
 * tema.css — IDENTIDADE VISUAL DO SITE (cores, fontes, cantos, sombras).
 *
 * Para aplicar a identidade visual definitiva (04-produto/arte/Identidade-Visual.md),
 * troque SÓ os valores abaixo. O resto do site (css/site.css) usa estas variáveis.
 * Provisório: cores tiradas do logo e da mascote em 04-produto/arte
 * (roxo-noite #3D2C7A, coral #FF7A59, turquesa #2BB3A3 / #178F82, amarelo #FFC93C).
 * Contraste: texto sobre --cor-primaria é branco; texto sobre --cor-cta é --cor-cta-texto.
 */

/* Fontes (Google Fonts). Para trocar: mude o endereço e os nomes em --fonte-*. */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap");

:root {
  /* Fundo e superfícies */
  --cor-fundo: #FFFAF2;
  --cor-fundo-alt: #FFF1D6;
  --cor-superficie: #FFFFFF;
  --cor-borda: #E9E1D3;

  /* Texto */
  --cor-texto: #2B2B3A;
  --cor-texto-suave: #595A6E;

  /* Marca */
  --cor-primaria: #3D2C7A;        /* roxo-noite: escolhas marcadas, links, barra de progresso */
  --cor-primaria-clara: #ECE8F8;  /* fundo de destaque suave */
  --cor-primaria-texto: #FFFFFF;

  /* Chamada para ação (botões principais) */
  --cor-cta: #FFC93C;
  --cor-cta-hover: #FFB703;
  --cor-cta-texto: #2B2B3A;

  /* Mensagens */
  --cor-info-fundo: #E6F6F3;
  --cor-info-borda: #2BB3A3;
  --cor-aviso-fundo: #FFF2EC;
  --cor-aviso-borda: #FF7A59;
  --cor-erro: #B42318;
  --cor-sucesso: #178F82;

  /* Letrinhas coloridas (ilustração e detalhes) */
  --cor-letra-1: #FF7A59;
  --cor-letra-2: #2BB3A3;
  --cor-letra-3: #FFC93C;
  --cor-letra-4: #3D2C7A;

  /* Tipografia */
  --fonte-titulo: "Baloo 2", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-estimulo: Arial, "Helvetica Neue", Helvetica, sans-serif; /* letras mostradas para a criança: formas bem claras */
  --tamanho-base: 17px;

  /* Cantos e sombras */
  --raio: 18px;
  --raio-botao: 14px;
  --raio-pilula: 999px;
  --sombra: 0 6px 20px rgba(43, 43, 58, 0.08);
  --sombra-forte: 0 10px 30px rgba(43, 43, 58, 0.14);

  /* Larguras */
  --largura-quiz: 560px;
  --largura-pagina: 760px;
}