/* ============================================================
   Ressoar Afasia — css/tema.css
   Só variáveis: cor, tamanho, espaço, raio, forma.
   Mudar o visual do app inteiro = mexer AQUI.
   ⛔ Nenhuma cor escrita fora deste arquivo.
   ============================================================ */

:root {
  /* --- marca Vozes que Ressoam (a mesma do Ressoar CAA, de propósito) --- */
  --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;  /* azul da marca */
  --cor-acento:           #46C8BE;  /* turquesa — ⛔ NUNCA vira cor de texto (1,9:1) */
  --cor-alerta:           #B23A2E;

  /* --- derivadas --- */
  --cor-texto-botao:      #FFFFFF;
  --cor-foco:             #006EB4;

  /* --- forma --- */
  --raio:                 14px;
  --raio-grande:          20px;
  --borda:                1px solid var(--cor-superficie);
  /* A "tecla": borda de baixo grossa no lugar de sombra. Afunda ao apertar.
     Mão com tremor precisa SENTIR que acertou. */
  --tecla-base:           5px;

  /* --- profundidade: uma sombra só, azulada, larga e fraca --- */
  /* ⛔ Um nível por elemento. Nunca sombra dentro de sombra, nunca preta. */
  --sombra-marca:         0 4px 24px rgba(0,110,180,.10);

  /* --- fonte da marca, servida da própria pasta (⛔ sem Google, sem CDN) --- */
  --fonte-titulo:         'Sora', system-ui, -apple-system, sans-serif;
  --fonte-familia:        'Inter', system-ui, -apple-system, sans-serif;
  --fonte-tamanho-base:   18px;   /* 🔴 nada que o paciente leia fica abaixo de 16px */
  --fonte-palavra:        44px;   /* a palavra do exercício: é o elemento mais lido */
  --fonte-pergunta:       24px;
  --fonte-rotulo:         16px;

  /* --- espaço (escala de 4px; ⛔ nenhum valor fora desta lista) --- */
  --esp-4:                4px;
  --esp-8:                8px;
  --esp-12:               12px;
  --esp-16:               16px;
  --esp-24:               24px;
  --esp-32:               32px;
  --esp-48:               48px;

  /* --- toque --- */
  /* 64px, não 44: tremor e pouca destreza são a regra aqui, não a exceção. */
  --toque-min:            64px;
}

/* Alto contraste: leva tudo ao preto no branco, sem depender de cor nenhuma. */
body.alto-contraste {
  --cor-fundo:       #FFFFFF;
  --cor-cartao:      #FFFFFF;
  --cor-superficie:  #000000;
  --cor-tinta:       #000000;
  --cor-tinta-fraca: #000000;
  --cor-acao:        #00396B;
}

/* Quem pediu menos movimento no sistema não recebe movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: none; }
}