/* ===================================================================== TOKENS · Central de Leads com o design da Clint (SPEC-VISUAL, item 1) A regra: nenhuma cor nem tamanho "solto" no CSS. Tudo o que é cor, fonte, raio e altura de controle nasce aqui e só aqui. O resto do CSS usa var(--…). Um grep por "#" fora deste arquivo tem que voltar vazio. V1 (Arthur): só o tema escuro, por enquanto. V3 (Arthur, revisto em 01/10): paleta monocromática — preto, branco e cinza em botões, fundos, item ativo e foco. As marcações de lead (faixas, produtos, etiquetas, status) continuam coloridas. ===================================================================== */ /* ---------- fonte: Poppins, servida daqui (sem ir ao Google) ---------- Caminho relativo a este arquivo: funciona servida pelo Express (/css/…) e aberta de file:// pelos testes de tela e pelo harness de prints. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); } :root { color-scheme: dark; /* ---------- superfícies ---------- */ --bg: #171717; /* fundo da aplicação (área de conteúdo) */ --bg-panel: #1C1C1C; /* barra lateral, colunas do kanban, cards de indicador, painéis */ --bg-card: #262626; /* card de lead na coluna, botão ativo do segmentado */ --bg-input: #232323; /* campos de texto e busca */ --bg-table-head: #171717; /* cabeçalho de tabela */ --bg-hover: #2E2E2E; /* hover de linha e de item */ --border: #2E2E2E; /* bordas de coluna, input, botão secundário, divisórias */ --border-subtle: #262626; /* borda de card de indicador e linha de tabela */ /* ---------- texto ---------- */ --fg: #C8C8C8; /* principal · 10,9:1 sobre --bg */ --fg-muted: #999999; /* secundário, menu inativo, rótulos · 6,2:1 */ --fg-subtle: #9A9A9A; /* placeholder, atalho de teclado · A8-20: media 5,38:1 sobre o card (era 3,33) */ --fg-on-primary: #111111; /* texto em cima do botão principal (branco) */ --fg-on-warning: #000000; /* texto em cima do laranja (e do verde do WhatsApp) */ /* ---------- cor principal (V3: monocromático) ---------- */ --primary: #F2F2F2; /* botão principal, barrinha do item ativo, etapa atual, foco */ --primary-hover: #D9D9D9; /* botão principal sob o mouse */ --primary-fg: #FFFFFF; /* texto e ícone do item ativo do menu, links, botão contornado */ --primary-subtle: rgba(255, 255, 255, .08); /* fundo do item ativo do menu */ --primary-muted: rgba(255, 255, 255, .22); /* borda de botão secundário claro */ /* ---------- etiquetas e status ---------- */ --tag-bg: #3C3C3C; /* fundo de etiqueta (pílula) */ --tag-fg: #B898EB; /* texto de etiqueta */ --success-bg: #14532D; /* selo "Novo", status positivo */ --success-fg: #86EFAC; /** * AUDITORIA A8-07 / D-6 — ATENÇÃO É ÂMBAR, NÃO VERMELHO. * * --warning-bg era #3B1106 (matiz 12°: vermelho-escuro) e --warning era * #F97316 (laranja-vermelho). Com isso "Dados provisórios", "senha * provisória", "nome genérico", "sem próxima ação" e a linha da hora na * Agenda apareciam em vermelho de urgência — onze usos. O vermelho fica * para urgência e erro (--danger*, --sinal-urgencia); atenção aponta para a * família âmbar, que já existia e não era usada nesses componentes. * * --warning-fg é novo: --warning como TEXTO media 3,11:1 no claro (A8-20). * Como texto, o âmbar precisa escurecer no claro — a cor do SINAL (fundo, * barra, ícone) continua a mesma nos dois temas. */ --warning-bg: rgba(242, 169, 59, .16); --warning: var(--sinal-atencao); --warning-fg: #F2A93B; --danger: #FF4B4C; /* contador de notificação, linha "agora" da agenda */ --danger-bg: rgba(255, 75, 76, .16); --danger-fg: #FF8A8B; --info: #60A5FA; /* ✓✓ lido, ligação na linha do tempo */ --count-bg: rgba(184, 184, 184, .2); /* contador redondo da coluna */ /* ---------- agenda (4.7): uma cor por tipo de compromisso ---------- */ /* A8-16 — legenda e compromissos saem daqui, e daqui só. As cores são as da família de sinal (v9 E4), que é o que a grade já desenhava. */ --ag-tarefa: var(--sinal-neutro); /* tarefa marcada com o lead */ --ag-visita: var(--sinal-sucesso); /* visita · é o caminho do ganho */ --ag-fwp: var(--sinal-atencao); /* follow-up da cadência */ --ag-atividade: var(--info); /* atividade da etapa */ /* ---------- faixas (mesmo esquema de pílula) ---------- */ --f-a-bg: rgba(249, 115, 22, .16); --f-a-fg: #FDBA74; /* A · Quente */ --f-b-bg: rgba(234, 179, 8, .16); --f-b-fg: #FDE047; /* B · Morno */ --f-c-bg: var(--tag-bg); --f-c-fg: var(--fg-muted); /* C · Frio */ --f-agora-bg: rgba(255, 75, 76, .16); --f-agora-fg: #FF8A8B; /* Agora */ /* =================================================================== * SPEC v9 · Bloco E — O SISTEMA DE SINAIS * * A interface continua neutra (D1 da v8). A cor entra só como SINAL, e cada * cor quer dizer uma coisa só, em todas as telas: * * urgência (vermelho) → agir já · lead Agora, tarefa vencida, resposta atrasada * atenção (âmbar) → olhar em breve · tempo na etapa, anúncio genérico, aviso de config * sucesso (verde) → feito · ganho, visita realizada, tarefa concluída * neutro (cinza) → sem ação · perdido, arquivado, C · Frio * * Vermelho SÓ para urgência: era usado também em tempo na etapa e em aviso de * anúncio, e com vermelho em tudo o vermelho deixa de significar algo. * Os valores daqui são medidos por scripts/contraste.js nos dois temas. * =================================================================== */ --sinal-urgencia: #FF7A70; /* medido: 4,73:1 sobre o card */ --sinal-atencao: #F2A93B; /* medido: 7,40:1 */ --sinal-sucesso: #4CC38A; /* medido: 7,14:1 */ --sinal-neutro: #9AA0A9; /* medido: 5,56:1 */ /* ---------- produtos: identificam de onde o lead veio, não urgência ---------- * São faixa de 3 px e bolinha: forma, não texto, então o mínimo é 3:1. * Carta de crédito saiu do rosa-avermelhado (que colidia com urgência) para * magenta, como a spec pede. */ --prod-agio-carro: #5B9DF5; --prod-agio-imovel: #A78BFA; --prod-capital-giro: #3FC6B8; --prod-carta-credito: #E36BC4; --prod-financiamento: #9BD14A; /* ---------- etapa: UM matiz (índigo), do claro ao forte conforme avança ---------- * Um matiz só para não confundir etapa com produto. O selo é o fundo da cor a * 18% com o texto na cor cheia; por isso o mínimo aqui é de texto (4,5:1). */ --etapa-1: #C7CBF5; /* Novo */ --etapa-2: #B4BAF2; /* Tentando contato */ --etapa-3: #A2A9EF; /* Em conversa */ --etapa-4: #949CEC; /* Qualificado */ --etapa-5: #8891E9; /* Visita agendada */ --etapa-6: #7E87E6; /* Visita realizada */ --etapa-nutri: var(--sinal-neutro); --etapa-ganho: var(--sinal-sucesso); --etapa-perdido: var(--sinal-neutro); /* 03/10 — o índigo que serve de TEXTO: o rótulo da etapa atual nos passos do topo da ficha. A escala em si é elemento gráfico (3:1); como texto ela reprova 4,5:1 nas primeiras etapas do tema claro, então o rótulo usa este. */ --etapa-fg: #B4BAF2; /* D-7, opção (b) da decisão 4: cores distintas por etapa. Só valem quando Aparência está em "Cores por etapa"; os matizes ficam fora dos de produto e dos de sinal, e cada um é medido como elemento gráfico (3:1). */ --etapac-1: #9AA6F0; /* Novo · azul-violeta */ --etapac-2: #67D8EF; /* Tentando contato · ciano */ --etapac-3: #5ED3B0; /* Em conversa · verde-mar */ --etapac-4: #E0C341; /* Qualificado · mostarda */ --etapac-5: #F2A93B; /* Visita agendada · âmbar */ --etapac-6: #86D96B; /* Visita realizada · grama */ /* ---------- etiquetas: oito cores para a equipe escolher ---------- * Fora das de produto e de sinal. Onde o matiz fica perto de um reservado * (orquídea perto de carta de crédito, azul-violeta perto de etapa), o papel * separa: etiqueta é sempre selo de 18% COM o nome escrito, nunca cor sozinha. */ --etq-1: #67D8EF; /* ciano */ --etq-2: #C9A7F5; /* púrpura */ --etq-3: #F28DA8; /* vinho claro */ --etq-4: #E0C341; /* mostarda */ --etq-5: #86D96B; /* grama */ --etq-6: #5ED3B0; /* verde-mar */ --etq-7: #E08BE0; /* orquídea */ --etq-8: #9AA6F0; /* azul-violeta */ /* ---------- produtos: os nomes curtos apontam para os papéis do Bloco E ---------- * Os componentes continuam escrevendo var(--p-carta); quem decide a cor é o * papel (--prod-carta-credito). Assim não há duas verdades sobre a cor de um * produto — era o que fazia a carta de crédito ser rosa aqui e magenta lá. */ --p-carro: var(--prod-agio-carro); --p-imovel: var(--prod-agio-imovel); --p-giro: var(--prod-capital-giro); --p-carta: var(--prod-carta-credito); --p-financ: var(--prod-financiamento); /* ---------- etapas do funil: a escala de índigo do Bloco E ---------- * Era uma rampa de cinza, que no Funil competia com o cinza da interface e * não dizia nada sobre avanço. Um matiz só, do claro ao forte. */ --kb-1: var(--etapa-1); --kb-2: var(--etapa-2); --kb-3: var(--etapa-3); --kb-4: var(--etapa-4); --kb-5: var(--etapa-5); --kb-6: var(--etapa-6); --kb-7: var(--etapa-6); --kb-ganho: var(--sinal-sucesso); --kb-nutri: var(--sinal-neutro); --kb-perdido: var(--sinal-neutro); /** * AUDITORIA A8-06 / D-5 — AVATAR: COR POR PESSOA, LEGÍVEL. * * Eram seis cinzas próximos (#3A3A3A a #8A8A8A) com as iniciais em #111: * contraste de 1,66 a 3,49 em 600+ ocorrências, e três "Vendedor" no menu * ficavam idênticos. Agora são seis matizes distintos, medidos para dar * 4,5:1 com o texto do avatar — que passou a ser um token próprio, porque * ele muda com o tema. */ --av-1: #1F5FA8; --av-2: #8A2F6B; --av-3: #2F6B4F; --av-4: #8A5A1F; --av-5: #5B3FA8; --av-6: #1F6B6B; --av-fg: #F5F5F5; /* as iniciais */ --avatar: #3F4A5A; /* sem usuário: neutro, mas não cinza morto */ /* ---------- cores da linha do tempo (4.2 · ícone num quadrado colorido) ---------- */ --ev-criado: #E6E6E6; --ev-ligacao: var(--info); --ev-etiqueta: #34D399; --ev-followup: var(--warning); --ev-etapa: #6B7280; /* ---------- WhatsApp (o chat continua reconhecível, no escuro) ---------- */ --wa-bg: #141414; /* fundo do chat */ --wa-mine: color-mix(in srgb, var(--primary) 12%, var(--wa-bg)); /* v8 Bloco 3 — enviada: cor de destaque a 12% */ --wa-theirs: #262626; /* bolha do lead */ --wa-unread: #25D366; /* contador verde de não lidas */ --qr-bg: #FFFFFF; /* QR code só lê em fundo branco */ --logo: #FFFFFF; /* o "M" da Monarca: branco no escuro, preto no claro */ /* ---------- véus (modal, gaveta, visor) ---------- */ --overlay: rgba(0, 0, 0, .6); /* v8 Bloco 3 — fundo de modal, com desfoque de 4px */ --overlay-soft: rgba(0, 0, 0, .25); --overlay-strong: rgba(0, 0, 0, .92); --pulse-a: rgba(255, 75, 76, .55); --pulse-b: rgba(255, 75, 76, 0); /* seta dos