/* app/css/tokens.css — O DESIGN SYSTEM DO PAINEL NF (§6.0 da spec, D26, D-P12).

   §6.0, palavra por palavra, e este arquivo existe para cumprir as tres linhas abaixo:
     "Todo valor visual vem de token: cor, espacamento, raio, sombra, peso e tamanho de fonte."
     "Proibido CSS solto por tela. Nenhum `style=` inline com cor ou medida, nenhum valor cru.
      Se um componente precisa de algo que nao existe, o token nasce primeiro."
   Quem obriga isso a valer nao e a boa vontade de quem escreve a proxima tela: e
   `tests/design-system.test.mjs`, que REPROVA O BUILD se aparecer cor crua, medida crua ou
   `style=` com cor/medida em qualquer arquivo de `app/`. A §6.0 chama a inconsistencia de
   "causa n 1 da feiura", entao ela virou portao, nao recomendacao.

   ==== A COR DE ACAO, e a pendencia declarada na D-P12 =============================
   Existe UM token de acao: `--acao`. Botao primario, link, item ativo, foco, aba selecionada,
   coluna que recebe o cartao arrastado: todos leem esse token e mais nenhum. Trocar a cor de
   acao do painel inteiro e trocar UMA LINHA aqui.

   Hoje ele vale `#2B5CE6`, o azul do painel v1, porque foi o prototipo com esse azul que o dono
   aprovou olhando (D-P12: "PENDENTE DE DECISAO DO DONO: a cor de acao. O prototipo usa o azul do
   v1 (#2B5CE6); a §6.0 pede navy e chama esse azul de contrario a identidade. Enquanto ele nao
   decidir, vale o azul do prototipo aprovado, porque foi esse que ele aprovou olhando").
   No dia em que ele decidir pelo navy da §6.0, a mudanca e `--acao: #0D1B2A;` e nada mais: NAO
   ha um segundo lugar no repositorio com essa cor escrita.

   ==== A HIERARQUIA DE COR DESTE PAINEL, em uma regra ==============================
   Cor QUENTE nunca e enfeite. Ambar e vermelho existem para dizer uma coisa so: ha quanto tempo
   um lead esta parado (mais o erro do proprio sistema, que a marca ja reserva ao vermelho).
   Estrutura -- menu, cabecalho, cartao, borda, barra do funil -- e feita de tons frios: papel,
   nevoa e tinta. O azul de acao entra so onde ha ACAO, nunca como decoracao de fundo.

   A consequencia e o produto: se a tela tem cor quente, alguem esta esfriando. Se ela esta toda
   em tinta sobre branco com um azul aqui e ali, esta tudo em dia. Quem usa aprende isso em um
   dia sem ninguem explicar, e por isso a regra vale mais que a lista de hexadecimais abaixo.

     papel   --superficie   #FFFFFF  a mesa de trabalho: onde o dado vive
     nevoa   --fundo        #F4F6F9  a moldura: menu, fundo da pagina, o que nao e trabalho
     degrau  --superficie-2 #FAFBFD  o tom entre os dois (coluna do kanban, campo em repouso)
     tinta   --tinta        #0D1B2A  navy: texto, icone, estrutura
     acao    --acao         #2B5CE6  azul: botao, link, item ativo, foco
     bruma   --tinta-2      #6B7A8B  metadado, texto secundario
     espera  --atencao      #D97706  ambar: lead esfriando (nivel 2 da tarja)
     perda   --erro         #8C1515  vermelho da marca: lead frio (nivel 3), e erro

   Verde (--ok) NAO participa da escala de temperatura: fica reservado a fato binario positivo
   (WhatsApp conectado, follow-up em dia). Verde espalhado como "sucesso" generico e exatamente o
   enfeite que esta regra proibe. */
