/* ============================================================
   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 {
  /* ---- superfícies ---- */
  --surface-page: #FAF9F6;
  --surface-card: #FFFFFF;
  --surface-sunken: #F1EFEA;

  /* ---- texto ---- */
  --text-primary: #1F1E1C;
  --text-secondary: #6B6A66;
  --text-muted: #94928C;

  /* ---- bordas ---- */
  --border: #E8E6E0;
  --border-strong: #D6D3CB;

  /* ---- papéis semânticos: fill / bg (tinta clara) / text ----
     Vermelho, âmbar e verde são FIXOS (cor com significado).
     O acento é o único customizável por agência: a marca dela entra
     sobrescrevendo --accent-* na raiz, em tempo de execução. */
  --accent-fill: #125C63;
  --accent-bg: #E3EFF0;
  --accent-text: #0E4A50;
  --danger-fill: #B3382F;
  --danger-bg: #FBEDEB;
  --danger-text: #93291F;
  --warn-fill: #A66A08;
  --warn-bg: #FBF1DF;
  --warn-text: #855206;
  --ok-fill: #2E6B4F;
  --ok-bg: #E9F2EC;
  --ok-text: #235340;
  --on-accent: #FFFFFF;
  --on-danger: #FFFFFF;

  /* ---- 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. */
  --malaga: #133046;
  --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;

  /* ---- a PLACA de embarques ----
     O único bloco escuro do sistema, e escuro nos DOIS temas: é uma
     placa de saguão, e placa de saguão não tem modo claro. Por isso
     estes tokens não aparecem no bloco do escuro lá embaixo — eles
     não trocam, e isso é a decisão, não um esquecimento. */
  --placa-fundo: #141412;
  --placa-cel: #211F1C;
  --placa-cel-hover: #2A2724;
  --placa-tinta: #F0A830;
  --placa-tinta-forte: #FFFFFF;
  --placa-fraca: #7C776D;
  --placa-fio: rgba(255, 255, 255, .09);
  --placa-borda-bt: rgba(255, 255, 255, .24);
  --placa-bt-hover: rgba(255, 255, 255, .07);
  --placa-vinco: rgba(0, 0, 0, .55);
  --placa-ruim-fundo: rgba(179, 56, 47, .16);
  --placa-ruim-borda: rgba(179, 56, 47, .5);
  --placa-ruim-tinta: #F2A79D;
  --placa-atencao-fundo: rgba(120, 72, 4, .35);
  --placa-atencao-borda: rgba(240, 168, 48, .45);
  --placa-atencao-tinta: #F5C173;
  --placa-bom-fundo: rgba(46, 107, 79, .18);
  --placa-bom-borda: rgba(46, 107, 79, .55);
  --placa-bom-tinta: #95D2AF;

  /* ---- 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. */
  --cat-azul: #4A7FA5;
  --cat-azul-bg: #EEF2F7;
  --cat-roxo: #6165B8;
  --cat-roxo-bg: #EEF0F9;
  --cat-amarelo: #A98110;
  --cat-amarelo-bg: #FBF6E6;

  /* ---- dimensão e ritmo ---- */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --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.
     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). */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-22: 22px; --fs-26: 26px;
  /* Um degrau acima da escala de LEITURA, para o número que a dona lê
     de longe (o "4 tarefas para hoje" do topo). Não é texto: é o dado
     que ela abre o sistema para ver. Era 46px e virava campo gigante —
     34 é o tamanho em que ele lidera sem dominar. */
  --fs-display: 34px;
  /* 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;
  --peso-normal: 400;
  --peso-medio: 500;
}

html[data-tema="escuro"] {
  /* No escuro os dois clareiam: o verde e o azul de papel somem
     contra fundo carvao. */
  --marca-whatsapp: #25D366;
  --marca-email: #60A5FA;
  --surface-page: #141412;
  --surface-card: #1C1B19;
  --surface-sunken: #232220;
  --text-primary: #F2F1ED;
  --text-secondary: #A3A19B;
  --text-muted: #77756F;
  --border: #302E2B;
  --border-strong: #3E3C38;
  --accent-fill: #4FA3AB;
  --accent-bg: #14343A;
  --accent-text: #9ED2D8;
  --danger-fill: #D06055;
  --danger-bg: #3A1F1C;
  --danger-text: #E8A49D;
  --warn-fill: #C98F2E;
  --warn-bg: #362A14;
  --warn-text: #E4BE7E;
  --ok-fill: #5B9B7C;
  --ok-bg: #1D3328;
  --ok-text: #A9CDBA;
  --on-accent: #10282B;
  --on-danger: #2B100D;
  --malaga: #4A7BA6;
  --on-malaga: #0B1620;
  --cat-azul: #7FA8CC;
  --cat-azul-bg: #1B2733;
  --cat-roxo: #9296D8;
  --cat-roxo-bg: #1E2036;
  --cat-amarelo: #D9B65E;
  --cat-amarelo-bg: #2C2614;
}

/* ============================================================
   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;
}