/* Vagas Sem Barreiras, tokens de design.

   Toda cor aqui foi **medida**, não escolhida. Os números ao lado de cada
   par são a razão de contraste WCAG 2.1, e `tests/acessibilidade/
   test_contraste.py` recalcula todos eles a cada execução da suíte: um token
   novo sem medição faz o teste falhar.

   Três achados que governam o uso da paleta da identidade:

   - #0E4A55 sobre branco dá 9,86:1, é a tinta principal, e passa em AAA.
   - #1B7F8C sobre branco dá 4,71:1, mas sobre o fundo #F4F8F8 cai para
     4,4:1 e REPROVA. Por isso ele é cor de **fundo** (com texto branco), e
     quem carrega texto é --teal-ink (#15646F: 6,81:1 no branco).
   - #7FD3C4 sobre branco dá 1,75:1. O acento é **superfície**, nunca tinta
     sobre claro, e nunca carrega informação sozinho. */

:root {
  color-scheme: light;

  /* --- cor: tema padrão --- */
  --bg: #F4F8F8;
  --surface: #FFFFFF;
  --surface-alt: #E9F2F2;
  --ink: #12333A;            /* 13,46:1 sobre branco */
  --ink-suave: #4A5B5E;      /*  7,12:1 sobre branco */
  --teal-900: #0E4A55;       /*  9,86:1 sobre branco */
  --teal-600: #1B7F8C;       /* fundo com texto branco: 4,71:1 */
  --teal-ink: #15646F;       /*  6,81:1 sobre branco */
  --acento: #7FD3C4;         /* superfície: tinta escura por cima (5,64:1) */
  --acento-suave: #DFF3EE;
  --linha: #C9D8D8;
  /* Borda de campo de formulário é componente de interface, e a WCAG 1.4.11
     pede 3:1 contra o fundo adjacente. O valor anterior (#8FAFB2) dava
     2,35:1 sobre branco e 2,06:1 sobre a superfície alternativa, reprovava
     nos três lugares em que aparece. Este dá 3,83:1, 3,58:1 e 3,37:1.
     Achado pelo `test_contraste.py`, não a olho nu: a diferença entre os
     dois tons é invisível num campo vazio e decisiva para quem tem baixa
     sensibilidade ao contraste. */
  --linha-forte: #67888C;

  --ok: #0F6B4F;             /*  6,49:1 */
  --ok-fundo: #E3F3EC;
  --atencao: #7A5200;        /*  6,92:1 */
  --atencao-fundo: #FBF0D8;
  --erro: #A62121;           /*  7,34:1 */
  --erro-fundo: #FBE9E9;

  --foco: #0B3A44;           /* 12,33:1, contorno visível em qualquer fundo */
  --foco-halo: #FFFFFF;

  /* Espessura da borda de superfície. No tema claro a profundidade vem da
     sombra e a borda é fina; nos temas de alto contraste ela engrossa para
     2px e passa a ser o único delimitador (a sombra some lá). */
  --largura-borda: 1px;

  /* --- tipografia ---
     18px de base, e não 16: o público desta plataforma inclui muita gente
     com baixa visão, e o corpo pequeno é a barreira mais comum e mais
     barata de remover. Tudo o mais é em rem, para que o ajuste de fonte da
     barra de acessibilidade mova a página inteira junto. */
  /* Duas famílias, herdadas do projeto irmão VagasTrans. A de corpo foi
     desenhada para leitura com baixa visão; a de título é variável e carrega
     um display grande sem precisar gritar em tamanho. Títulos e corpo em
     famílias diferentes é o que dá hierarquia sem depender só de escala. */
  --fonte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --fonte-display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --texto-xs: 0.83rem;
  --texto-sm: 0.94rem;
  --texto-base: 1rem;
  --texto-lg: 1.15rem;
  --texto-xl: 1.4rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.2rem;
  --texto-4xl: 2.8rem;
  --altura-linha: 1.6;
  --medida: 68ch;            /* largura de linha confortável */

  /* --- espaço: escala de 4px, consecutiva de 1 a 8 --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Raio: mais fechado nos elementos internos, mais aberto nos contêineres.
     Uniformizar tudo num único valor é o que faz uma interface parecer
     montada por template. */
  --raio-sm: 6px; --raio-md: 10px; --raio-lg: 16px; --raio-xl: 24px;
  --raio: var(--raio-md);

  /* Sombras **tingidas** com o teal da marca, não pretas: sombra preta sobre
     fundo com matiz lê como sujeira, e é o detalhe que separa uma interface
     desenhada de uma montada. */
  --sombra-1: 0 1px 2px rgba(14, 74, 85, .07);
  --sombra-2: 0 2px 4px rgba(14, 74, 85, .06), 0 8px 20px rgba(14, 74, 85, .07);
  --sombra-3: 0 4px 8px rgba(14, 74, 85, .07), 0 18px 40px rgba(14, 74, 85, .10);
  --sombra-foco: 0 0 0 4px rgba(27, 127, 140, .18);

  --container: 1200px;
  --container-texto: 760px;
  --alvo: 44px;              /* alvo mínimo de toque (WCAG 2.5.5) */

  /* Uma curva só para tudo o que se move. Movimento com tempos diferentes em
     cada componente lê como interface remendada. */
  --transicao: 180ms cubic-bezier(.2.7.3, 1);
}

