/* ══════════════════════════════════════════════════════════════════════
   PEÇA: MARCA (cores + fontes)
   Origem: Balbuu · fonemas-app/index.html (bloco :root) + DESIGN.md
   ⛔ Cor de texto entra AQUI como token. Hex solto em estilo inline vence o
      tema e quebra o modo escuro sem ninguém perceber.
   ⛔ Em projeto do Balbuu: NUNCA #006EB4 nem #46C8BE (é a marca da clínica).
   ══════════════════════════════════════════════════════════════════════ */

/* No <head>, antes do <style>: */
/* <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> */

:root{
  /* --- As 6 cores do manual (medidas nos pixels da arte oficial, 30/07/2026) --- */
  --turq:#24BFAD;      /* corpo do mascote, a maior área */
  --amarelo:#FCE162;   /* barriga */
  --azul:#2570C6;      /* asas e topete */
  --laranja:#FE9A20;   /* bico e pés — É A COR DE AÇÃO (botão principal) */
  --rosa:#EE6088;      /* bochecha */
  --grafite:#15273A;   /* contorno e texto (navy) */

  /* ⛔ Um botão laranja por tela. Cor de ação só funciona enquanto é rara.
     ⛔ Texto sobre laranja é sempre --grafite, NUNCA branco (branco dá 2,1 de contraste). */

  /* --- Apoio --- */
  --verde:#5AD07A;     /* só como "acerto" de jogo */
  --bg1:#EAF6FF; --bg2:#E7FBF6; --card:#ffffff; --bordacard:#e2ecf5;

  /* --- Cor de MARCA ≠ cor de TEXTO ---
     As cores acima foram desenhadas para ÁREA. Em texto miúdo reprovam em contraste.
     Estes dois existem só para texto: */
  --txt2:#63707c;      /* texto secundário: dica, rodapé, subtítulo (4,63 no claro) */
  --turqtxt:#2d807a;   /* turquesa quando precisa ser TEXTO */

  --sombra:0 8px 24px rgba(0,80,140,.12);
}

@media (prefers-color-scheme: dark){
  :root{ --txt2:#9fb3c4; --turqtxt:#5fd9cf; }
}

body{ font-family:'Nunito',system-ui,sans-serif; color:var(--grafite); }
h1,h2,h3,.big{ font-family:'Baloo 2',cursive }
/* ⛔ Nunca uma terceira família de fonte. */

/* --- Espaçamento, borda, movimento (do DESIGN.md) ---
   Espaçamento em múltiplos de 4: 4 · 8 · 12 · 16 · 24 · 40 · 48 · 64
   Borda de 1px define elemento parado. ⛔ Sombra só em estado interativo.
   Canto: 6px padrão · 4px em selo · 9999px em pílula. ⛔ Nunca acima de 8px em card.
   Transição: 200ms. */
