/* ============================================================
   Balbuu CAA — css/tema.css
   Só variáveis. Mudar o visual inteiro = mexer AQUI.
   Paleta oficial do Balbuu. ⛔ A paleta do Filipe Silvestre
   (#006EB4 / #46C8BE) NÃO entra aqui.
   ============================================================ */
:root {
  /* --- paleta oficial Balbuu --- */
  --cor-turquesa: #24BFAD;
  --cor-amarelo:  #FCE162;
  --cor-azul:     #2570C6;
  --cor-laranja:  #FE9A20;
  --cor-rosa:     #EE6088;
  --cor-texto:    #15273A;
  --cor-fundo:    #F2F7F7;   /* papel: tira o branco chapado da tela toda */
  --cor-cartao:   #FFFFFF;
  --cor-borda:    #D8E3E3;

  /* O visor onde a frase se monta. Azul-noite do Balbuu: mantém a marca e
     dá o contraste que a criança e o adulto ao lado precisam para ler. */
  /* Cor por categoria, tirada da própria paleta do Balbuu. Não é enfeite:
     a criança acha a categoria pela cor antes de conseguir ler. */
  --cat-1: #24BFAD;  /* teal    */
  --cat-2: #EE6088;  /* rosa    */
  --cat-3: #FCE162;  /* amarelo */
  --cat-4: #2570C6;  /* azul    */
  --cat-5: #FE9A20;  /* laranja */
  --cat-ativa: var(--cat-1);
  /* contorno dos ícones: variável porque o alto contraste troca */
  --icotraco: #15273A;

  --cor-visor:        #15273A;
  --cor-visor-texto:  #FFFFFF;
  --cor-visor-vazio:  #8FA3B5;

  /* Cor por categoria: a criança acha o botão pela cor antes de ler.
     São as próprias cores do Balbuu, em rodízio. */
  --cat-1: #24BFAD;  /* eu quero  */
  --cat-2: #FE9A20;  /* comida    */
  --cat-3: #2570C6;  /* brincar   */
  --cat-4: #EE6088;  /* sentimentos */
  --cat-5: #8A6D1F;  /* pessoas   */
  --cat-6: #2F7D5B;  /* lugares   */
  --cat-7: #7A5AA8;  /* corpo e higiene */
  --cat-ativa: var(--cat-1);

  /* --- escala de 4px --- */
  --esp-4: 4px;   --esp-8: 8px;   --esp-12: 12px;
  --esp-16: 16px; --esp-24: 24px; --esp-32: 32px; --esp-48: 48px;

  /* --- forma: mais redondo que o app de adulto, porque é infantil --- */
  --raio:         16px;
  --raio-grande:  24px;
  --raio-pilula:  28px;
  --borda:        1px solid var(--cor-borda);
  /* Borda de baixo grossa no lugar de sombra: dá cara de tecla e afunda
     ao apertar. Mão de criança erra mais e precisa desse retorno. */
  --tecla-base:   6px;

  /* --- tipo --- */
  /* As fontes do Balbuu: Baloo 2 nos títulos (a do manual) e Nunito no
     texto. ⚠️ Em arquivo local, NÃO pelo Google: o app abre offline.
     A Baloo veio de `Balbuu\fonemas-app\tools\fontes\`, que já existia. */
  --fonte-titulo: 'Baloo 2', system-ui, -apple-system, sans-serif;
  --fonte:        'Nunito', system-ui, -apple-system, sans-serif;
  /* profundidade: a mesma ideia do app do Balbuu, no tom navy da marca */
  --sombra-marca: 0 4px 20px rgba(21,39,58,.10);
  --sombra-alta:  0 10px 30px rgba(21,39,58,.16);
  --fonte-base:   18px;
  --fonte-frase:  36px;

  /* --- toque: maior que no app adulto --- */
  --toque-min:    72px;

  /* alto contraste */
  --hc-fundo: #000000; --hc-texto: #FFFFFF; --hc-borda: #FFFFFF;
  --hc-primaria: #FFFF00; --hc-destaque: #00FFFF;
}

body.alto-contraste {
  --cor-turquesa: var(--hc-primaria);
  --cor-amarelo:  var(--hc-primaria);
  --cor-azul:     var(--hc-destaque);
  --cor-laranja:  var(--hc-destaque);
  --cor-rosa:     var(--hc-destaque);
  --cor-texto:    var(--hc-texto);
  --cor-fundo:    var(--hc-fundo);
  --cor-cartao:   var(--hc-fundo);
  --cor-borda:    var(--hc-borda);
  --cor-visor:    var(--hc-fundo);
  --cor-visor-vazio: var(--hc-texto);
  --cat-1: var(--hc-primaria); --cat-2: var(--hc-primaria);
  --cat-3: var(--hc-primaria); --cat-4: var(--hc-primaria);
  --cat-5: var(--hc-primaria); --cat-6: var(--hc-primaria);
  --cat-7: var(--hc-primaria);
}