/* ===================================================================
   OS TOKENS DO PRODUTO — UMA DECLARAÇÃO, E NÃO TRÊS.

   -------------------------------------------------------------------
   O DEFEITO QUE ESTE ARQUIVO CONSERTA, MEDIDO.

   A paleta estava declarada em cinco lugares, com TRÊS valores
   diferentes para a mesma cor:

     --cream-100   #fbf6ec  nas páginas de material (pqm-base)
                   #faf6ee  na tela inicial (public/index.html)
                   #faf2e6  no banco de questões

   E não era só o creme. A tela inicial divergia em SETE tokens
   (--cream-100, --cream-200, --cream-300, --tan-400, --tan-500,
   --red-100, --red-600) e a tela de instalação em quatro.

   Por token a diferença é pequena e some numa captura isolada. Lado a
   lado — e a pessoa abre a tela inicial e um material no mesmo minuto —
   é exatamente a costura que faz o aplicativo parecer feito de pedaços.
   Era a raiz da sensação de "Frankenstein", mais do que o peso do CSS.

   -------------------------------------------------------------------
   QUAL PALETA FICOU, E POR QUÊ.

   A das PÁGINAS DE MATERIAL. Não por gosto: 132 dos 136 arquivos de
   conteúdo já declaram a folha `pqm-base`, que traz estes valores. Era
   a única escolha que deixava o acervo inteiro intocado e mudava só
   duas telas.

   -------------------------------------------------------------------
   POR QUE ELE NÃO SUBSTITUI O :root DA pqm-base.

   A `pqm-base.<hash>.css` é GERADA — o
   `ferramentas/peso/extrair_estilos.cjs` a produz a partir de um
   arquivo de conteúdo, e o cabeçalho dela diz "não edite aqui". Os
   valores dela são os canônicos e são IDÊNTICOS aos de baixo; conferido
   token a token ao escrever este arquivo.

   O que este arquivo faz é outra coisa, e é o que faltava: ele é a
   declaração que o SHELL carrega, sempre, independentemente do que o
   fragmento declarou. Hoje, se um material esquece o `css: pqm-base` no
   cabeçalho, o shell inteiro fica sem tokens — e QUATRO dos 136
   arquivos de conteúdo não declaram pqm-base. Com esta folha no molde,
   o cabeçalho, a tarja e os botões do shell têm cor mesmo aí.

   Ele é ligado PRIMEIRO, antes de tudo. Quem vier depois — pqm-base
   dentro do corpo, a folha própria da página, a camada de
   acessibilidade — continua vencendo exatamente como vencia. Nada da
   cascata muda: esta folha só preenche o que antes podia faltar.

   -------------------------------------------------------------------
   O QUE ELE DELIBERADAMENTE NÃO FAZ.

   Não mexe nas correções de contraste. O `public/acessibilidade.css`
   sobrescreve `--gold-600` e `--green-600` por medida de WCAG
   (#7c5812 e #1f6b3f, com os cálculos escritos lá), e ele é carregado
   DEPOIS. Essa última palavra continua sendo dele. Os valores abaixo
   são os da identidade; os de lá são os que a tela usa.

   Não unifica o BANCO DE QUESTÕES. Ele tem paleta própria, mais escura
   (--brown-900:#2f1c14, --cream-100:#faf2e6), declarada em dois
   arquivos de conteúdo e numa folha com hash que não tem fonte. Pode
   ser deriva ou pode ser identidade deliberada daquela gaveta — é
   decisão de produto, e está registrada como pendência em vez de ser
   resolvida de surpresa.
   =================================================================== */

:root {
  /* Os marrons da marca. */
  --brown-900: #3a2318;
  --brown-800: #4a2c1d;
  --brown-700: #583323;
  --brown-600: #6b4432;
  --brown-500: #7a4f38;

  /* Os cremes do papel. */
  --cream-100: #fbf6ec;
  --cream-200: #f6eddc;
  --cream-300: #efe1c8;

  /* O bege das bordas. */
  --tan-400: #e7d2b0;
  --tan-500: #dcbd90;

  /* O dourado é dos favoritos, e de mais nada. Ver o lib/componentes.js:
     gastá-lo noutro lugar ensina a ignorar a estrela.
     O --gold-600 é reescrito pelo acessibilidade.css para #7c5812. */
  --gold-500: #c8952f;
  --gold-600: #a97a22;

  /* O verde é de "está em dia". O --green-600 é reescrito pelo
     acessibilidade.css para #1f6b3f, por contraste. */
  --green-600: #2f7d4f;
  --green-100: #e4f3e9;

  /* O VERMELHO É DO RISCO CLÍNICO, e esta é uma regra do produto, não
     uma preferência. Hoje ele está gasto: a caixa `.callout-warn`
     significa oito coisas ao mesmo tempo, de "TIAMINA ANTES DA GLICOSE"
     a "Sobre as imagens". Está medido e listado no relatório da
     auditoria, para reclassificação com revisão clínica. */
  --red-600: #b03a3a;
  --red-100: #f8e7e7;

  /* O azul é de informação neutra. */
  --blue-600: #2f5f8a;
  --blue-100: #e6eef5;

  --shadow: 0 10px 30px rgba(58, 35, 24, .12);
  --radius: 16px;

  /* O PISO DE TOQUE, EM UM LUGAR SÓ.

     44px é o mínimo das WCAG 2.2 (2.5.8 Target Size), e o projeto já o
     cobrava em vários lugares com o número escrito à mão. Escrito aqui,
     um componente novo o herda em vez de redescobri-lo — e quando foi
     esquecido, custou: a estrela dos favoritos tinha 33 × 41px e o
     botão do Modo consulta, ~30px de altura. */
  --pqm-toque: 44px;
}