/* ============================================================
   tokens.css — o arquivo ÚNICO de tokens (03/09/2026).

   Regra da casa (CLAUDE.md da reforma): toda cor, espaçamento, raio,
   fonte e duração vem daqui. Nenhum valor cru em componente.

   Os tokens do briefing: --surface-*, --text-*, --border, os quatro
   papeis semanticos com fill/bg/text, a escala de espaco, o raio, o
   ritmo e o tipo. A PONTE que traduzia os nomes antigos da tela morreu
   em 03/09/2026, quando a ultima tela interna migrou — hoje a tela fala
   so esta lingua, e testes/test_tokens.js nao deixa nome antigo voltar.

   O escuro troca por atributo na raiz (html[data-tema="escuro"]) —
   nenhum ajuste em componente.
   ============================================================ */

:root {
  /* ============================================================
     A ARDOSIA (23/09/2026, pele-ardosia) — a pele da casa.
     ============================================================
     Desenhada e escolhida pelo dono fora do codigo, depois de a rodada
     de peles (Saguao, Malaga, Vidro) sair com diferencas minimas e
     deixar visivel o defeito maior: o menu era preto, e as faixas do
     conteudo — o resumo do Inicio, os cabecalhos de placa — tambem, na
     mesma cor. A tela ficava confusa.

     A REGRA: o menu e GRAFITE (nunca preto puro), e NADA fora do menu
     usa a cor dele — nem resumo, nem cabecalho de placa, nem faixa,
     botao ou selo. Os tokens --sinal-placa-* e --alerta-na-placa* sao
     do menu e so do menu; testes/test_ardosia.js recusa uma regra fora
     do menu que os leia, e um token de superficie que resolva para a
     cor do menu, nos dois temas.

     Os valores vieram de um desenho estatico e foram traduzidos para os
     papeis que ja existiam. Onde a traducao pediu um papel que nao
     existia, ele entrou UM, pelo papel (cabecalho de placa, barra do
     topo, hover do acento) — nunca um token por tela. Onde a medida
     pediu, o valor desceu um degrau do desenho, e o numero do desenho
     esta ao lado. Quem mede e a suite (test_tokens.js,
     test_contraste_em_uso.js), nos dois temas. */

  /* ---- superficies ---- */
  --surface-page: #EDF0F3;
  --surface-card: #FFFFFF;
  /* O fundo de campo, de hover e de item ativo. Nao estava no desenho:
     e o degrau entre o chao e a divisoria, claro o bastante para o
     texto secundario passar sobre ele (4,7:1). */
  --surface-sunken: #E9EDF1;
  /* A BARRA DO TOPO e um papel proprio: no claro ela e branca como a
     placa, no escuro fica entre o chao e a placa. */
  --surface-topo: #FFFFFF;
  /* O CABECALHO DE PLACA: o tom claro com o titulo no acento. Era a
     faixa preta de toda placa com cabecalho (Inicio, voos, relatorios,
     gavetas, janelas, quadro, cotacao, venda, pessoa, voo). */
  --surface-cab: #F5F7F9;

  /* ---- texto ---- */
  --text-primary: #1B2129;
  /* O secundario do desenho (#5F6974) dava 2,86:1 no rotulo esmaecido
     do botao ocupado discreto (test_tokens.js pede 3:1); desceu dois
     degraus. */
  --text-secondary: #5A646F;
  /* O fraco nao estava no desenho. Ele e rotulo e metadado de 11px, o
     pior caso que existe, e por isso passa a 4,5:1 nas tres
     superficies — e por isso quase encosta no secundario. */
  --text-muted: #616B76;
  /* O titulo do cabecalho de placa. No claro e o proprio acento; no
     escuro o desenho o separa do acento (#9DBBD6 contra #8FB3D4). */
  --text-cab: #2C4A63;

  /* ---- bordas ----
     --border e --border-strong sao FIO DECORATIVO; --border-campo e o
     CONTORNO DE COMPONENTE de um campo, e a WCAG 1.4.11 pede 3:1 dele
     nas tres superficies. --border-cab e a linha do cabecalho de placa;
     --divisoria, o fio entre duas linhas de uma lista. */
  --border: #D9DFE5;
  --border-strong: #C5CDD5;
  --border-campo: #747E89;
  --border-cab: #E5E9EE;
  --divisoria: #EEF1F4;

  /* ---- papeis semanticos: fill / bg (tinta clara) / text ----
     O acento e o azul-ardosia do desenho: botao principal, icone do
     resumo, titulo. O acento continua o unico customizavel por agencia
     (a marca dela entra sobrescrevendo --accent-* na raiz). */
  --accent-fill: #6b3a5b;
  --accent-fill-hover: #5c3150;
  /* A selecao (linha escolhida, item atual) e o halo do foco. */
  --accent-bg: #f3e9ee;
  --accent-text: #5a2f4c;
  /* PERIGO, ATENCAO E OK SAO DISTINGUIVEIS TAMBEM EM CLARIDADE, e nao
     so em matiz: quem nao separa vermelho de verde separa claro de
     escuro. O vinho do desenho fica no meio (L* 37); a tinta do ok sobe
     (L* 46), e o texto do ok e o da atencao descem (L* 29) — todos a mais de 8
     do perigo. A tinta da atencao e grafica (icone, fio), 3:1. */
  --danger-fill: #A12D3A;
  --danger-bg: #F9ECEE;
  --danger-borda: #EBC9CE;
  --danger-text: #A12D3A;
  --warn-fill: #A07A18;
  --warn-bg: #FAF2DC;
  --warn-text: #5A4009;
  --ok-fill: #2E7A5A;
  --ok-bg: #E6F1EB;
  --ok-text: #154E33;
  --on-accent: #FFFFFF;
  --on-danger: #FFFFFF;

  /* ---- O CABECALHO DE FASE (23/09/2026, menu-cotacoes) ----
     A placa de cada etapa do quadro de cotacoes (Novo, Enviado,
     Aguardando pagamento…) veste o ACENTO — o do botao principal,
     "+ Novo" — com a tinta sobre acento. E um papel, e nao o acento
     solto: SO o quadro o le (testes/test_cabecalho_fase.js recusa outra
     placa usando-o), e ele aponta para o acento em vez de ter valor
     proprio — segue os dois temas e a marca da agencia sozinho. Por isso
     o bloco escuro NAO o redeclara. */
  --cabecalho-fase-fundo: var(--accent-fill);
  --cabecalho-fase-texto: var(--on-accent);

  /* ---- O MENU: GRAFITE, E SO ELE ----
     Os nomes (--sinal-placa-*) sao do mundo da sinalizacao, em que a
     placa preta era o menu E o conteudo. Hoje eles sao o MENU — a
     lateral, e a barra de baixo no celular — e mais nada.
       sinal-placa          o fundo do menu
       sinal-placa-texto    o item
       sinal-placa-texto-fraco  o secundario (subitem, conta, rodape)
       sinal-placa-hover    o item ativo e o item sob o mouse
       sinal-placa-fio      as divisorias do menu
       sinal-placa-borda    a aresta do menu contra o conteudo
       sinal-na-placa       a barra e o icone do item ativo, e o foco
       alerta-na-placa      a contagem critica no menu
     O secundario do desenho (#95A0AB) dava 4,44:1 sobre o item ativo;
     clareou quatro degraus: #99A4AF, 4,66:1. */
  --sinal-placa: #262B31;
  --sinal-placa-texto: #E9EDF1;
  --sinal-placa-texto-fraco: #99A4AF;
  --sinal-placa-fio: rgba(255, 255, 255, .10);
  --sinal-placa-hover: #323841;
  --sinal-placa-borda: #262B31;
  --sinal-na-placa: #5CB8AC;
  --alerta-na-placa: #F0B6B9;
  /* O AMARELO DE SINAL DO SAGUAO SAIU COM ELE. Ele fazia quatro papeis
     no conteudo, e cada um foi para o seu na Ardosia: a seta do botao
     herda a cor do rotulo; o anel de foco, a aba e a linha escolhidas
     sao o acento; atencao, nota interna e prioridade sao o ambar
     (--warn-*); o check-in e o grafico sao --cat-amarelo. Os dois nomes
     abaixo ficam como APELIDO da tinta de atencao, porque 29 regras os
     leem ("esfriando", "janela acabando", "falta um dado"). */
  --sinal-bg: var(--warn-bg);
  --sinal-text: var(--warn-text);

  /* ---- a marca da MÁLAGA ----
     O navy da casa, separado do acento do sistema de propósito: o
     acento é customizável por agência, e a assinatura da Málaga não.
     Ela aparece na tela de entrar, no rodapé do menu e no botão da
     assistente — os três lugares onde quem fala é a Málaga, não a
     agência que está usando. */
  /* #101F35 E O VALOR DO DOCUMENTO (secao 2, atualizada pelo fundador
     em 07/09): "Marca Malaga (login) — fundo". O token estava em
     #133046, e a regra de conflito e explicita — "quando houver
     conflito entre este documento e o codigo existente, vale este
     documento".

     Medido antes de trocar, e o mais escuro e o melhor dos dois:
       #133046 + #FFFFFF = 13,65:1
       #101F35 + #FFFFFF = 16,54:1   <- vale
     E o painel da esquerda agora e uma superficie inteira desta cor,
     com quatro linhas de texto em cima: a folga extra deixou de ser
     enfeite. */
  --malaga: #6b3a5b;
  --on-malaga: #FFFFFF;

  /* O VÉU que escurece o fundo atrás de um painel. Igual nos dois temas
     de propósito: ele não pinta, ele apaga o que está atrás — e apagar
     é a mesma coisa no claro e no escuro. Estava escrito à mão em dois
     lugares (o menu recolhido e o detalhe da cotação), que é exatamente
     como dois véus começam a discordar. */
  --veu: rgba(20, 20, 18, .4);

  /* ---- AS CORES DE MARCA DOS CANAIS ----
     Elas existem SO nos botoes de acao de um contato — abrir a conversa,
     mandar um e-mail. E uma excecao consciente a regra da caixa de
     entrada, onde canal se identifica por icone e nunca por cor: la sao
     dezenas de itens numa lista, e pintar cada um de verde ou rosa faria
     a caixa parecer tres produtos. Aqui sao dois ou tres botoes num
     cartao, e a cor e o que faz o olho achar o do WhatsApp sem ler.
     Tom escurecido do verde oficial (#25D366) para ter contraste sobre
     papel claro; o e-mail nao tem marca unica, entao usa o azul de
     correio que todo mundo reconhece. */
  --marca-whatsapp: #128C7E;
  --marca-email: #2563EB;

  /* ---- cores de CATEGORIA ----
     Distinguem TIPO onde não há juízo de valor: as colunas do funil, o
     horário marcado à mão na agenda. Nunca use uma delas para dizer que
     algo está atrasado, crítico ou pronto — isso é dos quatro papéis
     semânticos acima, que são reservados. Existem porque, sem elas, a
     tentação é pintar categoria com a cor de estado e o vermelho deixa
     de querer dizer vermelho. */
  /* AZUL E ROXO DESCERAM UM DEGRAU em 23/09/2026: sao o nome da coluna
     do funil e a hora marcada a mao na agenda, e ninguem os media como
     TEXTO. Estavam em 3,45:1 (azul) e 4,14:1 (roxo) sobre o afundado. */
  --cat-azul: #3E6A8A;
  --cat-azul-bg: #EEF2F7;
  --cat-roxo: #5B5FAD;
  --cat-roxo-bg: #EEF0F9;
  /* O fluxo de caixa (fatia 8): entra e sai sao CATEGORIAS, nao
     gravidades: a tinta do texto e um cinza. */
  --cat-entra: #1B2129;
  --cat-sai: #858E97;
  --cat-amarelo: #A98110;
  --cat-amarelo-bg: #FBF6E6;
  /* O CALENDARIO (16/09/2026) pediu nove categorias distinguiveis de
     relance, no molde do Google Agenda — tres tons a mais, todos de TIPO
     (e nenhum verde: verde e do papel semantico de "conferido"). */
  --cat-rosa: #B04F77;
  --cat-ciano: #2D7F86;
  --cat-laranja: #C0632B;
  /* O AVATAR DA CAIXA E O CANAL (18/09/2026): circulo na cor da rede.
     Tinta e fundo de MARCA (WhatsApp, Instagram, e-mail), nao de estado.
     As iniciais sao TEXTO: medidas em 23/09/2026, WhatsApp dava 3,88:1
     e Instagram 4,42:1 sobre a propria tinta clara. Desceram ate 4,5. */
  --canal-whatsapp: #108044;
  --canal-whatsapp-bg: rgba(37, 211, 102, .14);
  --canal-instagram: #BE3469;
  --canal-instagram-bg: rgba(238, 42, 123, .12);
  --canal-email: #C5372C;
  --canal-email-bg: rgba(234, 67, 53, .12);
  /* O TikTok (27/09/2026): a tinta quase preta da marca sobre o ciano dela. */
  --canal-tiktok: #1F2328;
  --canal-tiktok-bg: rgba(37, 244, 238, .18);
  /* A CONVERSA DO WHATSAPP COM A CARA DO WHATSAPP (24/09/2026, pedido
     do dono, opcao B da previa): o fundo bege com desenho em traco fino
     e os baloes do aplicativo — o nosso verde-claro, o do cliente
     branco. So nas conversas do WhatsApp: Instagram e e-mail seguem com
     os tons da casa. O DESENHO E NOSSO (aviao, mala, sol, bussola,
     passaporte), no espirito do papel de parede deles, e nao a arte
     deles; ele e token porque a tinta do traco troca com o tema. */
  --wa-fundo: #EFEAE2;
  --wa-desenho: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2354483A%22%20stroke-opacity%3D%22.085%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(18%2022)%20rotate(-12)%20scale(1)%22%3E%3Cpath%20d%3D%22M0%208%20L22%200%20L18%204%20L26%2010%20L18%2010%20L12%2018%20L10%2018%20L12%2010%20L4%2011%20L2%2014%20L0%2014%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(120%2016)%20rotate(8)%20scale(1)%22%3E%3Cpath%20d%3D%22M2%206h20v14H2zM8%206V2h8v4M2%2012h20%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(205%2030)%20rotate(0)%20scale(1)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%201%200%2012a6%206%200%201%201%200-12M10%200v2M10%2018v2M0%2010h2M18%2010h2M3%203l1.5%201.5M15.5%2015.5L17%2017M3%2017l1.5-1.5M15.5%204.5L17%203%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(70%2070)%20rotate(0)%20scale(1.1)%22%3E%3Cpath%20d%3D%22M0%206c4-6%208%206%2012%200s8%206%2012%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(170%2092)%20rotate(0)%20scale(1.05)%22%3E%3Cpath%20d%3D%22M10%200a10%2010%200%201%201%200%2020a10%2010%200%201%201%200-20M13%207l-2%205-4%201%202-5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(30%20110)%20rotate(-10)%20scale(1)%22%3E%3Cpath%20d%3D%22M2%200h14v20H2zM9%206a3%203%200%201%201%200%206a3%203%200%201%201%200-6M6%2015h6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(110%20128)%20rotate(6)%20scale(1)%22%3E%3Cpath%20d%3D%22M2%202h18v12H9l-5%204v-4H2z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(222%20150)%20rotate(10)%20scale(1)%22%3E%3Cpath%20d%3D%22M8%200a7%207%200%200%201%207%207c0%205-7%2012-7%2012S1%2012%201%207a7%207%200%200%201%207-7M8%205a2%202%200%201%201%200%204a2%202%200%201%201%200-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%20196)%20rotate(20)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M0%208%20L22%200%20L18%204%20L26%2010%20L18%2010%20L12%2018%20L10%2018%20L12%2010%20L4%2011%20L2%2014%20L0%2014%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20188)%20rotate(0)%20scale(1)%22%3E%3Cpath%20d%3D%22M0%206c4-6%208%206%2012%200s8%206%2012%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(72%20214)%20rotate(-8)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M2%206h20v14H2zM8%206V2h8v4M2%2012h20%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(214%20222)%20rotate(0)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%201%200%2012a6%206%200%201%201%200-12M10%200v2M10%2018v2M0%2010h2M18%2010h2M3%203l1.5%201.5M15.5%2015.5L17%2017M3%2017l1.5-1.5M15.5%204.5L17%203%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wa-entrada: #FFFFFF;
  --wa-saida: #D9FDD3;
  /* O QR DA CONEXAO (26/09/2026, conexoes-a-prova): placa branca e modulo
     preto NOS DOIS TEMAS — o leitor de QR precisa de zona clara em volta
     do codigo, e a placa escura do tema escuro encolhia essa zona. Mesmos
     valores no claro, de proposito. */
  --qr-claro: #FFFFFF;
  --qr-escuro: #000000;
  /* AS AMOSTRAS DO LOGO (27/09/2026, parte 5): o PAPEL BRANCO e a TELA
     ESCURA do mundo la fora, onde o logo vai aparecer — os mesmos valores
     nos dois temas do painel, de proposito, como a placa do QR. */
  --logo-amostra-claro: #FFFFFF;
  --logo-amostra-claro-texto: #5C5953;
  --logo-amostra-escuro: #1F1E1C;
  --logo-amostra-escuro-texto: #D8D4CC;
  --qr-trilho: rgba(0, 0, 0, .15);
  --wa-texto: #111B21;
  /* A hora e o nome no balao: o cinza do aplicativo (#667781) dava 4,19:1
     sobre o verde; um degrau mais escuro passa 4,5 nos dois baloes. */
  --wa-apoio: #54626B;
  --sombra-balao-whatsapp: 0 1px .5px rgba(11, 20, 26, .13);
  /* ---- ELEVACAO ----
     Ate 05/09/2026 nao havia token de sombra nenhum, e as vinte
     box-shadow da tela estavam escritas a mao em QUATRO tintas
     diferentes: rgba(16,27,29), rgba(23,24,27), rgba(30,28,26) e preto
     puro. Tres delas sao frias, e a casa e quente — o cinza do
     --text-primary e (31,30,28). Uma tinta so, a da casa.

     O nome obvio para isto seria o da ponte que morreu em 03/09, e ele e
     PROIBIDO — test_tokens.js reprova a volta dele. (E reprovou: esta
     frase citava o nome com dois-pontos na primeira versao, e a trava
     acusou a ponte renascendo. Arquivo que procura um prefixo nao pode
     conter o prefixo — regra da casa, cobrada de novo no autor dela.)

     1 = o cartao que apenas descola do papel (a borda de 1px continua
         sendo quem separa; a sombra e o sopro)
     2 = o que flutua por cima do conteudo — menu suspenso, popover
     3 = o que tem veu atras — janela modal, gaveta */
  /* SEM SOMBRA NENHUMA (12/09/2026): placa nao flutua. O que separa e a
     borda de 1px e o cabecalho preto; o que flutua (menu suspenso,
     modal) ganha borda preta de 1,5px na propria regra. Os tres tokens
     continuam existindo porque 20 regras os leem — o valor e `none`.
     A DIRECAO MUDOU EM 23/09/2026: a elevacao volta em tres niveis
     (DESIGN.md, "Mudança de direção"). `none` ate a fatia da pele. */
  --elevacao-1: none;
  --elevacao-2: none;
  --elevacao-3: none;

  /* ---- A SOMBRA POR PAPEL (23/09/2026) ----
     A escala acima diz ALTURA; os tokens abaixo dizem PAPEL, e sao
     eles que a tela le. Nenhuma regra fora deste arquivo escreve
     box-shadow a mao (testes/test_tokens.js, "a trava do canto e da
     sombra"): a pele nova troca a sombra da casa inteira aqui.

     sombra-cartao  a placa que descola do chao (nivel 1)
     sombra-flutua  menu suspenso, popover, painel de atalhos (nivel 2)
     sombra-janela  o que tem veu atras: dialog, gaveta (nivel 3)
     anel-foco      o halo do campo focado; -erro no campo recusado
     fio-*          o fio que marca o ATIVO (item atual, escolhido,
                    celula marcada). So a GEOMETRIA mora aqui: a cor
                    vem na regra, porque e ela que diz o que o fio
                    marca — `box-shadow: var(--fio-ativo) var(--accent-fill)`.

     As tres sombras sao `none` no claro enquanto a escala for `none`;
     entao valem a MESMA armadilha da escala: `var(--sombra-cartao), <outra>`
     e `none, <outra>` no claro, que e CSS invalido e apaga a regra. */
  --sombra-cartao: var(--elevacao-1);
  --sombra-flutua: var(--elevacao-2);
  --sombra-janela: var(--elevacao-3);
  --anel-foco: 0 0 0 3px var(--accent-bg);
  --anel-foco-erro: 0 0 0 3px var(--danger-bg);
  --fio-ativo: inset 3px 0 0;
  /* O fio largo e o do totem e da conversa aberta (5px, a lingua da
     placa preta); o de topo e o da barra inferior do celular. */
  --fio-ativo-largo: inset 5px 0 0;
  --fio-ativo-topo: inset 0 4px 0;
  --fio-contorno: inset 0 0 0 1px;

  /* ---- A SOMBRA DO MUNDO, E O CONTORNO QUE A SUBSTITUI (23/09/2026) ----
     A camada do mundo (fim do <style> de agenda.html) desligava a
     sombra das placas e do que flutua NOS DOIS TEMAS, e desenhava no
     lugar um contorno preto de 1,5px. As tres sombras de papel acima
     nao alcancam essas regras: elas escreviam `none` por cima.

     Os cinco abaixo sao o que a pele troca ali. Na Ardosia, como no
     saguao antes dela, nao ha sombra NENHUMA no claro, e o que flutua se
     fecha com fio. O fio era a tinta da placa preta; desde a Ardosia
     ele e a borda forte — a cor do menu nao sai do menu. A largura de
     1,5px ficou: a caixa do que flutua nao mudou de tamanho. Numa pele com
     elevacao a sombra acende e o contorno vira fio: as duas juntas sao
     redundancia (DESIGN.md, "A escala de elevacao").

     sombra-placa         a placa branca que mora no chao (nivel 1)
     sombra-placa-flutua  menu da conta, painel da busca, atalhos, aviso,
                          a barra da selecao (nivel 2)
     sombra-placa-janela  o `dialog` e a gaveta da tarefa (nivel 3)
     contorno-flutua      a borda do que flutua
     contorno-janela      a borda da janela e da gaveta */
  --sombra-placa: none;
  --sombra-placa-flutua: none;
  --sombra-placa-janela: none;
  --contorno-flutua: 1.5px solid var(--border-strong);
  --contorno-janela: 1px solid var(--border-strong);
  /* contorno-hover  a borda que acende no hover do cartao clicavel:
                     sem sombra, e ela que diz que o cartao subiu */
  --contorno-hover: color-mix(in srgb, var(--accent-fill) 35%, transparent);

  /* ---- dimensão e ritmo ----
     RAIO DE 3PX EM TUDO (12/09/2026): placa tem canto quase vivo.
     A DIRECAO MUDOU EM 23/09/2026 (DESIGN.md, "Mudança de direção"):
     a escala e 6 · 8 · 12 · 16, e ela VALE desde o fim de 23/09/2026
     (pedido do dono: a etapa dos tokens nao podia deixar o sistema mais
     quadrado, que e o contrario da direcao). A sombra continua desligada
     no claro — acender e trabalho da pele.

     O CANTO E POR PAPEL (23/09/2026). Cada canto da tela le um destes,
     escolhido pelo que o elemento E, nunca pelo numero que ele tinha:

       --radius-selo     selo de estado, marca de etapa, chip que nao e pilula
       --radius-control  botao, campo, item de menu, avatar de iniciais quadrado
                         (--radius-bt e o mesmo papel, com o nome antigo)
       --radius-card     placa branca, cartao, tabela, menu suspenso
       --radius-janela   dialog, gaveta, painel flutuante grande
       --radius-balao    a fala da conversa (e o bico)
       --radius-pill     o que e circulo ou pilula: avatar, ponto, trilho, contador
                         (o do sino, o de nao lidas) e o que ja era pilula em
                         23/09 — PILULA CONTINUA PILULA, decisao do dono

     Nenhuma regra fora deste arquivo escreve canto a mao — nem o
     JavaScript no estilo (testes/test_tokens.js, "a trava do canto e da
     sombra"). As duas excecoes declaradas la sao o celular de
     demonstracao e as marcas dos canais. Raio de DENTRO pode derivar do
     de fora: `calc(var(--radius-balao) - 6px)`. */
  --radius-selo: 6px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-janela: 16px;
  --radius-pill: 999px;
  /* ---- O BALAO DA CONVERSA (12/09/2026, decisao do fundador) ----
     "As mensagens devem seguir o padrao do whatsapp com baloes e bordas
     arredondadas." E a UNICA peca do sistema que foge do raio 3, e a
     razao e que ela nao e uma placa: e a fala de uma pessoa, e o mundo
     inteiro ja aprendeu a forma dela em outro aplicativo. Placa de
     aeroporto nao tem canto redondo; balao de conversa tem, e quem abre
     a caixa de entrada esta lendo conversa, nao lendo sinalizacao.
     O canto do lado de quem falou fica quase reto — e o bico, sem
     desenhar bico. */
  --radius-balao: 16px;
  --radius-balao-bico: 4px;
  /* --radius-bt E O RAIO DE BOTAO, CAMPO E ITEM DE MENU. Nasceu em
     06/09/2026 valendo 6px (um passo mais fechado que os 8 do
     --radius-control), de 12/09/2026 a 23/09/2026 os dois valeram 3, e
     desde 23/09 os dois valem 8 — o numero esta na linha abaixo, e ele
     e o que vale. (Ate 23/09 este
     comentario ainda dizia 6 e 8, e quem editasse por ele erraria.)

     A etiqueta de status aponta para o --radius-control, e NAO para o
     --radius-pill: o --radius-pill (999) e o circulo — avatar, trilho
     de progresso, bolinha de erro — e trocar o token transformaria toda
     foto de pessoa num quadrado arredondado. */
  --radius-bt: 8px;
  /* O DEGRAU DE 6 entrou em 06/09/2026 com a escala da secao 2
     (4, 6, 8, 12, 16, 20, 24). Ele nao cabia na numeracao posicional —
     --space-2 ja e o 8 e ha mais de 300 usos dos nomes atuais — entao
     entra como MEIO DEGRAU nomeado, e nao renumerando a escala.
     Os degraus de 32, 40 e 48 continuam: a secao 2 fala do espaco
     DENTRO de componente, e esses tres sao estrutura de pagina (o 48 e
     a goteira entre a navegacao e o conteudo). */
  --space-1h: 6px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  /* O degrau de 48 entrou em 05/09/2026 com a REGRA DE LAYOUT: e a
     goteira entre a coluna de navegacao e o conteudo. Ele nao existia
     e a /design usava 24, que deixava o texto colado no menu — e
     depois `margin: 0 auto` empurrava tudo para o meio, abrindo um
     corredor vazio dos dois lados. */
  --space-9: 48px;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- tipografia ----
     Escala fechada: 12, 13, 14, 16, 18, 22, 26. Pesos 400 e 500 (o 600
     entrou em 12/09 — ver "O PESO E POR PAPEL", abaixo).
     Geist e a "equivalente geometrica" do briefing, ja auto-hospedada —
     fonte de CDN nesta tela e proibida pela regra da casa (a fonte
     trocando sozinha no meio de uma conversa com a cliente). */
  /* A FACE E A DA SINALIZACAO (12/09/2026): a sans humanista do sistema
     — Segoe UI no Windows, San Francisco no Apple, Roboto no Android —
     e a familia da Frutiger das placas de terminal. Geist saiu: era a
     face de todo produto gerado, e o detector a apontava como tal. */
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* O DEGRAU MICRO (03/09), aberto de propósito e uma vez só: o
     briefing das cotações pede 11px para o rótulo de etapa, a legenda
     da coluna e as iniciais do vendedor — texto que se identifica, e
     não que se lê. A tela tinha chegado com 11px E 10px escritos à mão;
     dois números soltos é como a escala de 25 tamanhos começou. Um
     degrau nomeado fecha a porta que dois literais deixavam aberta. */
  --fs-11: 11px;
  --fs-12: 12px; --fs-13: 13px; --fs-16: 16px;
  /* O TITULO DE PAGINA DA SECAO 2 (06/09/2026). Ela pede 17px/500 para
     ele, e 17 nao existia na escala. Entrou como token, e nao como
     numero solto, pela mesma razao do --fs-11: e assim que a escala de
     25 tamanhos comecou das duas vezes. */
  --fs-17: 17px;
  --fs-18: 18px;
  /* O NUMERO DA PLACA SUSPENSA E O CUMPRIMENTO DA CAPA (12/09/2026):
     24/600. E o degrau que o fundador pediu ao ver o mockup — "a
     receber e vencidas estao exagerados" — no lugar dos 56px do primeiro
     desenho. Entra como token pela mesma razao dos outros degraus. */
  --fs-24: 24px;
  /* O DEGRAU DE 40px SAIU EM 18/09/2026 (§26): ele tinha dono unico, a frase de
     capa do painel da marca no login, e o painel saiu com o cartao novo.
     Degrau sem dono na escala e convite para "titulo grande" de uso geral
     — que e como a escala de 25 tamanhos comecou. */
  /* ============================================================
     A ESCALA E A DA SECAO 2 DAS REGRAS VISUAIS (07/09/2026)
     ============================================================
     Cinco degraus de texto, um por PAPEL — e o papel e que decide o
     degrau, nunca o contrario:

       --fs-17 / 500   titulo de pagina
       --fs-13 / 500   titulo de cartao · nome · item primario de lista
       --fs-13 / 400   corpo, celula de tabela
       --fs-12 / 400   corpo denso, celula de tabela apertada
       --fs-11 / 400   apoio, metadado, rotulo de indicador
       --fs-18 / 500   numero em destaque (indicador)

     O PAR 13/11 E A REGRA QUE MAIS PESA: item primario de lista e a
     linha de apoio dele sao 13 e 11. Nunca 12 e 11 — um ponto de
     diferenca le como erro de renderizacao, e nao como hierarquia.
     Era essa a reclamacao original ("nomes falhados, letras de
     tamanho diferente"), e ela sobreviveu a duas reformas de cor
     porque cor nao resolve hierarquia de texto.

     SUMIRAM em 07/09: --fs-14, --fs-22, --fs-26 e --fs-display (34).
     Eram a escala anterior, de 05/09, e nao ha traducao possivel entre
     as duas — 14 e 22 nao aparecem na tabela da secao 2. Quatorze virou
     13 (corpo), 22 virou 17 (titulo de pagina) ou 18 (indicador), e 26
     e 34 viraram 18. Apagar os tokens e deliberado: enquanto eles
     existirem, alguem os usa "so nesta tela", e a escala de nove volta
     por acumulo. "test_tokens.js" guarda os dois lados — o token que
     sumiu e a referencia que nao pode sobrar.

     A UNICA EXCECAO E O 16, e ela e do iOS: campo de formulario abaixo
     de 16px faz o telefone dar zoom sozinho ao focar. Por isso o 16
     aparece em campo, e so em campo ("test_zoom_ios.js"). */
  /* A MONOESPACADA, so para rotulo de secao e dado tabular (briefing
     das cotacoes). Pilha do sistema: nao ha fonte mono auto-hospedada,
     e baixar uma de CDN e proibido nesta tela. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  /* ============================================================
     O PESO E POR PAPEL (23/09/2026)
     ============================================================
     Eram 392 pesos escritos a mao so em agenda.html — o 600 sozinho
     201 vezes, sem token. Tres degraus, e nenhum quarto:

       --peso-normal  400   corpo, celula, apoio, rotulo de segmento
       --peso-medio   500   as regras de antes do mundo da sinalizacao
       --peso-forte   600   cabecalho de placa, nome, botao, selo, numero

     O 600 E O QUE SE VE NO WINDOWS: a Segoe UI nao tem 500, e o
     navegador cai no 400 — por isso o mundo da sinalizacao escreve 600
     (12/09/2026). O --peso-medio segue existindo porque 224 regras o
     leem hoje; juntar os dois e decisao da pele, e aqui ela e um valor
     so. Nunca 700: a hierarquia vem de tamanho, caixa e cor. */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  /* ============================================================
     A ENTRELINHA E POR PAPEL (23/09/2026)
     ============================================================
     Eram vinte valores escritos a mao (1, 1.05, 1.1, 1.15, 1.2, 1.25,
     1.3, 1.35, 1.4, 1.45, 1.5, 1.55, 1.6, 14px, 15px, 16px, 17px,
     18px, 20px, 30px) e nenhum token. Sao sete papeis:

       --lh-corpo   1.5   texto corrido: paragrafo, ajuda, estado vazio,
                          nota, campo de texto longo
       --lh-tabela  1.35  tabela e texto denso: celula, item de lista,
                          nome, linha de apoio, chip, balao da conversa,
                          titulo de cartao de 13
       --lh-titulo  1.25  titulo que pode quebrar (17 a 24px)
       --lh-numero  1.1   numero em destaque, uma linha (18 a 24px)
       --lh-glifo   1     o glifo que centra numa caixa: o x, a seta, o
                          icone, o numero dentro da pilula
       --lh-rotulo  14px  rotulo compacto de 11px, CRAVADO: legenda de
                          coluna, rotulo do indicador (teto de 2 linhas)
       --lh-selo    18px  a linha cravada de 12 e 13px: selo, cabecalho
                          de coluna do quadro

     OS DOIS EM PX SAO GEOMETRIA, nao gosto. A linha do cabecalho do
     quadro entra numa soma que a suite afirma (respiro + linha +
     respiro = 42px da placa), e o rotulo do indicador reserva duas
     linhas de 14 no subgrid. Unitario ali faria a altura depender da
     fonte de cada maquina. Mudar um deles e mudar a caixa — a suite
     que soma aponta onde.

     O QUE FICOU DE FORA, com motivo, em testes/test_tokens.js ("a
     trava do peso e da entrelinha"): o celular de demonstracao, que
     desenha o WhatsApp; e as caixas de altura fixa em que a entrelinha
     E a altura de dentro da caixa (o circulo do dia de hoje, 30 em 30). */
  --lh-corpo: 1.5;
  --lh-tabela: 1.35;
  --lh-titulo: 1.25;
  --lh-numero: 1.1;
  --lh-glifo: 1;
  --lh-rotulo: 14px;
  --lh-selo: 18px;

  /* O RESPIRO ENTRE BLOCOS DE PAINEL (07/09/2026 — checklist 8).
     Ele morava dentro de '.painel', e por isso so existia la. Medido na
     bancada: em Financeiro os cinco cartoes se ENCOSTAVAM, borda com
     borda, e as duas grades de dentro ('.kpis' e '.par-dash') tinham
     'gap: normal' — porque 'gap: var(--gap)' com a variavel indefinida
     nao e um erro que apareca, e uma declaracao invalida que o
     navegador descarta em silencio.

     E a mesma familia do gap no pai errado de 06/09: o valor existe, o
     lugar de onde ele e lido nao. Aqui ele sobe para a raiz, que e o
     unico lugar de onde toda tela enxerga. */
  --gap: 18px;
}