:root {
  /* ==== Cor: superficie ==== */
  --superficie: #FFFFFF;   /* papel: a mesa de trabalho */
  --superficie-2: #FAFBFD; /* o degrau entre papel e nevoa: coluna do kanban, campo em repouso */
  --fundo: #F4F6F9;        /* nevoa: a moldura */

  /* ==== Cor: tinta ==== */
  --azul-nf: #0D1B2A; /* navy, identidade base */
  --tinta: #0D1B2A;   /* navy: cor de texto principal */
  --tinta-2: #6B7A8B; /* texto secundario, metadado */
  --linha: #DFE5EC;   /* fio que separa dois planos */
  --linha-2: #D9DFE9; /* fio um pouco mais firme: borda de campo e de botao */

  /* ==== Cor: ACAO. UM token, e so ele. Ver o bloco no topo do arquivo. ==== */
  --acao: #2B5CE6;        /* azul do prototipo aprovado (D-P12) */
  --acao-tinta: #1E43A8;  /* o mesmo azul escurecido, para TEXTO sobre --acao-fundo */
  --acao-fundo: #EAF0FE;  /* o mesmo azul lavado, para SUPERFICIE de item ativo e de selo */

  /* O azul da LOGO e excecao deliberada da §6.0: "Ele e cor de MARCA e vive so na logo". Fica em
     token proprio, e nao apontando para --acao, justamente por causa do dia em que a cor de acao
     virar navy: a logo continua azul, e quem ler o CSS nao deve "corrigir" a logo para navy. */
  --azul-logo: #2B5CE6;

  /* Texto sobre um elemento pintado com --acao (botao primario, chip de acao, aba selecionada).
     Branco no tema claro: contraste 5.4:1 contra #2B5CE6, acima do minimo de 4.5 do WCAG AA.
     No tema escuro --acao clareia (ver o bloco de dark mode), entao este token vira navy la. */
  --texto-sobre-acao: #FFFFFF;

  /* ==== Cor: estado, cada um com o trio tinta / fundo / linha ====
     O trio existe porque estado aparece em tres formas na tela: TEXTO (o numero de atrasadas),
     SUPERFICIE (o selo atras dele) e FIO (a borda do selo). Sem os tres, cada tela inventava o
     seu proprio tom lavado da mesma cor, que e a inconsistencia que a §6.0 proibe. */
  --ok: #0E9F6E;
  --ok-fundo: #E6F5EE;
  --ok-linha: #C3E7D6;
  --atencao: #9A6614;      /* ambar escurecido o bastante para virar TEXTO sobre --atencao-fundo */
  --atencao-fundo: #FBF0DA;
  --atencao-linha: #F0DCA8;
  --erro: #8C1515;
  --erro-fundo: #FBE8E5;
  --erro-linha: #F2C9C3;

  /* O ambar puro da paleta da §6.0 (#D97706), usado onde ambar e MANCHA e nao texto: a tarja de
     espera nivel 2 e a barra de gargalo do funil. Como TEXTO ele nao alcanca 4.5:1 sobre branco,
     e por isso --atencao (acima) e a versao escurecida. */
  --atencao-mancha: #D97706;

  /* ==== ORIGEM: a UNICA familia de cor deste painel em que a cor significa CATEGORIA ====
     A doutrina de cor escrita no topo deste arquivo diz que cor quente mede tempo e verde e fato
     binario. O selo de origem e a excecao declarada, e ela vem da D-P12 ("do v1 vem (...) os
     SELOS DE ORIGEM COLORIDOS"): de qual anuncio veio o lead e a medicao que este produto existe
     para entregar, e no v1 o gestor ja varre a coluna por essa cor.

     A excecao e contida em duas travas, para nao estragar a escala de temperatura:
       1. estes tons NAO sao os de estado. Nem ambar, nem vermelho, nem o verde do --ok: o
          Google fica em um teal proprio, longe do verde de "conectado";
       2. "Direto" nao tem cor, e nao ganha selo nenhum (app/js/funil-logica.js/seloDeOrigem).
          Ele e a maioria dos cartoes, e selo em todo cartao para de destacar o que importa. */
  --origem-meta: #1E43A8;
  --origem-meta-fundo: #EAF0FE;
  --origem-google: #0E6E7A;
  --origem-google-fundo: #E2F3F5;
  --origem-organico: #6B3FA0;
  --origem-organico-fundo: #F1EBFB;

  /* Veu que escurece a pagina atras da ficha lateral e do menu em gaveta. */
  --veu: rgba(13, 27, 42, 0.4);

  /* ==== Espacamento ==== */
  --e-0: 2px; /* meio passo: respiro dentro de selo e de pilula, onde --e-1 ja empurra demais */
  --e-1: 4px;  --e-2: 8px;  --e-3: 16px;  --e-4: 24px;  --e-5: 40px;

  /* ==== Raio ==== */
  --r-1: 6px;  --r-2: 10px;
  --r-pilula: 999px; /* selo, chip, aba e contador: raio que acompanha a altura do elemento */

  /* Traco: espessura de borda/contorno. Um valor so, porque este produto usa so traco fino
     (a espessura maior do foco vem de duplicar --borda no outline, nao de um segundo token). */
  --borda: 1px;

  /* ==== Alvo de toque (§6.0, "Mobile de verdade") ====
     "Alvo de toque de 44 px". Todo elemento clicavel que exista no celular tem que alcancar esta
     altura la. E token, e nao numero escrito dentro da media query, porque sao mais de dez
     componentes e um deles sempre ficava para tras quando o valor vivia solto. */
  --alvo-toque: 44px;

  /* ==== Largura ==== */
  --largura-conteudo: 28rem;       /* cartao centralizado (entrada, formulario) */
  --largura-conteudo-larga: 72rem; /* tela de duas colunas (a caixa de entrada) */
  --menu-largura: 15rem;           /* a moldura: a barra lateral */

  /* ==== Sombra: navy translucido em vez de preto puro, para combinar com a paleta editorial ==== */
  --s-1: 0 1px 2px rgba(13, 27, 42, 0.08);
  --s-2: 0 4px 12px rgba(13, 27, 42, 0.12);
  --s-3: 0 12px 32px rgba(13, 27, 42, 0.16);

  /* ==== Peso de fonte, valores literais da §6.0 ==== */
  --peso-titulo: 800;      /* titulo */
  --peso-rotulo: 600;      /* rotulo */
  --peso-corpo: 400;       /* corpo */
  --peso-corpo-forte: 500; /* corpo em destaque */

  /* ==== Tamanho de fonte ====
     A §6.0 nao da os valores em px, entao a escala abaixo e arbitrada aqui, do rotulo pequeno ate
     o numero de destaque. Fora dela nao existe tamanho de fonte neste produto. */
  --fs-0: 0.6875rem; /* rotulo de bloco em caixa alta (o dispositivo ——• da marca) */
  --fs-1: 0.75rem;   /* rotulo pequeno, legenda, selo */
  --fs-2: 0.875rem;  /* corpo pequeno, tabela */
  --fs-3: 1rem;      /* corpo base */
  --fs-4: 1.25rem;   /* subtitulo */
  --fs-5: 1.75rem;   /* titulo de secao */
  --fs-6: 2.5rem;    /* titulo grande, numero de destaque */

  /* Entrelinha de titulo e de numero grande: o padrao do body (1.5) abre demais um numero de
     2.5rem, que precisa ficar compacto para ler como UM dado, nao como duas linhas. */
  --altura-titulo: 1.15;

  /* Espacamento entre letras:
       --track-rotulo  rotulo de bloco em caixa alta (a marca pede letter-spacing amplo);
       --track-titulo  titulo grande e numero grande, onde o padrao abre buracos entre letras. */
  --track-rotulo: 0.14em;
  --track-titulo: -0.02em;

  /* ==== A TARJA DE ESPERA: o elemento de assinatura deste painel ====
     Tempo parado vira PRESSAO VISUAL. Toda peca que representa um lead (cartao do funil, item da
     caixa de entrada, banda da fila fria, etapa que e o gargalo) carrega uma tarja vertical na
     borda esquerda que ENGORDA e ESQUENTA conforme o tempo passa. Dois eixos carregam o mesmo
     sinal, largura E cor, de proposito: a tarja continua legivel impressa em preto e branco e
     para quem nao distingue cor, que e a razao de ela nao ser uma bolinha colorida de status.
     Os niveis vivem em app/js/inicio-logica.js (LIMIARES_DA_TARJA), que e onde o teste alcanca;
     aqui ficam so as espessuras. */
  --tarja-1: 3px;  /* nivel 1: parado ha mais de 1 dia   -> tinta */
  --tarja-2: 7px;  /* nivel 2: parado ha mais de 3 dias  -> atencao */
  --tarja-3: 12px; /* nivel 3: parado ha mais de 7 dias  -> erro */

  /* ==== Tipografia (§6.0: Montserrat + Inter, auto-hospedadas, sem CDN) ====
     Os arquivos moram em app/fontes/ e o @font-face que aponta para eles vive em
     app/css/fontes.css. Nada aqui, e nada em lugar nenhum do repositorio, busca fonte na rede:
     `tests/design-system.test.mjs` reprova o build se aparecer endereco de CDN dentro de app/. */
  --fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-dado: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Duracao unica de transicao. Zerada no bloco de prefers-reduced-motion no fim do arquivo:
     por ser token, basta trocar em um lugar para toda a interface parar de animar. */
  --transicao: 140ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #E8EDF6;
    --tinta-2: #98A4B9;
    --linha: #212B3E;
    --linha-2: #2C3852;
    --fundo: #080B12;
    --superficie: #111725;
    --superficie-2: #161D2E;

    /* A cor de acao clareia no escuro para manter contraste contra as superficies escuras. Ela
       continua sendo UM token: a linha do tema claro governa a hierarquia inteira, e esta e o
       par escuro dela. */
    --acao: #8FB4E8;
    --acao-tinta: #C7DAF5;
    --acao-fundo: #1B2A45;
    /* --acao clareou: texto branco sobre ele perderia contraste, entao o texto sobre acao vira
       navy (--azul-nf nao muda de valor entre os temas). ~8.2:1 contra #8FB4E8. */
    --texto-sobre-acao: var(--azul-nf);

    /* Estado no escuro: as cores do tema claro medem 2.7 a 3.0 contra fundo escuro, abaixo do
       minimo de 4.5, entao aqui vao versoes mais claras. Contraste provado contra --superficie
       escura (#111725), o pior caso porque e a mais clara das duas: sucesso 9.31:1,
       atencao 10.72:1, erro 7.09:1. */
    --ok: #34D399;
    --ok-fundo: #12291F;
    --ok-linha: #1E4435;
    --atencao: #FBBF24;
    --atencao-mancha: #FBBF24;
    --atencao-fundo: #2B2110;
    --atencao-linha: #4A3A18;
    --erro: #FF7A7A;
    --erro-fundo: #2C1414;
    --erro-linha: #4C2120;

    /* Origem no escuro: mesmos tres tons, clareados o bastante para virar texto sobre o fundo
       escuro correspondente. */
    --origem-meta: #A9C6F5;
    --origem-meta-fundo: #16233C;
    --origem-google: #7FD3DC;
    --origem-google-fundo: #10262A;
    --origem-organico: #C7A9F0;
    --origem-organico-fundo: #211732;

    --veu: rgba(3, 6, 12, 0.6);
  }
}

/* Quem pediu ao sistema para reduzir movimento nao recebe transicao nenhuma. Zerar o token
   resolve a interface inteira de uma vez, porque nenhum arquivo de CSS escreve duracao solta. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao: 0ms;
  }
}