/* ============================================================
   A MARCA DA MUNDO — os tokens
   ------------------------------------------------------------
   As cores, as fontes e as medidas da marca, sozinhas num
   arquivo. Este é o único lugar do repositório onde um valor de
   marca aparece escrito. Qualquer outro arquivo que precise de
   uma cor pede ela por variável, e nunca escreve o número.

   Os valores foram copiados do /styles.css e do
   /ferramentas/_motor/sistema.css do site da Mundo, sem
   arredondar e sem inventar variação.

   ------------------------------------------------------------
   COMO ATUALIZAR, no dia em que a marca mudar

   Mude aqui, e só aqui. Tudo que herda muda junto: o painel, o
   formulário do médico e o que vier depois.

   ------------------------------------------------------------
   ATENÇÃO, E ESTE É O PONTO QUE MAIS SE ERRA

   Este visual é a identidade DA MUNDO, e serve às ferramentas da
   Mundo. Os SITES DOS MÉDICOS não podem ter esta cara, senão
   todo médico da carteira sai com o mesmo site e quem olhar dois
   vê a agência em vez de ver o médico.
   ============================================================ */

:root{
  /* ── Tinta ── */
  --tinta:#13241B;
  --tinta-70:#3D4A42;
  --tinta-45:#6B756E;
  --tinta-25:#9AA29C;

  /* ── Verdes da marca ── */
  --verde:#1B3A2D;
  --verde-vivo:#2D5E3F;
  --verde-claro:#5B8A6C;
  --verde-fraco:rgba(45,94,63,.075);
  --verde-fio:rgba(45,94,63,.3);

  /* ── Terracota: a segunda cor do sistema ── */
  --terra:#B5551F;
  --terra-viva:#D3742F;
  --terra-fraca:rgba(181,85,31,.075);
  --terra-fio:rgba(181,85,31,.32);

  /* ── Superfícies ── */
  --mesa:#E5D3C0;
  --folha:#FBF7EE;
  --folha-2:#F3ECDD;

  /* ── Fios ── */
  --fio:rgba(19,36,27,.15);
  --fio-medio:rgba(19,36,27,.32);
  --fio-forte:#13241B;
  --fio-terra:rgba(181,85,31,.55);

  /* ── Papel de verdade: sombra curta e direcional ── */
  --papel-1:0 1px 0 rgba(19,36,27,.13), 0 10px 22px -14px rgba(19,36,27,.42);
  --papel-2:0 1px 0 rgba(19,36,27,.15), 0 22px 46px -26px rgba(19,36,27,.48);
  --papel-3:0 1px 0 rgba(19,36,27,.10), 0 5px 12px -8px rgba(19,36,27,.35);

  /* ── Tipos ── */
  --fd:'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fc:'Instrument Sans',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --fm:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs:Georgia,'Times New Roman',serif;

  /* ── Medidas ── */
  --container:1120px;
  --gutter:clamp(1rem,3.4vw,2.4rem);
  --regua-x:clamp(44px,5.2vw,84px); /* a linha vermelha da margem */
  --margem:clamp(58px,6.6vw,108px); /* recuo do conteúdo, depois dos furos */
  --pad-dir:clamp(20px,3vw,38px);
  --ease:cubic-bezier(.2,.7,.3,1);

  /* Altura mínima de qualquer coisa em que se toca. A WCAG 2.2
     pede 24px no critério 2.5.8. Aqui é 44, porque este painel
     vai ser usado no carro e na fila do banco, com uma mão só. */
  --alvo:44px;
}

/* ── ONDE CADA TINTA PODE IR ────────────────────────────────
   Os tokens são os da marca e não se mexe neles. O que se
   escolhe é onde cada um entra, e isso é decisão de contraste,
   medida contra o critério 1.4.3 da WCAG 2.2, que pede 4,5:1.

     --tinta      15,2:1 sobre a folha. O valor dos campos
     --tinta-70    8,7:1 sobre a folha. Rótulo, ajuda, etiqueta,
                   e tudo que alguém precisa ler
     --tinta-45    4,5:1 na risca. Só bolinha e seta, que são
                   desenho e não texto
     --tinta-25    2,5:1. NÃO passa em nada. Não use.

   E a terracota tem uma regra só dela: ela é a cor do PAPEL
   LIMPO. Sobre --folha ela dá 4,58:1 e passa. Sobre a mesa cai
   para 3,36:1, e sobre qualquer fundo tingido de terracota cai
   para 4,16:1. As duas reprovam. Então letra em terracota só
   sobre --folha, nunca sobre a mesa, nunca dentro de uma
   etiqueta tingida. Onde a etiqueta precisa de cor, quem carrega
   a cor é a borda e o pontinho, e o miolo continua papel.
   Sobre a mesa, o destaque é --verde-vivo, que dá 5,18:1.

   Sobre a mesa (o bege do fundo) a conta é outra, e mais dura:
   --tinta-45 cai para 3,3:1. Por isso o pé da página e a
   contagem de médicos usam --tinta-70.
   ─────────────────────────────────────────────────────────── */