/* ============================================================
   CAA Adulto — css/tema.css
   Só variáveis: cor, tamanho, espaço, raio, forma.
   Mudar o visual do app inteiro = mexer AQUI.
   ============================================================ */

:root {
  /* --- marca Filipe Silvestre Fonoaudiologia --- */
  --cor-fundo:            #F4F6F8;  /* papel: tira o branco chapado da tela toda */
  --cor-cartao:           #FFFFFF;
  --cor-tinta:            #141414;
  --cor-tinta-fraca:      #5A6B76;
  --cor-superficie:       #E1E7EC;
  --cor-acao:             #006EB4;
  --cor-acento:           #46C8BE;
  --cor-gravar:           #B23A2E;

  /* O visor: onde a frase se monta. Azul quase preto, derivado do azul
     da marca. Fundo escuro é decisao clinica, nao estetica: o cuidador
     precisa ler a frase do outro lado do quarto. */
  --cor-visor:            #0C1A23;
  --cor-visor-texto:      #FFFFFF;
  --cor-visor-vazio:      #6E838F;

  /* Cor por categoria. Nao e enfeite: o paciente acha a palavra pela cor
     antes de conseguir ler. Todas escurecidas o bastante para servir de
     texto sobre branco (contraste >= 4.5:1). */
  --cat-1:                #006EB4;  /* necessidades */
  --cat-2:                #C2661B;  /* alimentacao  */
  --cat-3:                #B23A2E;  /* saude        */
  --cat-4:                #8A6D1F;  /* pessoas      */
  --cat-5:                #9B3F6B;  /* emocoes      */
  --cat-6:                #2F7D5B;  /* lugares      */
  --cat-ativa:            var(--cat-1);

  /* --- derivadas --- */
  --cor-texto-botao:      #FFFFFF;
  --cor-placeholder:      #6B7A84;
  --cor-toggle-bolinha:   #FFFFFF;

  /* --- forma --- */
  --raio:                 14px;
  --raio-grande:          20px;
  --raio-pilula:          26px;
  --borda:                1px solid var(--cor-superficie);
  /* A "tecla": borda de baixo grossa no lugar de sombra. Da sensacao de
     tecla fisica e afunda ao apertar. Mao com tremor precisa saber que
     acertou. Continua sendo borda, entao a regra de nao usar sombra vale. */
  --tecla-base:           5px;

  /* --- profundidade (vinda do site da clínica) --- */
  /* ⚠️ DESVIO CONSCIENTE do DESIGN.md, que proibia sombra. A proibição
     nasceu antes e foi justamente o que deixou a 1ª versão "correta e sem
     alma". Esta é a MESMA sombra do site filipesilvestrefono: azulada,
     larga e fraca. ⛔ Um nível só, nada de sombra dentro de sombra. */
  --sombra-marca:         0 4px 24px rgba(0,110,180,.10);
  --sombra-alta:          0 10px 32px rgba(0,110,180,.14);

  /* --- fonte: a da marca, servida do próprio app --- */
  /* Sora nos títulos e Inter no texto são as fontes do site da clínica.
     ⚠️ Vêm em arquivo local (`fontes/`), NÃO do Google: o app precisa
     abrir offline no quarto do hospital. */
  --fonte-titulo:         'Sora', system-ui, -apple-system, sans-serif;
  --fonte-familia:        'Inter', system-ui, -apple-system, sans-serif;
  --fonte-tamanho-base:   18px;
  --fonte-frase:          40px;
  --fonte-palavra:        17px;
  --fonte-rotulo:         12px;

  /* --- espaço (escala de 4px) --- */
  --esp-4:                4px;
  --esp-8:                8px;
  --esp-12:               12px;
  --esp-16:               16px;
  --esp-24:               24px;
  --esp-32:               32px;
  --esp-48:               48px;

  /* --- toque --- */
  --toque-min:            48px;
  --toque-grande:         64px;
}

/* Alto contraste: apaga a cor de categoria e leva tudo ao preto no branco. */
body.alto-contraste {
  --cor-fundo:       #FFFFFF;
  --cor-cartao:      #FFFFFF;
  --cor-superficie:  #000000;
  --cor-tinta:       #000000;
  --cor-tinta-fraca: #000000;
  --cor-acao:        #00396B;
  --cor-visor:       #000000;
  --cor-visor-vazio: #FFFFFF;
  --cat-1: #000000; --cat-2: #000000; --cat-3: #000000;
  --cat-4: #000000; --cat-5: #000000; --cat-6: #000000;
}