/* =========================================================================== VICTORLEADS - PALETA UNICA (TEMA CLARO) --------------------------------------------------------------------------- FONTE UNICA. Toda tela importa este arquivo; nenhuma redefine token por conta propria. UM TEMA SO. O bloco :root[data-theme="claro"] foi REMOVIDO em 21/09/2026, junto com os 12 bootstraps de data-theme nas telas. Nao existe mais tema escuro, nao existe alternancia, e :root nao e mais "o escuro" -- e a unica paleta. Quem procura o escuro: git show antes-do-tema-claro:frontend/tema.css POR QUE OS TOKENS FICARAM. A camada de nomes sobreviveu de proposito: sao 2.760 referencias var(--) no index.html e no crm.html. O que o tema claro exigia era matar os DOIS TEMAS, nao os nomes -- e com os nomes de pe a conversao virou a reescrita deste arquivo, e nao 2.760 edicoes a mao. O NOME DIZ O PAPEL, NUNCA A COR. TRES BORDAS, DE PROPOSITO: --border-subtle divisoria decorativa (separa cartao de cartao). Nao carrega informacao: o 3:1 do WCAG 1.4.11 nao se aplica. --border-campo borda de controle que NAO e campo de digitacao (botao neutro, aba, pilula). #d9d9e0, 1.40:1 -- decorativa, o rotulo do controle e que o identifica. --border-strong limite de CAMPO (input/select/textarea) e anel de foco. Carrega informacao: e a unica coisa que desenha o campo, entao bate o 3:1. O #d9d9e0 especificado dava 1.40:1 e reprovava; #8e8e99 da 3.01:1 e e indistinguivel a olho. *-contrast e o texto que vai EM CIMA daquela cor. SEM SOMBRA. A profundidade vem da diferenca entre #f7f7f9, #ffffff e as bordas -- nao de sombra, glow ou degrade. --sombra existe e vale `transparent` so para nao quebrar quem ainda escreve box-shadow com ele. COMO MEDIMOS: compondo o alpha sobre o fundo antes de calcular (sem isso a conta mente) e, no DOM renderizado, subindo a arvore ate achar fundo opaco. Emoji fica de fora: o glifo pinta nas proprias cores e `color` nao o afeta. =========================================================================== */ :root{ /* --------------------------------------------------------------------- TIPOGRAFIA. IBM Plex Sans na interface inteira. IBM Plex Mono SO para numero, telefone, contador e rotulo pequeno em caixa alta -- nunca em texto corrido. A Syne (larga, do logotipo) e a Space Mono sairam. --------------------------------------------------------------------- */ --fonte-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --fonte-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* --------------------------------------------------------------------- SUPERFICIE. Tres niveis, e a diferenca sutil entre eles e o que da profundidade sem sombra. NAO ha exigencia de contraste entre superficies vizinhas no WCAG; o 1.05:1 entre pagina e card e correto. --------------------------------------------------------------------- */ --bg-app:#f7f7f9; /* pagina */ --bg-surface:#ffffff; /* card / painel */ --bg-raised:#ffffff; /* painel sobre painel */ --bg-inset:#f7f7f9; /* campo e botao neutro */ --campo-busca-bg:#eeeef2; /* campo de busca, SEM borda */ --layer-1:#ffffff; --layer-2:#f7f7f9; --layer-3:#eeeef2; /* bordas -- ver o cabecalho para o porque de serem tres */ --border-subtle:#e6e6ec; --border-campo:#d9d9e0; --border-strong:#8e8e99; --card-border:#e6e6ec; --divisoria:#eeeef2; /* divisoria DENTRO do card */ /* --------------------------------------------------------------------- TEXTO --------------------------------------------------------------------- */ --text-primary:#16161c; /* titulo, nome, valor 18.02:1 no card */ --text-secondary:#3f3f4a; /* corpo, item de navegacao 10.39:1 */ --text-tertiary:#5f5f6d; /* apoio, rotulo, contador 6.28:1 */ /* --------------------------------------------------------------------- ACENTO UNICO. Verde-petroleo, e so ele: aba ativa, barra da coluna, botao primario. O amarelo saiu da cromia por completo -- dois acentos competindo era justamente o problema. Sobrevive um unico ambar, e nao como acento: --estrela, a estrela da avaliacao. --------------------------------------------------------------------- */ --accent:#0e7f8c; --accent-contrast:#ffffff; /* branco sobre ele: 4.74 */ --accent-wash:#e7f3f4; --accent-borda:rgba(14,127,140,0.35); /* #0e7f8c sobre o proprio wash da 4.28:1 e REPROVA o 4.5. Sobre branco puro da 4.74 e passa -- o problema e so quando ha wash embaixo. #0b5f68 e o tom especificado para texto e da 6.50 sobre o wash. */ --accent-text:#0b5f68; /* --------------------------------------------------------------------- ESTADOS. "ativa" e "baixada/alerta" sao os dois unicos pares de estado da especificacao. --warning nao tem cor propria: o amarelo saiu, entao aviso e alerta dividem o mesmo papel vermelho. Os nomes seguem vivos porque ha codigo referenciando os dois. --------------------------------------------------------------------- */ --success:#1a7a47; --success-contrast:#ffffff; --success-wash:#e8f5ee; --success-borda:#b8dcc6; --danger:#9f2a35; --danger-contrast:#ffffff; --danger-wash:#fdecee; --danger-borda:#f3c4c9; --warning:#9f2a35; --warning-contrast:#ffffff; --warning-wash:#fdecee; --warning-borda:#f3c4c9; --warning-text:#9f2a35; /* SELO SOCIETARIO -- o terceiro par de estado, so para vinculo de socio. */ --societario-bg:#efebfd; --societario-borda:#c9bef5; --societario-texto:#4a3b9e; /* ESTRELA da avaliacao. Unico ambar que sobrou, e nao e acento: e um pictograma. 3.64:1 sobre branco, contra o minimo de 3:1 de icone. */ --estrela:#b7791f; /* --------------------------------------------------------------------- FAMILIA DE OFICIO - cor do icone na grade dos Blocos 01/02. Agrupa por familia (5 cores), nunca uma cor por icone. O mapa familia->token esta em backend/nichos.js; o hex mora AQUI porque cor de tema e assunto do tema. Os cinco valores ESPECIFICADOS, intactos: sobre o fundo do botao (#f7f7f9) o pior caso e #4D7C0F com 4.67:1, contra o minimo de 3:1 -- todos passam ate o 4.5:1 de TEXTO, que e mais duro do que um icone precisa. (No tema escuro dois deles reprovavam e vinham clareados; em fundo claro isso deixou de ser necessario.) --------------------------------------------------------------------- */ --familia-construcao:#B45309; --familia-instalacoes:#0E7490; --familia-manutencao:#4D7C0F; --familia-acabamento:#7E22CE; --familia-pessoais:#9F1239; /* --------------------------------------------------------------------- CABECALHO. Neutro: 72px, fundo branco, fio inferior. Sem vidro, sem degrade, sem halo -- --orb-opacity:0 desliga os halos de fundo e --painel-degrade:none desliga a barra colorida do topo dos paineis. --------------------------------------------------------------------- */ --header-bg:#ffffff; --header-texto:#16161c; --header-meta:#5f5f6d; --header-marca:#16161c; --tab-active-bg:#e7f3f4; --painel-degrade:none; --orb-opacity:0; /* Sem sombra em lugar nenhum -- ver o cabecalho. */ --sombra:transparent; /* Veu do modal. Escurece: o papel dele e separar o modal da pagina, e um veu claro sobre pagina clara nao separa nada. */ --scrim:rgba(15,23,42,0.45); /* --------------------------------------------------------------------- FUNIL. Barra da coluna e o acento unico, por especificacao. Consequencia assumida: as etapas nao tem cor propria, entao "frio -> quente -> desfecho" some como sinal visual e sobra o nome e a ordem. --------------------------------------------------------------------- */ --etapa-1:#0e7f8c; --etapa-2:#0e7f8c; --etapa-3:#0e7f8c; --etapa-4:#0e7f8c; --etapa-5:#0e7f8c; --etapa-6:#0e7f8c; --etapa-7:#0e7f8c; --etapa-8:#0e7f8c; --etapa-9:#0e7f8c; --selo-rascunho:#5f5f6d; --selo-enviado:#0b5f68; --selo-aceito:#1a7a47; --selo-recusado:#9f2a35; --selo-rascunho-wash:#eeeef2; --selo-enviado-wash:#e7f3f4; --selo-aceito-wash:#e8f5ee; --selo-recusado-wash:#fdecee; /* SELOS DE SITUACAO CADASTRAL (Receita). Pilula de raio pequeno, sem caixa alta. A borda tem ~1.35:1 contra o proprio fundo e isso esta certo: ela e acabamento de uma pilula que ja se le pelo texto, nao um limite que carrega informacao. */ --situacao-ativa-bg:#e8f5ee; --situacao-ativa-borda:#b8dcc6; --situacao-ativa-texto:#1a7a47; --situacao-baixada-bg:#fdecee; --situacao-baixada-borda:#f3c4c9; --situacao-baixada-texto:#9f2a35; /* --------------------------------------------------------------------- FAMILIAS DE CARD (menu). Colapsam TODAS no acento unico, exatamente como as etapas do funil. Consequencia assumida: os quatro cards perdem cor propria e sobram o titulo, a ilustracao e a ordem. (O prefixo --card- vem do primeiro uso e ficou; o papel e categoria.) --------------------------------------------------------------------- */ --card-azul:var(--accent-text); --card-azul-forte:var(--accent); --card-roxo:var(--accent-text); --card-roxo-forte:var(--accent); --card-roxo-claro:var(--accent); --card-laranja:var(--accent-text); --card-laranja-forte:var(--accent); --card-verde:var(--accent-text); --card-verde-forte:var(--accent); --card-ouro:var(--accent-text); --card-ouro-borda:var(--accent-borda); --card-azul-wash:var(--accent-wash); --card-azul-borda:var(--accent-borda); --card-roxo-wash:var(--accent-wash); --card-roxo-borda:var(--accent-borda); --card-laranja-wash:var(--accent-wash); --card-laranja-borda:var(--accent-borda); --card-verde-wash:var(--accent-wash); --card-verde-borda:var(--accent-borda); --card-btn-texto:#ffffff; /* sobre o acento: 4.74 */ /* --------------------------------------------------------------------- SUPERFICIES QUE NAO SEGUEM O TEMA, de proposito. --------------------------------------------------------------------- */ /* Zona de silencio do QR code: o leitor EXIGE a moldura clara para achar o codigo. E token, e nao literal, para a regra ficar escrita em algum lugar em vez de virar um #fff solto que a proxima pessoa "conserta". */ --qr-quiet-zone:#ffffff; /* Moldura do preview de um site externo: a pagina de dentro tem a cor dela. */ --pagina-externa:#ffffff; /* --------------------------------------------------------------------- MARCAS. Fiel onde e DECORACAO (halo, icone, fundo de selo), ajustada onde carrega INFORMACAO (texto, fundo de botao com texto branco). Meta #1877F2 da 4.23:1 sobre branco -- reprova como texto. WhatsApp #25D366 da 1.98 -- reprova de longe. LinkedIn #0077B5 da 4.88 -- passa, entao nao muda. Instagram #E1306C da 4.34 -- reprova por pouco. --------------------------------------------------------------------- */ --marca-meta:#1877F2; --marca-meta-forte:#0F5BC4; --marca-whatsapp:#25D366; --marca-whatsapp-forte:#167F3D; --marca-linkedin:#0077B5; --marca-linkedin-forte:#0077B5; --marca-instagram:#E1306C; --marca-instagram-forte:#D62E67; --marca-whatsapp-wash:rgba(22,127,61,0.08); --marca-whatsapp-borda:rgba(22,127,61,0.30); --marca-linkedin-wash:rgba(0,119,181,0.08); --marca-linkedin-borda:rgba(0,119,181,0.30); --marca-instagram-wash:rgba(214,46,103,0.08); --marca-instagram-borda:rgba(214,46,103,0.30); } /* --------------------------------------------------------------------------- FONTE, GLOBAL. Fica AQUI e nao em cada tela: paginas sem font-family propria caiam em Times (a serifa default do navegador) assim que a Syne saiu de cena. Uma regra no arquivo que todas importam resolve as 12 de uma vez. O `button, input, select, textarea` e obrigatorio: controle de formulario NAO herda fonte do body -- e o caminho mais comum de volta para a serifa. --------------------------------------------------------------------------- */ html, body { font-family: var(--fonte-ui); } button, input, select, textarea, optgroup { font-family: inherit; } /* --------------------------------------------------------------------------- CAMPO DE DIGITACAO. Aqui, e so aqui, a borda precisa dos 3:1 -- ela e a unica coisa que desenha o campo. Regra global para nao depender de cada tela lembrar de usar --border-strong. --------------------------------------------------------------------------- */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { border-color: var(--border-strong); } /* O controle deslizante e a marca de selecao usam o acento do sistema. */ input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }