/* ============================================================================= SuperRico Workspace — tokens de identidade visual ESPEC v2.6 §5.1. Os 5 tokens contratuais são normativos: NÃO altere seus valores. Toda a escala de tons é DERIVADA deles via color-mix — nunca acrescente um hex solto. O fallback estático para navegadores sem color-mix é gerado no build (build/CoresFallback.targets → css/tokens-fallback.css). Não edite o gerado. ============================================================================= */ :root { /* ===== Tokens contratuais ===== */ --verdeEscuro: #0e7c7b; --verdeMedio: #1caf9c; --verdeClaro: #d4f4dd; --vermelho: #c81d25; --preto: #1d1d16; /* ===== Escala derivada (color-mix) ===== */ --verde-900: color-mix(in srgb, var(--verdeEscuro) 85%, var(--preto)); --verde-700: color-mix(in srgb, var(--verdeEscuro) 80%, var(--verdeMedio)); --verde-300: color-mix(in srgb, var(--verdeMedio) 45%, white); --verde-050: color-mix(in srgb, var(--verdeClaro) 40%, white); --linha: color-mix(in srgb, var(--verdeEscuro) 12%, white); --fundo: color-mix(in srgb, var(--verdeClaro) 18%, white); /* ===== Tons de tinta (02/09/2026) ===== ⚠️ ESTES TONS EXISTEM PORQUE O MENU ESTAVA ESCURO DEMAIS, e não por gosto: o protótipo escreve os itens do menu num ardósia frio (#3a4a5a) e os rótulos de grupo num cinza-verde (#6b7d7c); nós escrevíamos os dois em `--preto` e `--verde-900`, que são 17:1 e 8:1 sobre o branco. A lista ficava dura, e foi o que o Igor viu ao comparar as duas telas. ⚠️ NÃO SÃO OS HEXES DO PROTÓTIPO. O ardósia dele é AZULADO (B > G) e a nossa paleta é teal (G > B): nenhuma mistura de `--preto`, `--verdeEscuro` e branco chega lá — é fora do gamut destes cinco tokens, e a regra do topo deste arquivo proíbe soltar um hex novo. O que está aqui é o equivalente na NOSSA paleta: mesma leveza, temperatura da marca. ⚠️ `--tinta-suave` É 4,60:1 SOBRE BRANCO, de propósito. O `--muted` do protótipo (#6b7d7c) mede 4,33:1 e REPROVA na WCAG AA para os rótulos de 10px em que ele é usado. Escurecer esses três pontos é a diferença entre copiar o desenho e copiar o defeito. */ --tinta-fria: color-mix(in srgb, var(--preto) 62%, var(--verde-900)); --tinta: color-mix(in srgb, var(--tinta-fria) 88%, white); --tinta-suave: color-mix(in srgb, var(--tinta-fria) 68%, white); --tinta-icone: color-mix(in srgb, var(--verdeEscuro) 55%, var(--tinta)); --cinza-050: color-mix(in srgb, var(--tinta-suave) 10%, white); /* ⚠️ O LARANJA ENTROU EM 14/09/2026, e até então a paleta não tinha nenhum. Ele é o `--sr-orange: #F39200` do `Workspace.html`, e existe para UMA coisa: o convite de quem ainda não escolheu cliente ("Selecionar cliente"). O verde da marca ali dizia "mais um botão"; o laranja diz "comece por aqui", que é o que o modelo faz. ⚠️⚠️ TEXTO ESCURO SOBRE ELE, E NÃO BRANCO. O modelo escreve branco sobre este laranja e isso mede 2,3:1 — reprova a WCAG AA, e num botão, que é onde ela mais importa. O `--laranja-tinta` é o mesmo laranja puxado ao preto: 8,9:1 sobre o fundo. Mesma cor de fundo do modelo, texto legível. */ --laranja: #f39200; --laranja-050: color-mix(in srgb, var(--laranja) 14%, white); --laranja-linha: color-mix(in srgb, var(--laranja) 38%, white); --laranja-tinta: color-mix(in srgb, var(--laranja) 45%, var(--preto)); /* O verde do traço dos cabeçalhos de grupo. O `--verde-300` é claro demais para um traço de 2px (ele existe para superfícies), e o `--verdeMedio` cru é o mais saturado da paleta — entre os dois está o tom que o protótipo usa. */ --verde-400: color-mix(in srgb, var(--verdeMedio) 75%, white); /* ===== Superfície, profundidade e raio (03/09/2026) ===== O modelo (`Workspace.html`) desenha TUDO sobre três decisões que a nossa folha não tinha: uma segunda linha mais clara que a `--linha` para separar dentro do cartão, três alturas de sombra e uma escala de raio com quatro degraus. Sem elas cada tela reinventava o seu cartão, e o Bootstrap de fábrica entrava com raio único de .75rem e sombra nenhuma. ⚠️ AS SOMBRAS SÃO VERDES, e não cinzas. A do modelo é `rgba(14,124,123,.22)` — o próprio `--verdeEscuro` a 22%. Sombra cinza sobre fundo levemente verde suja; a verde afunda. Elas ficam com o `color-mix` DENTRO do valor de box-shadow de propósito: o gerador do fallback (`build/GerarFallbackCores.cs`) só resolve declarações que são color-mix inteiras, e `color-mix(..., transparent)` como declaração faria o build FALHAR — ele não sabe misturar com transparente. Aqui ele simplesmente não casa, e navegador sem color-mix fica sem sombra, que é degradação e não quebra. */ --linha-2: color-mix(in srgb, var(--verdeEscuro) 6%, white); --sombra-sm: 0 1px 2px color-mix(in srgb, var(--preto) 5%, transparent), 0 2px 8px color-mix(in srgb, var(--preto) 6%, transparent); --sombra: 0 8px 28px -10px color-mix(in srgb, var(--verdeEscuro) 22%, transparent); --sombra-lg: 0 18px 50px -12px color-mix(in srgb, var(--verdeEscuro) 28%, transparent); /* Os quatro raios do modelo, medidos nele: 14px cartão e modal · 12px tabela, aba e menu · 10px botão e nota · 8px campo. Um raio único faz o campo parecer um cartão pequeno. */ --raio-lg: .875rem; --raio-md: .75rem; --raio-sm: .625rem; --raio-xs: .5rem; /* ===== Ponte para o Bootstrap 5.3.8 ===== ⚠️ ESTA PONTE ESTAVA PELA METADE DESDE A F1, E NINGUÉM PODIA VER PELO CÓDIGO. `--bs-primary` e `--bs-link-color` valem para utilitários (`.text-primary`, `.bg-primary`), e o Bootstrap 5.3 **não deriva os botões nem os links deles**: `.btn-primary` traz `--bs-btn-bg: #0d6efd` COMPILADO na própria regra, e `a` usa `--bs-link-color-rgb`, não `--bs-link-color`. Resultado: todo botão do sistema foi AZUL do Bootstrap por quatro semanas, e todo link também — com um comentário aqui dizendo que a ponte existia. Achado pelo Igor, olhando a tela, em 01/09/2026. O conserto está no `site.css`, sobre `--bs-btn-*`. */ --bs-primary: var(--verdeEscuro); --bs-primary-rgb: 14, 124, 123; --bs-success: var(--verdeMedio); --bs-danger: var(--vermelho); --bs-body-color: var(--preto); --bs-link-color: var(--verdeEscuro); --bs-link-color-rgb: 14, 124, 123; --bs-link-hover-color: var(--verde-900); --bs-link-hover-color-rgb: 10, 95, 94; --bs-border-radius: .75rem; /* ===== A OUTRA METADE DA PONTE (03/09/2026, E31a) ===== ⚠️ A ponte acima pinta a MARCA (primário, sucesso, perigo, links). Faltava o resto do vocabulário neutro do Bootstrap — e é ele que desenha a maior parte da tela: · `--bs-secondary-color` é o que a `.text-body-secondary` usa, e essa classe aparece **230 vezes** no produto. É o rótulo de todo cartão, a legenda de todo indicador, o "média dos meses lançados" embaixo de cada número. O padrão do Bootstrap é preto a 75%; o modelo usa um cinza-VERDE (`--muted: #6b7d7c`). Sem esta linha, 230 pedaços de texto saíam num cinza que não é da paleta, ao lado de tudo o que é. Fica em `--tinta-suave`, que já foi calibrado em **4,60:1** sobre branco — acima do 4,5 da WCAG AA, e por isso mesmo não é o hex do modelo, que mede 4,33:1 e reprovaria. · `--bs-border-color` é a borda de tabela, lista, sanfona e utilitária `.border`. O cinza #dee2e6 do Bootstrap ao lado da nossa `--linha` é a diferença que o Igor chamou de "as bordas estão diferentes" em 02/09. A `--linha` mede #e2efef; a `--line` do modelo, #dfe9e8. São a mesma borda. · `--bs-tertiary-bg` e `--bs-secondary-bg` são os fundos lavados (`.bg-body-tertiary`, campo desabilitado, listra de tabela). Passam a sair da paleta em vez do cinza-azulado. */ /* ===== Os seis estágios do funil (03/09/2026, E31a) ===== O modelo dá a cada estágio do CRM uma cor própria, e desenha com ela o traço de 2px sob o cabeçalho da coluna. As seis cores dele (`CRM_ESTAGIOS`, `_fonte/Universal.html`:15274) são um **degradê de neutro até a marca**: #94a3b8 cinza-azulado no Lead, passando por azul e verde-água, até #1B4A47 no Acompanhamento. O significado é esse — quanto mais fundo no funil, mais a cor da casa. ⚠️ COPIAR OS SEIS SERIA REPETIR O QUE O IGOR RECUSOU HOJE no campo: azul e cinza-azulado são outro matiz e não saem dos cinco tokens. O que está aqui é a MESMA PROGRESSÃO na nossa paleta — do cinza-verde neutro ao verde mais escuro — em seis passos que escurecem sempre. O gradiente comunica a mesma coisa; as cores são da marca. ⚠️ OS SEIS SÃO `color-mix`, e não `var()` apontando para tons prontos — de propósito. Só a declaração que É um color-mix inteiro entra no `tokens-fallback.css` gerado no build, e é de lá que o `KitBaseTests` lê os hexes para PROVAR que a escala escurece de ponta a ponta. Um `var(--verdeMedio)` seco pintaria igual e sairia do alcance da prova. Luminâncias conferidas em 03/09: 0,445 · 0,414 · 0,298 · 0,201 · 0,131 · 0,078. */ --estagio-1: color-mix(in srgb, var(--tinta-fria) 38%, white); --estagio-2: color-mix(in srgb, var(--verdeEscuro) 55%, white); --estagio-3: color-mix(in srgb, var(--verdeEscuro) 72%, white); --estagio-4: color-mix(in srgb, var(--verdeEscuro) 90%, white); --estagio-5: color-mix(in srgb, var(--verdeEscuro) 88%, var(--preto)); --estagio-6: color-mix(in srgb, var(--verdeEscuro) 62%, var(--preto)); /* ⚠️ O SÉTIMO SAI DA ESCALA, de propósito (02/10/2026). Os seis primeiros são uma progressão — o verde fica mais forte conforme o cliente avança —, e "Encerrado" não é mais um passo dessa subida: é a saída. Pintá-lo de verde ainda mais escuro diria "chegou ao topo". Ele volta ao cinza-frio do `--estagio-1`, puxado ao escuro: fora da escala, e sem alarme. */ --estagio-7: color-mix(in srgb, var(--tinta-fria) 58%, white); /* ------------------------------------------------------------------ os três tiers (§7.3) A · Premium, B · Padrão, C · Inicial — a escala de valor da carteira. ⚠️ DERIVADOS, E NÃO COPIADOS, pelo mesmo motivo dos seis estágios logo acima: o modelo dá #a87d2c, #5a9b91 e #94a3b8, que são de outro matiz. E o terceiro deles é LITERALMENTE PROIBIDO — `#94a3b8` está na lista que o `A_escala_dos_estagios_e_derivada_e_progride` recusa neste arquivo, porque no modelo é também a cor do estágio Lead. ⚠️ E AS PÍLULAS DO MODELO REPROVAM NA WCAG. Ele as desenha com branco sobre a cor cheia: 3,73:1 no A, 3,21:1 no B e 2,56:1 no C — os três abaixo dos 4,5:1 que texto pequeno exige. A pílula aqui é tom claro com tinta escura da MESMA cor — 8,18 / 7,50 / 7,74 —, que é o par que a `.sr-badge-alerta` já usava. A cor continua sendo a informação; o que muda é de que lado do contraste ela fica. Quem mede é o `KitBaseTests.As_pilulas_coloridas_do_crm_passam_na_wcag_aa`. ⚠️ OS TRÊS SÃO `color-mix`, inclusive o C, que poderia ser um `var(--tinta-suave)` quase igual: o `build/GerarFallbackCores.cs` só resolve declarações que SÃO um color-mix inteiro, e um alias simples não entra no `tokens-fallback.css` — o caso que mede o contraste mediria o nada. A ordem também importa: o gerador devolve cada mistura ao dicionário conforme lê o arquivo, então estes três precisam vir DEPOIS de `--laranja`, `--verdeMedio` e `--tinta-fria`. */ --tier-a: color-mix(in srgb, var(--laranja) 62%, var(--tinta-fria)); --tier-b: color-mix(in srgb, var(--verdeMedio) 78%, var(--tinta-fria)); --tier-c: color-mix(in srgb, var(--tinta-fria) 62%, white); /* ⚠️ `--tinta-secundaria`, E NÃO `--tinta-suave` — MEDIDO EM 03/09 ANTES DE ENTREGAR. O `--tinta-suave` foi calibrado em 4,60:1 **sobre branco**, e é o que ele precisa ser para os rótulos do menu, que vivem em branco. Mas a `.text-body-secondary` aparece 230 vezes e quase nunca sobre branco puro: ela cai no `--fundo` da página (4,46:1), no `--verde-050` de um aviso (4,31:1) e no `--cinza-050` de um campo calculado (4,08:1). Três reprovações na WCAG AA que ninguém veria numa captura — é o mesmo defeito que o `--muted` do protótipo tem (4,33:1) e que esta folha recusou copiar em 02/09. 72% é o primeiro passo que passa em TODAS as quatro superfícies (4,54:1 na pior). Fica em 5,11:1 sobre branco — um pouco mais escuro que o `--tinta-suave`, e é o preço de o mesmo tom servir a quatro fundos em vez de um. */ --tinta-secundaria: color-mix(in srgb, var(--tinta-fria) 72%, white); --bs-secondary-color: var(--tinta-secundaria); --bs-border-color: var(--linha); --bs-tertiary-bg: var(--verde-050); --bs-secondary-bg: var(--cinza-050); } /* ----------------------------------------------------------------------------- Medidas de layout (ESPEC §5.2). Unidades fluidas; alvo de toque ≥ 44px. ----------------------------------------------------------------------------- */ :root { --sr-sidebar-largura: 296px; --sr-conteudo-max: 1080px; --sr-topbar-altura: 3.5rem; --sr-toque-min: 44px; --sr-raio: var(--bs-border-radius); }