html[data-tema="escuro"] {
  /* A ARDOSIA ESCURA: "MENU EM RELEVO". O menu e MAIS CLARO que o
     conteudo — o contrario do claro, e de proposito: no escuro o menu
     nao precisa de aresta para se separar do chao, ele sobe sozinho. */
  --marca-whatsapp: #25D366;
  --marca-email: #60A5FA;
  --surface-page: #14171B;
  --surface-card: #1C2127;
  /* O afundado nao estava no desenho, e o lugar natural dele (um degrau
     acima do cabecalho, #252B33) cai a 1,7 de distancia perceptual do
     menu — a mesma cor, para o olho. Ele ficou em #22282E: 2,6 do menu,
     2,2 do cartao (test_ardosia.js mede). */
  --surface-sunken: #22282E;
  --surface-topo: #181C21;
  --surface-cab: #20262D;
  --text-primary: #E6EAEE;
  --text-secondary: #97A2AD;
  --text-muted: #8B96A1;
  --text-cab: #9DBBD6;
  --border: #2A3139;
  --border-strong: #36404A;
  --border-campo: #707B87;
  --border-cab: #2A3139;
  --divisoria: #242A31;
  /* No escuro a sombra nao pode ser a tinta da casa: cinza sobre
     carvao nao escurece nada. Preto puro, mais opaco. */
  --elevacao-1: 0 1px 2px rgba(0, 0, 0, .30);
  --elevacao-2: 0 2px 4px rgba(0, 0, 0, .24), 0 10px 24px -8px rgba(0, 0, 0, .50);
  --elevacao-3: 0 24px 64px rgba(0, 0, 0, .62);
  --accent-fill: #b87aa0;
  --accent-fill-hover: #c68caf;
  --accent-bg: #3a2833;
  --accent-text: #e6c3d6;
  --on-accent: #1c1a1b;
  /* Mesma regra do claro, espelhada: o perigo do desenho (L* 69) fica
     embaixo, e ok e atencao sobem para acima de 77. */
  --danger-fill: #F08A96;
  --danger-bg: #3A1D22;
  --danger-borda: #5E2D35;
  --danger-text: #F08A96;
  --warn-fill: #E9B85C;
  --warn-bg: #352A12;
  --warn-text: #E9B85C;
  --ok-fill: #93D5B7;
  --ok-bg: #16302A;
  --ok-text: #93D5B7;
  --on-danger: #2A0C10;
  /* A MARCA DA MALAGA no escuro (medida em 07/09/2026): o navy desce
     um degrau e o texto e branco — 5,24:1. */
  --malaga: #b87aa0;
  --on-malaga: #1c1a1b;
  --cat-azul: #7FA8CC;
  --cat-azul-bg: #1B2733;
  --cat-roxo: #9296D8;
  --cat-roxo-bg: #1E2036;
  --cat-entra: #E6EAEE;
  --cat-sai: #858E97;
  --cat-amarelo: #D9B65E;
  --cat-amarelo-bg: #2C2614;
  --cat-rosa: #E08AAE;
  --cat-ciano: #6CC0C6;
  --cat-laranja: #EC9A63;
  --canal-whatsapp: #4ADE80;
  --canal-instagram: #F472B6;
  --canal-email: #F87171;
  --canal-tiktok: #5EEAD4;
  /* A conversa do WhatsApp no escuro, como o aplicativo: chao quase
     preto, o nosso balao verde-petroleo e o do cliente grafite. */
  --wa-fundo: #0B141A;
  --wa-desenho: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E9EDEF%22%20stroke-opacity%3D%22.045%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(18%2022)%20rotate(-12)%20scale(1)%22%3E%3Cpath%20d%3D%22M0%208%20L22%200%20L18%204%20L26%2010%20L18%2010%20L12%2018%20L10%2018%20L12%2010%20L4%2011%20L2%2014%20L0%2014%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(120%2016)%20rotate(8)%20scale(1)%22%3E%3Cpath%20d%3D%22M2%206h20v14H2zM8%206V2h8v4M2%2012h20%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(205%2030)%20rotate(0)%20scale(1)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%201%200%2012a6%206%200%201%201%200-12M10%200v2M10%2018v2M0%2010h2M18%2010h2M3%203l1.5%201.5M15.5%2015.5L17%2017M3%2017l1.5-1.5M15.5%204.5L17%203%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(70%2070)%20rotate(0)%20scale(1.1)%22%3E%3Cpath%20d%3D%22M0%206c4-6%208%206%2012%200s8%206%2012%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(170%2092)%20rotate(0)%20scale(1.05)%22%3E%3Cpath%20d%3D%22M10%200a10%2010%200%201%201%200%2020a10%2010%200%201%201%200-20M13%207l-2%205-4%201%202-5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(30%20110)%20rotate(-10)%20scale(1)%22%3E%3Cpath%20d%3D%22M2%200h14v20H2zM9%206a3%203%200%201%201%200%206a3%203%200%201%201%200-6M6%2015h6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(110%20128)%20rotate(6)%20scale(1)%22%3E%3Cpath%20d%3D%22M2%202h18v12H9l-5%204v-4H2z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(222%20150)%20rotate(10)%20scale(1)%22%3E%3Cpath%20d%3D%22M8%200a7%207%200%200%201%207%207c0%205-7%2012-7%2012S1%2012%201%207a7%207%200%200%201%207-7M8%205a2%202%200%201%201%200%204a2%202%200%201%201%200-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%20196)%20rotate(20)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M0%208%20L22%200%20L18%204%20L26%2010%20L18%2010%20L12%2018%20L10%2018%20L12%2010%20L4%2011%20L2%2014%20L0%2014%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20188)%20rotate(0)%20scale(1)%22%3E%3Cpath%20d%3D%22M0%206c4-6%208%206%2012%200s8%206%2012%200%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(72%20214)%20rotate(-8)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M2%206h20v14H2zM8%206V2h8v4M2%2012h20%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(214%20222)%20rotate(0)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%201%200%2012a6%206%200%201%201%200-12M10%200v2M10%2018v2M0%2010h2M18%2010h2M3%203l1.5%201.5M15.5%2015.5L17%2017M3%2017l1.5-1.5M15.5%204.5L17%203%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --wa-entrada: #202C33;
  --wa-saida: #005C4B;
  /* O QR DA CONEXAO (26/09/2026, conexoes-a-prova): placa branca e modulo
     preto NOS DOIS TEMAS — o leitor de QR precisa de zona clara em volta
     do codigo, e a placa escura do tema escuro encolhia essa zona. Mesmos
     valores no escuro, de proposito. */
  --qr-claro: #FFFFFF;
  --qr-escuro: #000000;
  /* AS AMOSTRAS DO LOGO (27/09/2026, parte 5): o PAPEL BRANCO e a TELA
     ESCURA do mundo la fora, onde o logo vai aparecer — os mesmos valores
     nos dois temas do painel, de proposito, como a placa do QR. */
  --logo-amostra-claro: #FFFFFF;
  --logo-amostra-claro-texto: #5C5953;
  --logo-amostra-escuro: #1F1E1C;
  --logo-amostra-escuro-texto: #D8D4CC;
  --qr-trilho: rgba(0, 0, 0, .15);
  --wa-texto: #E9EDEF;
  /* O cinza do aplicativo dava 2,61:1 sobre o balao verde-petroleo
     (medido a mao: a trava de contraste mede contra as superficies da
     casa, e nao contra o balao). Este passa 4,93. */
  --wa-apoio: #C3CDD2;
  --sombra-balao-whatsapp: 0 1px .5px rgba(0, 0, 0, .35);
  /* O MENU NO ESCURO: mais claro que o chao (#2A3037 sobre #14171B),
     o ativo mais um degrau, e a mesma barra verde-agua. O secundario
     do desenho (#9AA5B0) dava 4,38:1 sobre o ativo; clareou para 4,5. */
  --sinal-placa: #2A3037;
  --sinal-placa-texto: #E6EAEE;
  --sinal-placa-texto-fraco: #9DA8B3;
  --sinal-placa-fio: rgba(255, 255, 255, .10);
  --sinal-placa-hover: #363D46;
  --sinal-placa-borda: #2A3037;
  --sinal-na-placa: #5CB8AC;
  --alerta-na-placa: #F0B6B9;
  --sinal-bg: var(--warn-bg);
  --sinal-text: var(--warn-text);
}

