/* Enseada - tema
   Identidade unica, a mesma do icone. Nao existe mais escolha de tema:
   o app tem um visual so, em qualquer aparelho.

   Leitura e cor sao coisas separadas aqui:
   - texto corrido e titulo usam o Verde Profundo, que da 5.44:1 sobre o
     fundo e passa o minimo de 4.5:1 da WCAG AA;
   - botao, contorno, campo e detalhe usam os tons vibrantes.

   Modo Baixo Estimulo: escolha da pessoa na tela de Ajuda, guardada no
   aparelho. Tom de noite azulado e verde-agua apagado, sem branco puro e sem
   vermelho. Contrastes conferidos (WCAG, minimo 4.5:1 para texto):
   texto sobre fundo 9.03:1, texto do botao sobre o botao 6.36:1;
   contorno e detalhe sobre fundo 5.63:1 e 5.76:1 (minimo 3:1). */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/AtkinsonHyperlegible-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/AtkinsonHyperlegible-Bold.woff2") format("woff2");
}

:root {
  --fundo: #F8F9FA;             /* Branco Suave */
  --texto: #1F7268;             /* Verde Profundo - so leitura. 5.44:1 */
  --fraco: #1F7268;             /* texto de apoio: mesmo tom, corpo menor */
  --destaque: #00AEEF;          /* Azul Turquesa - botao e contorno */
  --detalhe: #2A9D8F;           /* Verde-agua - molduras e detalhes */
  --texto-no-destaque: #0E3A36; /* sobre o botao azul: 4.95:1 */
  --linha: #2A9D8F;
  color-scheme: light;

  --escala: 1;
  --fonte: "Atkinson Hyperlegible", "Trebuchet MS", system-ui, sans-serif;
  --raio: 10px;
  --largura: 34rem;
}

/* Tamanho da letra, escolhido na tela de Ajuda. */
:root[data-fonte="grande"] { --escala: 1.15; }
:root[data-fonte="maior"] { --escala: 1.35; }

/* Modo Baixo Estimulo. Troca so as variaveis: nenhuma regra de tela muda. */
:root[data-tema="baixo"] {
  --fundo: #1B2328;
  --texto: #A3CBC4;
  --fraco: #A3CBC4;
  --destaque: #5BA7AE;
  --detalhe: #4FA89C;
  --texto-no-destaque: #0D1B1E;
  --linha: #4FA89C;
  color-scheme: dark;
}