/* --- alto contraste, fundo escuro ---
   Amarelo sobre preto: 19,56:1. É a combinação que mais gente com baixa
   visão pede, e a que mais reprova quando se tenta "adaptar" a paleta da
   marca em vez de trocá-la inteira. Aqui ela é trocada inteira. */
:root[data-tema="alto-contraste"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #000000;
  --surface-alt: #141414;
  --ink: #FFFFFF;
  --ink-suave: #F2F2F2;
  --teal-900: #FFFF00;
  --teal-600: #003B45;
  --teal-ink: #FFFF00;
  --acento: #FFFF00;
  --acento-suave: #1A1A00;
  --linha: #FFFFFF;
  --linha-forte: #FFFFFF;
  --ok: #4DFF9E;
  --ok-fundo: #001A0D;
  --atencao: #FFD34D;
  --atencao-fundo: #1A1400;
  --erro: #FF8080;
  --erro-fundo: #1A0000;
  --foco: #FFFF00;
  --foco-halo: #000000;
  /* Sem sombra: em alto contraste a profundidade é dita pela borda, e sombra
     sobre preto não comunica nada além de borrão. */
  --sombra-1: none;
  --sombra-2: none;
  --sombra-3: none;
  --sombra-foco: none;
  --largura-borda: 2px;
}

/* --- alto contraste, fundo claro ---
   Para quem tem o problema oposto: fundo escuro com texto claro espalha
   (halation) e cansa. Preto puro sobre branco puro, bordas grossas. */
:root[data-tema="alto-contraste-claro"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F0F0F0;
  --ink: #000000;
  --ink-suave: #1A1A1A;
  --teal-900: #00003C;
  --teal-600: #00003C;
  --teal-ink: #00003C;
  --acento: #00003C;
  --acento-suave: #E6E6F5;
  --linha: #000000;
  --linha-forte: #000000;
  --ok: #00401F;
  --ok-fundo: #E6F2EB;
  --atencao: #4A3200;
  --atencao-fundo: #F7F0DC;
  --erro: #6B0000;
  --erro-fundo: #F7E6E6;
  --foco: #00003C;
  --foco-halo: #FFFFFF;
  --sombra-1: none;
  --sombra-2: none;
  --sombra-3: none;
  --sombra-foco: none;
  --largura-borda: 2px;
}

/* Quem já pediu mais contraste no sistema recebe o tema sem precisar achar
   a barra, mas só se não tiver escolhido nada, porque escolha explícita
   vence preferência do sistema. */
@media (prefers-contrast: more) {
  :root:not([data-tema]) {
    --ink: #000000;
    --ink-suave: #1A1A1A;
    --linha: #000000;
    --teal-600: #0E4A55;
  }
}

/* --- escala de fonte ---
   O html carrega o tamanho; o resto da folha é todo em rem. */
html { font-size: 18px; }
html[data-fonte="115"] { font-size: 20.7px; }
html[data-fonte="130"] { font-size: 23.4px; }
html[data-fonte="150"] { font-size: 27px; }