/* ============================================================================ SISMOB — DESIGN TOKENS v1 (canônico) Fonte de verdade visual do produto. Aprovado pelo Guilherme em 2026-08-22. Referência renderizada: canvas "Simob Design System" (Claude Design). COMO MUDAR O TOM DE COR DO SISTEMA INTEIRO Edite APENAS os "botões de tom" da seção 1 (matiz/croma). Toda a rampa de marca, cinzas e superfícies deriva deles via OKLCH — nenhum componente e nenhum token semântico precisa ser tocado. Ex.: --sismob-matiz: 160 deixa o sistema verde; --sismob-croma: 0.6 deixa tudo mais sóbrio. REGRAS (ver design/README.md): - Tela nunca usa cor literal; usa var(--cor-*). - --cor-ia é EXCLUSIVA de autoria de IA (contrato de disclosure). - Tokens de estado espelham api/ontologia/entidades.yaml. - Mudança aqui = PR neste repo, nunca override local. ========================================================================== */ /* NUVAS 3 camadas — arquivo irmão (Docker copia ao lado). */ @import "./nuvas.css"; :root { /* -------------------------------------------------------------- 1 · BOTÕES DE TOM — o único lugar a editar para re-tintar -------------------------------------------------------------- */ --sismob-matiz: 252; /* matiz da marca (252 = azul aprovado) */ --sismob-matiz-cinza: 248; /* matiz dos cinzas (frios, quase neutros) */ --sismob-croma: 1; /* multiplicador global de saturação (0..1.5) */ --sismob-matiz-ia: 295; /* matiz EXCLUSIVO de autoria de IA (violeta) */ --sismob-matiz-sucesso: 155; --sismob-matiz-alerta: 65; --sismob-matiz-perigo: 25; /* -------------------------------------------------------------- 2 · PRIMITIVAS (derivadas dos botões — não editar à mão) Comentário = hex de referência com os botões no padrão. -------------------------------------------------------------- */ --azul-900: oklch(0.245 calc(0.045 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #0E1B2C */ --azul-800: oklch(0.290 calc(0.055 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #14273F */ --azul-700: oklch(0.335 calc(0.075 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #1C3A5E */ --azul-600: oklch(0.420 calc(0.095 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #245081 */ --azul-500: oklch(0.500 calc(0.110 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #2F66A3 */ --azul-400: oklch(0.620 calc(0.090 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #5B8AC0 */ --azul-300: oklch(0.740 calc(0.060 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #8FB0D6 */ --azul-100: oklch(0.930 calc(0.018 * var(--sismob-croma)) var(--sismob-matiz)); /* ≈ #E1EBF5 */ --cinza-950: oklch(0.180 calc(0.015 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #0F1418 */ --cinza-900: oklch(0.235 calc(0.022 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #16202B */ --cinza-800: oklch(0.300 calc(0.022 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #232B34 */ --cinza-700: oklch(0.370 calc(0.025 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #33404E */ --cinza-600: oklch(0.440 calc(0.028 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #4B5866 */ --cinza-500: oklch(0.510 calc(0.032 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #5A6B7E */ --cinza-400: oklch(0.660 calc(0.028 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #8595A6 */ --cinza-300: oklch(0.790 calc(0.018 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #B4BEC9 */ --cinza-200: oklch(0.895 calc(0.010 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #D8DEE6 */ --cinza-100: oklch(0.945 calc(0.006 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #EBEFF4 */ --cinza-50: oklch(0.973 calc(0.004 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #F4F6F9 */ --ia-700: oklch(0.450 0.190 var(--sismob-matiz-ia)); /* ≈ #6941C6 — croma fixo: disclosure não desbota */ --ia-400: oklch(0.630 0.150 var(--sismob-matiz-ia)); /* ≈ #9F7AEA */ --ia-borda:oklch(0.870 0.055 var(--sismob-matiz-ia)); /* ≈ #D9CFF2 */ --ia-100: oklch(0.940 0.028 var(--sismob-matiz-ia)); /* ≈ #EFEAFB */ --ia-900: oklch(0.360 0.110 var(--sismob-matiz-ia)); /* ≈ #4A3B78 (escuro) */ --sucesso-600: oklch(0.520 0.105 var(--sismob-matiz-sucesso)); /* ≈ #1B7F4D */ --sucesso-400: oklch(0.680 0.105 var(--sismob-matiz-sucesso)); /* ≈ #4CAF7E */ --sucesso-100: oklch(0.945 0.028 var(--sismob-matiz-sucesso)); /* ≈ #E2F3EA */ --alerta-600: oklch(0.530 0.115 var(--sismob-matiz-alerta)); /* ≈ #B25E09 */ --alerta-400: oklch(0.720 0.110 var(--sismob-matiz-alerta)); /* ≈ #E09A4B */ --alerta-900: oklch(0.400 0.075 var(--sismob-matiz-alerta)); /* ≈ #6B4A10 */ --alerta-100: oklch(0.955 0.022 var(--sismob-matiz-alerta)); /* ≈ #FCEFDD */ --alerta-soft: oklch(0.990 0.006 var(--sismob-matiz-alerta)); /* ≈ #FFFDF9 */ --alerta-borda:oklch(0.850 0.065 var(--sismob-matiz-alerta)); /* ≈ #ECC894 */ --perigo-600: oklch(0.500 0.160 var(--sismob-matiz-perigo)); /* ≈ #C03535 */ --perigo-400: oklch(0.660 0.130 var(--sismob-matiz-perigo)); /* ≈ #E06A6A */ --perigo-900: oklch(0.350 0.110 var(--sismob-matiz-perigo)); /* ≈ #7C2222 */ --perigo-100: oklch(0.940 0.025 var(--sismob-matiz-perigo)); /* ≈ #FBE7E7 */ --perigo-borda:oklch(0.800 0.070 var(--sismob-matiz-perigo)); /* ≈ #E8A8A8 */ /* -------------------------------------------------------------- 3 · SEMÂNTICOS — tema claro (o que os componentes usam) -------------------------------------------------------------- */ --cor-fundo: var(--cinza-50); --cor-superficie: #FFFFFF; --cor-superficie-2: var(--cinza-100); --cor-borda: var(--cinza-200); --cor-texto: var(--cinza-900); --cor-texto-2: var(--cinza-500); --cor-texto-3: var(--cinza-400); --cor-desabilitado: var(--cinza-300); --cor-marca: var(--azul-700); --cor-marca-forte: var(--azul-800); /* pressed */ --cor-marca-acao: var(--azul-500); /* links, foco */ --cor-marca-suave: var(--azul-100); /* seleção/realce */ --cor-ia: var(--ia-700); /* EXCLUSIVO autoria de IA */ --cor-ia-suave: var(--ia-100); --cor-ia-borda: var(--ia-borda); --cor-sucesso: var(--sucesso-600); --cor-sucesso-suave:var(--sucesso-100); --cor-alerta: var(--alerta-600); --cor-alerta-suave: var(--alerta-100); --cor-alerta-fundo: var(--alerta-soft); --cor-alerta-borda: var(--alerta-borda); --cor-alerta-texto: var(--alerta-900); --cor-perigo: var(--perigo-600); --cor-perigo-suave: var(--perigo-100); --cor-perigo-borda: var(--perigo-borda); --cor-perigo-texto: var(--perigo-900); /* -------------------------------------------------------------- 4 · ESTADOS DO DOMÍNIO (espelham api/ontologia/entidades.yaml) Par fg/bg por estado. Estado novo no domínio = token novo aqui. -------------------------------------------------------------- */ /* azul-600 e não azul-500: no claro este par passava no seed padrão (5,00) e REPROVAVA sob re-tintagem — 4,12 com matiz 200/croma 1.5. É o gate do docs/28 §5 ("re-tintar com seed extremo e passar AA nos dois temas"), e era a única família de estado ainda em azul-500; as irmãs (imovel-vendido, autor-humano, op-destaque, conversa-aberta) já usavam azul-600. Medido em seis seeds: pior caso 5,91. */ --estagio-novo-fg: var(--azul-600); --estagio-novo-bg: var(--azul-100); --estagio-em-qualificacao-fg: var(--alerta-600); --estagio-em-qualificacao-bg: var(--alerta-100); --estagio-qualificado-fg: var(--sucesso-600); --estagio-qualificado-bg: var(--sucesso-100); --estagio-visita-agendada-fg: var(--ia-700); --estagio-visita-agendada-bg: var(--ia-100); --estagio-desqualificado-fg: var(--cinza-600); --estagio-desqualificado-bg: var(--cinza-100); --imovel-ativo-fg: var(--sucesso-600); --imovel-ativo-bg: var(--sucesso-100); --imovel-inativo-fg: var(--cinza-600); --imovel-inativo-bg: var(--cinza-100); --imovel-vendido-fg: var(--azul-600); --imovel-vendido-bg: var(--azul-100); --imovel-alugado-fg: var(--ia-700); --imovel-alugado-bg: var(--ia-100); --autor-humano-fg: var(--azul-600); --autor-humano-bg: var(--azul-100); --autor-ia-fg: var(--ia-700); --autor-ia-bg: var(--ia-100); --autor-sistema-fg: var(--cinza-600); --autor-sistema-bg: var(--cinza-100); /* Bloco 4 — statusEditorial do Imovel (entidades.yaml: estados_editorial) */ --editorial-rascunho-fg: var(--cinza-600); --editorial-rascunho-bg: var(--cinza-100); --editorial-aguardando-aprovacao-fg: var(--alerta-600); --editorial-aguardando-aprovacao-bg: var(--alerta-100); --editorial-publicado-fg: var(--sucesso-600); --editorial-publicado-bg: var(--sucesso-100); --editorial-rejeitado-fg: var(--perigo-600); --editorial-rejeitado-bg: var(--perigo-100); /* Bloco 4 — eixos operacionais do Imovel (booleans combináveis, item 25) */ --op-bloqueado-fg: var(--perigo-600); --op-bloqueado-bg: var(--perigo-100); --op-destaque-fg: var(--azul-600); --op-destaque-bg: var(--azul-100); --op-em-visita-fg: var(--sucesso-600); --op-em-visita-bg: var(--sucesso-100); --op-em-manutencao-fg: var(--alerta-600); --op-em-manutencao-bg: var(--alerta-100); /* Bloco 5 — Atendimento IA (Conversa, Mensagem, DecisaoIa, PreCaptacao). Operador de conversa: IA usa --autor-ia-* (violeta, autoria); HUMANO usa --autor-humano-*. */ --conversa-aberta-fg: var(--azul-600); --conversa-aberta-bg: var(--azul-100); --conversa-arquivada-fg: var(--cinza-600); --conversa-arquivada-bg: var(--cinza-100); --entrega-pendente-fg: var(--cinza-500); --entrega-pendente-bg: var(--cinza-100); --entrega-enviada-fg: var(--cinza-600); --entrega-enviada-bg: var(--cinza-100); --entrega-entregue-fg: var(--azul-600); --entrega-entregue-bg: var(--azul-100); --entrega-lida-fg: var(--sucesso-600); --entrega-lida-bg: var(--sucesso-100); --entrega-falha-fg: var(--perigo-600); --entrega-falha-bg: var(--perigo-100); --revisao-pendente-fg: var(--alerta-600); --revisao-pendente-bg: var(--alerta-100); --revisao-aprovada-fg: var(--sucesso-600); --revisao-aprovada-bg: var(--sucesso-100); --revisao-revertida-fg: var(--perigo-600); --revisao-revertida-bg: var(--perigo-100); --precaptacao-pendente-fg: var(--azul-600); --precaptacao-pendente-bg: var(--azul-100); --precaptacao-convertida-fg: var(--sucesso-600); --precaptacao-convertida-bg: var(--sucesso-100); --precaptacao-descartada-fg: var(--cinza-600); --precaptacao-descartada-bg: var(--cinza-100); /* Bloco 6 — Financeiro de Locação (docs/15 §Telas): ciclos de ContratoLocacao e Cobranca (entidades.yaml). FALHA_EMISSAO é estado de primeira classe (anti-koins R4) = perigo. Nada aqui usa o violeta (--cor-ia segue exclusivo de autoria de IA). */ --contrato-rascunho-fg: var(--cinza-600); --contrato-rascunho-bg: var(--cinza-100); --contrato-ativo-fg: var(--sucesso-600); --contrato-ativo-bg: var(--sucesso-100); --contrato-encerrado-fg: var(--azul-600); --contrato-encerrado-bg: var(--azul-100); --contrato-rescindido-fg: var(--perigo-600); --contrato-rescindido-bg: var(--perigo-100); --cobranca-prevista-fg: var(--cinza-500); --cobranca-prevista-bg: var(--cinza-100); --cobranca-emitida-fg: var(--azul-600); --cobranca-emitida-bg: var(--azul-100); --cobranca-paga-fg: var(--sucesso-600); --cobranca-paga-bg: var(--sucesso-100); --cobranca-vencida-fg: var(--alerta-600); --cobranca-vencida-bg: var(--alerta-100); --cobranca-cancelada-fg: var(--cinza-600); --cobranca-cancelada-bg: var(--cinza-100); --cobranca-falha-emissao-fg: var(--perigo-600); --cobranca-falha-emissao-bg: var(--perigo-100); /* Bloco 6 — RepasseProprietario (schema: RepasseStatus) e estado DERIVADO da IptuParcela (pagaEm/vencimento — não é enum no banco, mas é estado de UI de primeira classe). FALHOU = perigo (anti-koins R4, mesmo racional da FALHA_EMISSAO). CONCILIADO é o único badge de fundo FORTE do financeiro: estado terminal do dinheiro (repasse conferido no extrato). Nada aqui usa o violeta (--cor-ia segue exclusivo de autoria de IA). */ --repasse-aberto-fg: var(--cinza-500); --repasse-aberto-bg: var(--cinza-100); --repasse-calculado-fg: var(--azul-600); --repasse-calculado-bg: var(--azul-100); --repasse-agendado-fg: var(--alerta-600); --repasse-agendado-bg: var(--alerta-100); --repasse-executado-fg: var(--sucesso-600); --repasse-executado-bg: var(--sucesso-100); --repasse-conciliado-fg: var(--cinza-50); --repasse-conciliado-bg: var(--sucesso-600); --repasse-falhou-fg: var(--perigo-600); --repasse-falhou-bg: var(--perigo-100); --iptu-parcela-pendente-fg: var(--cinza-500); --iptu-parcela-pendente-bg: var(--cinza-100); --iptu-parcela-paga-fg: var(--sucesso-600); --iptu-parcela-paga-bg: var(--sucesso-100); --iptu-parcela-vencida-fg: var(--alerta-600); --iptu-parcela-vencida-bg: var(--alerta-100); /* Bloco 7 passo 6 — FRANQUIA de consumo do plano (item 70, anti-koins). StatusFranquia (billing/franquia.service.ts) é enum NOVO do domínio — DENTRO|ALERTA(≥80%)|ESGOTADA — e por isso ganha família própria; o status da FaturaPlano NÃO ganha: o enum é idêntico ao da Cobranca (PREVISTA|EMITIDA|PAGA|VENCIDA|CANCELADA|FALHA_EMISSAO) e reusa --cobranca-*. ESGOTADA é o único estado de fundo FORTE aqui (mesmo racional do --repasse-conciliado): o cliente não pode descobrir o esgotamento depois — tem que ser inconfundível ANTES da fatura. `-barra` é o preenchimento da barra de consumo; `--franquia-trilha` é o trilho. Nada aqui usa o violeta (--cor-ia segue exclusivo de autoria de IA). */ --franquia-dentro-fg: var(--sucesso-600); --franquia-dentro-bg: var(--sucesso-100); --franquia-dentro-barra: var(--sucesso-600); --franquia-alerta-fg: var(--alerta-600); --franquia-alerta-bg: var(--alerta-100); --franquia-alerta-barra: var(--alerta-600); --franquia-esgotada-fg: var(--cinza-50); --franquia-esgotada-bg: var(--perigo-600); --franquia-esgotada-barra: var(--perigo-600); --franquia-trilha: var(--cinza-200); /* Bloco 7 passo 5 — Pessoas & Acesso: Equipe.ativa (item 57) e Usuario.ativo (item 56/72 — usuário ATIVO é o assento cobrado). Inativo é ESTADO, não erro: cinza neutro, nunca perigo. Nada aqui usa o violeta (--cor-ia segue exclusivo de autoria de IA). */ --equipe-ativa-fg: var(--sucesso-600); --equipe-ativa-bg: var(--sucesso-100); --equipe-inativa-fg: var(--cinza-600); --equipe-inativa-bg: var(--cinza-100); --usuario-ativo-fg: var(--sucesso-600); --usuario-ativo-bg: var(--sucesso-100); --usuario-inativo-fg: var(--cinza-600); --usuario-inativo-bg: var(--cinza-100); /* -------------------------------------------------------------- 5 · TIPOGRAFIA · ESPAÇO · RAIO · ELEVAÇÃO · TOQUE -------------------------------------------------------------- */ /* ATENÇÃO ao repontar --fonte-display: ele NÃO é usado só pelos módulos. Os compostos --tipo-titulo/--tipo-secao abaixo o consomem, e são usados pelo portal do contador e por app/indicadores.css, app/governanca.css e app/faturas.css. Mudar aqui muda essas superfícies junto. A voz de display do APP mora em --casca-display (app/casca.css) — foi lá que a experiência da expandida itálica entrou e foi revertida (docs/28 §2). */ --fonte-display: 'Sora', 'Segoe UI', sans-serif; --fonte-corpo: 'Instrument Sans', 'Segoe UI', sans-serif; --fonte-dados: 'JetBrains Mono', Consolas, monospace; --tipo-display: 700 28px/34px var(--fonte-display); /* letter-spacing -0.02em */ --tipo-titulo: 600 22px/28px var(--fonte-display); --tipo-secao: 600 17px/24px var(--fonte-display); --tipo-corpo: 400 15px/22px var(--fonte-corpo); --tipo-legenda: 400 13px/18px var(--fonte-corpo); --tipo-rotulo: 600 11px/14px var(--fonte-corpo); /* caps, letter-spacing 0.06em */ --tipo-dados: 500 13px/18px var(--fonte-dados); --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-5: 20px; --espaco-6: 24px; --espaco-7: 32px; --espaco-8: 40px; --raio-sm: 6px; --raio-md: 10px; --raio-lg: 14px; --raio-xl: 20px; --raio-cheio: 999px; --elevacao-1: 0 1px 2px oklch(0.235 0.022 var(--sismob-matiz-cinza) / 0.06); --elevacao-2: 0 4px 12px oklch(0.235 0.022 var(--sismob-matiz-cinza) / 0.08); --elevacao-3: 0 12px 32px oklch(0.235 0.022 var(--sismob-matiz-cinza) / 0.14); --toque-minimo: 44px; /* -------------------------------------------------------------- 6 · VIDRO — superfícies translúcidas (linguagem da landing; o app é a versão densa, o site do tenant a cinematográfica). Derivam dos semânticos: funcionam no claro/escuro e re-tintam com os botões de tom (base do tema por tenant no builder 4b). Uso: background: var(--vidro-fundo); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-brilho); backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-saturacao)); -------------------------------------------------------------- */ --vidro-fundo: color-mix(in oklch, var(--cor-superficie) 62%, transparent); --vidro-fundo-denso: color-mix(in oklch, var(--cor-superficie) 82%, transparent); --vidro-borda: color-mix(in oklch, var(--cor-texto) 14%, transparent); --vidro-brilho: inset 0 1px 0 color-mix(in oklch, white 10%, transparent); --vidro-blur: 14px; --vidro-saturacao: 1.3; /* -------------------------------------------------------------- 7 · MOVIMENTO — duração e curva (DESIGN-SPEC §7) --------------------------------------------------------------- POR QUE ESTA SEÇÃO NASCEU EM 2026-09-04, e o que ela conserta. A escala de três tempos é da spec desde o começo (design/anatomia/DESIGN-SPEC.md §7: micro 120 · transição 180 · superfície 240, "sem bounce, sem scale > 1.02"). Ela estava escrita em `web/src/estilos.css`, que é a folha do backoffice, e NUNCA aqui — o arquivo canônico tinha 411 linhas e zero variável de movimento. Medido antes de mover: `--dur-move`, `--dur-surface` e `--ease-move` tinham 0 (zero) consumidores no produto; os únicos usos estavam em `design/anatomia/showcase.html`, que não é servido. `--dur-micro` tinha 3. O tier de 240ms nem token tinha: `--ease-surface` não existia em lugar nenhum. Enquanto isso `app/casca.css` carrega 13 `transition` com SETE durações literais (.12 .15 .16 .18 .2 .22 1.4s) e nenhum `var()`. Ou seja: o ritmo do produto era escrito à mão, em cada regra, sem um lugar onde afiná-lo — exatamente o que esta seção existe para acabar. Vocabulário, não número solto. QUAL TIER USAR · --dur-micro (120ms) — resposta ao dedo: `:active`, cor de estado, o header que compacta. Curto porque confirma, não narra. · --dur-move (180ms) — algo se desloca ou entra: item de lista, conteúdo de rota. Curva com saída rápida e chegada macia. · --dur-surface (240ms) — superfície que abre por cima: folha, modal, painel. É o único tier que o usuário "vê acontecer". REGRA: anima `transform` e `opacity`. `filter`/`blur` animado mata o compositor, e `width`/`height` fazem layout a cada quadro. `--ease-surface` NASCE SEM CONSUMIDOR NA SPA, e é de propósito: as duas superfícies que abrem no app (`.folha` e `dialog.modal`) moram em `app/casca.css`, que hoje escreve `.22s`/`.16s` em número literal. Ele completa a escala de TRÊS tiers que a spec manda — e este arquivo já define vocabulário à frente do uso (`--tipo-display` e `--data-6` também têm zero consumidores). O dia em que a casca for reescrita, o tempo da superfície já tem nome e não vira um oitavo número literal. -------------------------------------------------------------- */ --dur-micro: 120ms; --dur-move: 180ms; --dur-surface: 240ms; --ease-move: cubic-bezier(.2, .7, .2, 1); --ease-surface: cubic-bezier(.2, .8, .2, 1); } /* ============================================================== MOVIMENTO REDUZIDO — os tempos vão a zero NA FONTE. Não é acessibilidade decorativa: quem sente enjoo com movimento não consegue usar o sistema. Zerar aqui derruba de uma vez toda regra que consome os tokens, sem depender de cada folha lembrar de escrever o seu próprio `@media`. O que NÃO depende de token (transições com número literal, `@keyframes`) continua sendo desligado pelo §13 de `app/casca.css` e pelo bloco irmão de `web/src/estilos.css`. ============================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0.01ms; --dur-move: 0.01ms; --dur-surface: 0.01ms; } } /* ============================================================== TEMA ESCURO — só os semânticos mudam; primitivas e estados continuam derivando dos mesmos botões de tom. Ative com (ou espelhe via @media (prefers-color-scheme: dark) no shell do app). ============================================================== */ [data-tema="escuro"] { --cor-fundo: var(--cinza-950); --cor-superficie: oklch(0.270 calc(0.022 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #171D24 */ --cor-superficie-2: var(--cinza-800); --cor-borda: oklch(0.340 calc(0.024 * var(--sismob-croma)) var(--sismob-matiz-cinza)); /* ≈ #2A3440 */ --cor-texto: oklch(0.930 0.006 var(--sismob-matiz-cinza)); /* ≈ #E8EDF2 */ --cor-texto-2: oklch(0.700 0.020 var(--sismob-matiz-cinza)); /* ≈ #9AA8B6 */ --cor-texto-3: oklch(0.620 0.022 var(--sismob-matiz-cinza)); /* ≈ #7E8C9A */ --cor-desabilitado: var(--cinza-700); --cor-marca: var(--azul-400); --cor-marca-forte: var(--azul-300); --cor-marca-acao: var(--azul-400); --cor-marca-suave: var(--azul-800); --cor-ia: var(--ia-400); --cor-ia-suave: var(--ia-900); --cor-ia-borda: var(--ia-900); --cor-sucesso: var(--sucesso-400); --cor-sucesso-suave:oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --cor-alerta: var(--alerta-400); --cor-alerta-suave: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --cor-alerta-fundo: oklch(0.230 0.020 var(--sismob-matiz-alerta)); --cor-alerta-borda: oklch(0.460 0.075 var(--sismob-matiz-alerta)); --cor-alerta-texto: oklch(0.800 0.085 var(--sismob-matiz-alerta)); --cor-perigo: var(--perigo-400); --cor-perigo-suave: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --cor-perigo-borda: oklch(0.450 0.095 var(--sismob-matiz-perigo)); --cor-perigo-texto: var(--perigo-borda); /* ── AA no escuro para os pares de estado ──────────────────────────── Auditoria de 2026-08-30, as 59 famílias do §4 medidas nos dois temas: ZERO reprovações no claro, 17 no escuro. Causa: fg `-400` sobre bg `-800`/`-900` fica entre 2,33 e 4,38 — as rampas foram calibradas para o claro e herdadas no escuro sem medir. As famílias com fg de sucesso/alerta/perigo/cinza-300 passam; só azul-400, ia-400 e cinza-400 reprovam. Correção: puxar a fg 50% na direção da tinta. Escolhi 50% e não os 60% do remendo local que existia em web/src/estilos.css porque medi sob re-tintagem (o gate do docs/28 §5): com 60% o pior caso fica em 4,66 — 0,16 acima da linha, frágil para matiz que eu não testei; com 50% o pior caso é 5,43 em quatro seeds (padrão, verde 160/1.3, terracota 25/0.6, ciano 200/1.5). Legibilidade acima de vivacidade: a etiqueta ainda carrega o matiz da família no fundo. O croma da rampa de IA continua fixo — o disclosure não desbota. */ --azul-400-aa: color-mix(in oklch, var(--azul-400) 50%, var(--cor-texto)); --ia-400-aa: color-mix(in oklch, var(--ia-400) 50%, var(--cor-texto)); --cinza-400-aa: color-mix(in oklch, var(--cinza-400) 50%, var(--cor-texto)); /* estagio-novo NÃO tinha fg no escuro — só o bg. Herdava o azul-500 do claro sobre azul-800 e dava 2,33:1, a pior de todas. Era omissão, não calibragem. */ --estagio-novo-fg: var(--azul-400-aa); --estagio-novo-bg: var(--azul-800); --estagio-em-qualificacao-fg: var(--alerta-400); --estagio-em-qualificacao-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --estagio-qualificado-fg: var(--sucesso-400); --estagio-qualificado-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --estagio-visita-agendada-fg: var(--ia-400-aa); --estagio-visita-agendada-bg: var(--ia-900); --estagio-desqualificado-fg: var(--cinza-300); --estagio-desqualificado-bg: var(--cinza-800); --imovel-ativo-fg: var(--sucesso-400); --imovel-ativo-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --imovel-inativo-fg: var(--cinza-300); --imovel-inativo-bg: var(--cinza-800); --imovel-vendido-fg: var(--azul-400-aa); --imovel-vendido-bg: var(--azul-800); --imovel-alugado-fg: var(--ia-400-aa); --imovel-alugado-bg: var(--ia-900); --autor-humano-fg: var(--azul-400-aa); --autor-humano-bg: var(--azul-800); --autor-ia-fg: var(--ia-400-aa); --autor-ia-bg: var(--ia-900); --autor-sistema-fg: var(--cinza-300); --autor-sistema-bg: var(--cinza-800); --editorial-rascunho-fg: var(--cinza-300); --editorial-rascunho-bg: var(--cinza-800); --editorial-aguardando-aprovacao-fg: var(--alerta-400); --editorial-aguardando-aprovacao-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --editorial-publicado-fg: var(--sucesso-400); --editorial-publicado-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --editorial-rejeitado-fg: var(--perigo-400); --editorial-rejeitado-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --op-bloqueado-fg: var(--perigo-400); --op-bloqueado-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --op-destaque-fg: var(--azul-400-aa); --op-destaque-bg: var(--azul-800); --op-em-visita-fg: var(--sucesso-400); --op-em-visita-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --op-em-manutencao-fg: var(--alerta-400); --op-em-manutencao-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --conversa-aberta-fg: var(--azul-400-aa); --conversa-aberta-bg: var(--azul-800); --conversa-arquivada-fg: var(--cinza-300); --conversa-arquivada-bg: var(--cinza-800); --entrega-pendente-fg: var(--cinza-400-aa); --entrega-pendente-bg: var(--cinza-800); --entrega-enviada-fg: var(--cinza-300); --entrega-enviada-bg: var(--cinza-800); --entrega-entregue-fg: var(--azul-400-aa); --entrega-entregue-bg: var(--azul-800); --entrega-lida-fg: var(--sucesso-400); --entrega-lida-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --entrega-falha-fg: var(--perigo-400); --entrega-falha-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --revisao-pendente-fg: var(--alerta-400); --revisao-pendente-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --revisao-aprovada-fg: var(--sucesso-400); --revisao-aprovada-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --revisao-revertida-fg: var(--perigo-400); --revisao-revertida-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --precaptacao-pendente-fg: var(--azul-400-aa); --precaptacao-pendente-bg: var(--azul-800); --precaptacao-convertida-fg: var(--sucesso-400); --precaptacao-convertida-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --precaptacao-descartada-fg: var(--cinza-300); --precaptacao-descartada-bg: var(--cinza-800); /* Bloco 6 — Financeiro de Locação (docs/15 §Telas) */ --contrato-rascunho-fg: var(--cinza-300); --contrato-rascunho-bg: var(--cinza-800); --contrato-ativo-fg: var(--sucesso-400); --contrato-ativo-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --contrato-encerrado-fg: var(--azul-400-aa); --contrato-encerrado-bg: var(--azul-800); --contrato-rescindido-fg: var(--perigo-400); --contrato-rescindido-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --cobranca-prevista-fg: var(--cinza-400-aa); --cobranca-prevista-bg: var(--cinza-800); --cobranca-emitida-fg: var(--azul-400-aa); --cobranca-emitida-bg: var(--azul-800); --cobranca-paga-fg: var(--sucesso-400); --cobranca-paga-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --cobranca-vencida-fg: var(--alerta-400); --cobranca-vencida-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --cobranca-cancelada-fg: var(--cinza-300); --cobranca-cancelada-bg: var(--cinza-800); --cobranca-falha-emissao-fg: var(--perigo-400); --cobranca-falha-emissao-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); /* Bloco 6 — repasse + parcela de IPTU (par escuro dos tokens da seção 4) */ --repasse-aberto-fg: var(--cinza-400-aa); --repasse-aberto-bg: var(--cinza-800); --repasse-calculado-fg: var(--azul-400-aa); --repasse-calculado-bg: var(--azul-800); --repasse-agendado-fg: var(--alerta-400); --repasse-agendado-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --repasse-executado-fg: var(--sucesso-400); --repasse-executado-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --repasse-conciliado-fg: var(--cinza-950); --repasse-conciliado-bg: var(--sucesso-400); --repasse-falhou-fg: var(--perigo-400); --repasse-falhou-bg: oklch(0.280 0.055 var(--sismob-matiz-perigo)); --iptu-parcela-pendente-fg: var(--cinza-400-aa); --iptu-parcela-pendente-bg: var(--cinza-800); --iptu-parcela-paga-fg: var(--sucesso-400); --iptu-parcela-paga-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --iptu-parcela-vencida-fg: var(--alerta-400); --iptu-parcela-vencida-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); /* Bloco 7 passo 6 — franquia do plano (par escuro dos tokens da seção 4) */ --franquia-dentro-fg: var(--sucesso-400); --franquia-dentro-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --franquia-dentro-barra: var(--sucesso-400); --franquia-alerta-fg: var(--alerta-400); --franquia-alerta-bg: oklch(0.280 0.045 var(--sismob-matiz-alerta)); --franquia-alerta-barra: var(--alerta-400); --franquia-esgotada-fg: var(--cinza-950); --franquia-esgotada-bg: var(--perigo-400); --franquia-esgotada-barra: var(--perigo-400); --franquia-trilha: var(--cinza-800); /* Bloco 7 passo 5 — Pessoas & Acesso (par escuro dos tokens da seção 4) */ --equipe-ativa-fg: var(--sucesso-400); --equipe-ativa-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --equipe-inativa-fg: var(--cinza-300); --equipe-inativa-bg: var(--cinza-800); --usuario-ativo-fg: var(--sucesso-400); --usuario-ativo-bg: oklch(0.280 0.040 var(--sismob-matiz-sucesso)); --usuario-inativo-fg: var(--cinza-300); --usuario-inativo-bg: var(--cinza-800); } /* ============================================================== NUVAS — ponte escuro: --cor-* ← semânticos NUVAS. Status (--cor-sucesso/alerta/perigo) ficam nas rampas OKLCH (independentes de --palette-purple). ============================================================== */ [data-tema="escuro"] { --cor-fundo: var(--surface-canvas); --cor-superficie: var(--surface-card); --cor-superficie-2: var(--surface-workspace); --cor-borda: var(--border-default); --cor-texto: var(--text-primary); --cor-texto-2: var(--text-secondary); --cor-texto-3: var(--text-muted); --cor-desabilitado: var(--text-disabled); --cor-marca: var(--palette-purple-soft); /* ⚠️ APONTAVA PARA `--palette-purple` (#684d85) E REPROVAVA AA — 1,93:1. Medido em 2026-09-16, com cálculo WCAG 2.x independente do gate. O erro era de DIREÇÃO, não de tom: `--palette-purple` é o extremo ESCURO da rampa, e no tema CLARO isso está certo (`--cor-marca-forte` é o `--azul-800` lá em cima, escuro sobre claro). A ponte copiou o papel sem inverter a direção, e no escuro pôs roxo escuro sobre superfície escura. ⚠️ ONDE DOÍA: `--cor-marca-forte` sobre `--cor-marca-suave` é o rótulo do item ATIVO — pill de categoria, aba selecionada, chip marcado — em dez arquivos. **O estado selecionado era o menos legível da tela.** `#b49ad4` dá 5,47 sobre a seleção e 6,59 sobre a superfície: acima da AA e acima da margem de 5,0 da casa. ⚠️ E NÃO baixei `--surface-selected` de 14 % para 8 % (que também resolveria no papel): a mistura é o que faz a seleção ser VISTA. Enfraquecê-la para consertar a leitura do texto troca um problema de legibilidade por outro. Clarear só o texto resolve os dois — medido nas duas grades. */ --cor-marca-forte: var(--palette-purple-bright); --cor-marca-acao: var(--palette-purple-soft); --cor-marca-suave: var(--surface-selected); }