/* ============================================================
   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. */
  /* (as cores de categoria ficam num bloco só, mais abaixo — havia duas
     definições aqui e a de baixo vencia, o que escondeu o problema) */
  /* 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 7 categorias e a marca tem 5 cores. As duas que faltavam
     ('#8A6D1F' e '#2F7D5B') tinham sido pegas emprestadas do app ADULTO —
     cor de fora da marca, no app que mais precisa parecer Balbuu.
     ⛔ Corrigido: as 7 saem da paleta do Balbuu ou de um tom escuro da
     própria paleta, nunca de fora dela. */
  --cat-1: #24BFAD;  /* eu quero        · teal da marca      */
  --cat-2: #FE9A20;  /* comida          · laranja da marca   */
  --cat-3: #2570C6;  /* brincar         · azul da marca      */
  --cat-4: #EE6088;  /* sentimentos     · rosa da marca      */
  /* 🐛 11/08: era '#15273A', o navy da marca — e o contorno do ícone
     ('--icotraco') é o MESMO navy. A aba "Pessoas" virava um retângulo preto
     com o ícone e o nome invisíveis dentro. 🥇 LIÇÃO: cor de categoria não
     pode ser a mesma cor do traço do ícone que vive em cima dela.
     Agora é o navy CLAREADO (o mesmo tom que o visor já usa como texto
     apagado): continua da família da marca e deixa o ícone aparecer. */
  --cat-5: #8FA3B5;  /* pessoas         · navy claro         */
  --cat-6: #1A8F82;  /* lugares         · teal escurecido    */
  --cat-7: #B07E14;  /* corpo e higiene · amarelo escurecido */
  --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);
  /* 🐛 26/08/2026 — BOTÃO DESABILITADO ESTAVA ILEGÍVEL (ele viu no tutorial:
     o "‹ Anterior" do passo 1 sumia no fundo). A causa era 'opacity: .4':
     opacidade apaga o texto JUNTO com o fundo, e o cinza-sobre-cinza que
     sobra dá ~2,7:1 de contraste — abaixo de qualquer régua de leitura.
     ⛔ Não voltar a usar opacidade para desabilitar: usar estas cores, que
     têm 4,6:1 e continuam PARECENDO apagadas ao lado do botão de ação. */
  --desab-texto: #5A6B7C;
  --desab-fundo: #E9EFEF;
  --desab-borda: #CBD8D8;
  /* 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);
  /* no alto contraste o desabilitado também precisa ser lido: cinza claro
     sobre preto (~9:1), com a borda marcando o limite do botão. */
  --desab-texto: #BDBDBD;
  --desab-fundo: var(--hc-fundo);
  --desab-borda: #BDBDBD;
  --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);
  /* 🐛 11/08: o comentário lá em cima diz "variável porque o alto contraste
     troca" — e o alto contraste NÃO trocava. O contorno dos ícones seguia
     navy, ou seja, escuro sobre o fundo preto: no modo feito para quem
     enxerga pouco, os ícones das abas simplesmente sumiam. */
  --icotraco: var(--hc-texto);
}