/* =========================================================================
   TEMA DO PRINCIPLAY: cores, fontes e formas de todo o site.
   Para mudar a identidade visual, edite só este arquivo.
   ========================================================================= */

/* Fontes: Poppins para títulos e botões; Andika para as letras dos jogos
   (feita para alfabetização: "a" e "g" no formato da escola) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Andika:wght@400;700&display=swap');

:root {
  /* ---------- Fundo ---------- */
  --fundo1: #c4e7f8;            /* azul claro (topo) */
  --fundo2: #8ccdee;            /* azul (embaixo) */
  --fundo-bolinhas: rgba(255, 255, 255, 0.35);  /* bolinhas do fundo; "transparent" desliga */

  /* ---------- Textos ---------- */
  --titulo: #ec5c8a;            /* rosa dos títulos e do logo */
  --titulo-contorno: #ffffff;   /* contorno branco do logo */
  --tinta: #2e3a59;             /* texto comum */
  --tinta-suave: #5a6684;

  /* ---------- Cores de destaque ---------- */
  --rosa: #ec5c8a;
  --rosa-claro: #f7a6bd;
  --verde-agua: #4fbcb6;
  --amarelo: #ffbf3c;
  --lilas: #9b7fe0;
  --azul: #3b8fd8;
  --laranja: #ff9440;
  --roxo: #8a5ad8;
  --verde: #2ec27e;             /* acerto */
  --branco: #ffffff;

  /* Cartões coloridos (tela inicial e menus dos jogos), em ordem */
  --cartao-1: var(--rosa);
  --cartao-2: var(--verde-agua);
  --cartao-3: var(--lilas);
  --cartao-4: var(--amarelo);

  /* ---------- Formas ---------- */
  --raio: 32px;                 /* cantos arredondados dos cartões */
  --sombra: 0 8px 0 rgba(20, 60, 110, 0.15);

  /* ---------- Fontes ---------- */
  --fonte: 'Poppins', system-ui, sans-serif;
  --fonte-letras: 'Andika', 'Poppins', system-ui, sans-serif;
}