/* ============================================================
   AS DIMENSOES DA CASCA — nao sao ponte: sao tokens que o briefing
   nao previu e o produto precisa. Ficam aqui pelo mesmo motivo dos
   outros: nenhum valor cru dentro de componente.
   ============================================================ */
:root {
  --lado: 240px;
  --lado-recolhido: 64px;
  --topbar-alt: 56px;
  /* Alvo de toque minimo (briefing, secao de responsividade). */
  --alt: 44px;
}

/* ============================================================
   AS PELES (23/09/2026) — O MECANISMO FICA, A ESCOLHA SAIU
   ============================================================
   A rodada de peles (Saguao, Malaga, Vidro) saiu de Configuracoes
   quando a Ardosia virou a pele da casa (pele-ardosia): a Ardosia e o
   :root e o bloco escuro la em cima, e nao tem bloco proprio.

   O CAMINHO PARA A PELE PROPRIA DE UMA AGENCIA continua preparado:
   uma pele entra por atributo na raiz (html[data-pele="…"]), com a
   lista em nucleo/peles.js (`soDe` para a pele de uma agencia so), a
   escolha em clientes.pele, e a mesma rota do dono. A forma dos
   blocos, que e a cascata que decide:
     html[data-pele="x"]                            vale nos dois temas (fonte, sombra do mundo)
     html[data-pele="x"]:not([data-tema="escuro"])  o claro da pele
     html[data-pele="x"][data-tema="escuro"]        o escuro da pele
   O claro leva o `:not` de proposito: sem ele, o claro da pele tem a
   mesma especificidade do escuro da casa e vem DEPOIS dele no arquivo.

   O QUE NENHUMA PELE TOCA (testes/test_peles.js recusa): o menu
   (--sinal-placa-*, --alerta-na-placa*, --sinal*), canto e espacamento,
   as marcas de terceiros e a da Malaga. E a regra da Ardosia vale para
   ela tambem: nenhuma superficie de fora do menu na cor do menu
   (testes/test_ardosia.js mede toda pele que existir no arquivo).
   ============================================================ */