/* ============================================================ tokens.css — o arquivo ÚNICO de tokens (03/09/2026). Regra da casa (CLAUDE.md da reforma): toda cor, espaçamento, raio, fonte e duração vem daqui. Nenhum valor cru em componente. Os tokens do briefing: --surface-*, --text-*, --border, os quatro papeis semanticos com fill/bg/text, a escala de espaco, o raio, o ritmo e o tipo. A PONTE que traduzia os nomes antigos da tela morreu em 03/09/2026, quando a ultima tela interna migrou — hoje a tela fala so esta lingua, e testes/test_tokens.js nao deixa nome antigo voltar. O escuro troca por atributo na raiz (html[data-tema="escuro"]) — nenhum ajuste em componente. ============================================================ */ :root { /* ---- superfícies ---- */ /* O MUNDO E A SINALIZACAO DE AEROPORTO (12/09/2026, redesign): o chao e o piso do saguao, cinza morno e sem calor de creme; as placas sao brancas ou pretas. Contrato em .impeccable/surfaces/. */ --surface-page: #EDECE8; --surface-card: #FFFFFF; /* "Fundo de item ativo / hover" da secao 2. Ele CLAREOU (era #F1EFEA), e clarear um fundo aperta tudo que se escreve em cima dele: foi o que empurrou --text-muted e --border-campo mais um degrau, logo abaixo. Nenhum dos dois esta na secao 2 — o que a secao 2 mudou foi o chao deles. */ --surface-sunken: #E7E6E1; /* ---- texto ---- A RAMPA FOI REFEITA EM 05/09/2026, e por medicao, nao por gosto. O --text-muted anterior (#94928C) dava 2,96:1 sobre o fundo de pagina e 2,71:1 sobre o afundado — reprovava WCAG AA nos dois, e era justamente a cor do selo "Em desenvolvimento", 11px em caixa alta, o pior caso que existe. Escurecer so o muted colapsava a rampa: o secundario estava em 4,71:1 no pior fundo, e um muted em 4,50 ficaria a 1,04 dele — dois degraus indistinguiveis. Entao os DOIS desceram, mantendo a separacao de 1,33 entre eles. O primario nao mexeu. Medido contra as tres superficies (pagina, cartao, afundado); o numero citado e sempre o PIOR dos tres. Os valores desta rampa foram REMEDIDOS em 06/09/2026, quando a secao 2 do documento de regras visuais trocou as tres superficies por baixo dela — os numeros de hoje estao em cada token, logo abaixo. */ --text-primary: #141414; --text-secondary: #5C5C58; /* O UNICO VALOR DA SECAO 2 QUE NAO ENTROU, e a decisao e do fundador (06/09/2026). Ela pede #8A8880 para "texto fraco"; medido contra as tres superficies do claro isso da 3,29 / 3,55 / 3,06:1 — reprova a WCAG AA (4,5:1) para texto normal, e e justamente a cor de rotulo e metadado em 11px, o pior caso que existe. E a MESMA regressao que a medicao de 05/09 tinha consertado. #6E6C66 e o valor de 05/09 (#6F6D67) descido um degrau, porque o fundo afundado clareou: 4,86 / 5,25 / 4,52:1. */ --text-muted: #63635F; /* ---- bordas ---- --border e --border-strong sao FIO DECORATIVO: separam blocos, e ninguem depende deles para entender a tela. Ficam claros de proposito (1,25:1 e 1,50:1) — escurecer os dois transformaria cada divisoria do sistema num traco de planilha. --border-campo e outra coisa: e o CONTORNO DE COMPONENTE de um campo de formulario, e a WCAG 1.4.11 exige 3:1 dele porque e a unica coisa que diz onde o campo comeca. Era --border a 1,25:1. Medido em 3,00:1 contra a superficie mais dificil dos dois temas. */ --border: #D9D8D2; --border-strong: #C4C3BD; /* Descido um degrau junto com o fundo afundado: 3,24 / 3,50 / 3,01:1. A secao 2 tem UM valor para "borda de controle (botao secundario, campo)"; ele e o --border-strong acima, e serve ao botao. Para o CAMPO ele nao serve — a WCAG 1.4.11 pede 3:1 do contorno que diz onde o campo comeca, e #D5D2C9 da 1,40:1. */ /* Remedido em 12/09/2026 sobre o chao novo (#EDECE8): #8B8983 dava 2,96:1. #77756F: 3,90 na pagina, 3,69 no afundado, 4,61 no cartao. */ --border-campo: #77756F; /* A DIVISORIA ENTRE LINHAS DE LISTA (secao 2). Ela nao existia: as listas usavam --border, que e a borda estrutural do cartao. Sao dois papeis diferentes e a secao 2 os separa — o fio que fecha um cartao e mais forte que o fio entre duas linhas dentro dele. */ --divisoria: #E6E5E0; /* ---- papéis semânticos: fill / bg (tinta clara) / text ---- Vermelho, âmbar e verde são FIXOS (cor com significado). O acento é o único customizável por agência: a marca dela entra sobrescrevendo --accent-* na raiz, em tempo de execução. */ /* A ACAO E A PLACA PRETA (12/09/2026): no saguao, o botao principal e preto com texto branco, e a seta amarela e quem sinaliza. O verde de acao morreu com o mundo antigo. */ --accent-fill: #141414; /* A TINTA CLARA DA ACAO FOI NEUTRALIZADA (decisao do fundador, 06/09/2026). A secao 2 da a Acao um valor solido e nenhuma tinta; o que ela define para fundo de linha selecionada e de item de menu atual e o NEUTRO #EFEEE9. Entao --accent-bg deixa de ser tinta colorida e passa a ser esse neutro, e --accent-text passa a ser o proprio verde da acao. E a 3.4 no nivel do token: cor so onde significa alguma coisa, e selecao nao e significado de cor. */ --accent-bg: #E7E6E1; --accent-text: #141414; /* O ALERTA E VINHO, E SO COMO TEXTO E CONTORNO (12/09/2026): o fundador pediu vermelho que nao grite. Bloco cheio de vermelho nao existe neste mundo; a tinta clara e quase branca. */ --danger-fill: #A8323A; --danger-bg: #F7ECEC; /* A secao 2 e o unico papel que ganha borda propria: perigo aparece como bloco de aviso, e o bloco precisa fechar. */ --danger-borda: #E9C9CB; --danger-text: #A8323A; /* O AMARELO DE SINAL como tinta de icone precisa de 3:1 sobre branco: #9A7615 e o mesmo amarelo escurecido ate passar (3,9:1). O amarelo vivo (--sinal) fica para fio, seta e selo, onde nao e texto. */ --warn-fill: #9A7615; --warn-bg: #FBF3D9; --warn-text: #7A5B0B; --ok-fill: #2E6B4F; --ok-bg: #E9F2EC; --ok-text: #235340; --on-accent: #FFFFFF; --on-danger: #FFFFFF; /* ---- O MUNDO: SINALIZACAO DE AEROPORTO (12/09/2026) ---- A placa preta e a placa branca sao as duas superficies que orientam; o amarelo e SINAL (fio do item ativo, seta da acao, selo "embarca hoje") e nunca placa inteira; o alerta sobre a placa preta e rosado, para nao virar bloco vermelho. Iguais nos dois temas de proposito: placa de saguao nao muda de cor a noite. */ --sinal-placa: #141414; --sinal-placa-texto: #FFFFFF; --sinal-placa-texto-fraco: rgba(255, 255, 255, .72); --sinal-placa-fio: rgba(255, 255, 255, .14); --sinal-placa-hover: rgba(255, 255, 255, .08); /* A placa inteira em hover (ela e a propria superficie, entao a tinta translucida acima nao serve): um degrau acima do preto. */ --sinal-placa-2: #242424; /* A ARESTA DA PLACA — e ela serve a DOIS papeis com um valor so. 1. A placa como PREENCHIMENTO (o totem, a barra do topo, o botao primario): aqui a aresta e a propria cor do fundo, entao no claro ela nao se ve — e no escuro ela e o unico jeito de a placa nao colar no chao, que a noite e quase da mesma cor. 2. A placa como CONTORNO (o menu suspenso, o painel de atalhos, o dialogo, a gaveta da tarefa): painel flutuante sem sombra precisa de fio, e o fio dele e a tinta da placa. No claro os dois papeis querem #141414, e por isso o token cabe nos dois: borda preta sobre fundo preto e invisivel de graca. */ --sinal-placa-borda: #141414; --sinal: #E3B83A; /* O amarelo que cai SOBRE a placa que orienta (contagens do totem e das colunas, a seta da placa suspensa, o fio do item ativo, o anel de foco sobre a placa). No claro e o mesmo amarelo; no escuro a placa acende e ele desce para ambar de texto (fatia 14, revisor). */ --sinal-na-placa: #E3B83A; --sinal-bg: #FBF3D9; --sinal-text: #7A5B0B; --alerta-na-placa: #F0B6B9; --alerta-na-placa-forte: #FFD9DB; /* ---- a marca da MÁLAGA ---- O navy da casa, separado do acento do sistema de propósito: o acento é customizável por agência, e a assinatura da Málaga não. Ela aparece na tela de entrar, no rodapé do menu e no botão da assistente — os três lugares onde quem fala é a Málaga, não a agência que está usando. */ /* #101F35 E O VALOR DO DOCUMENTO (secao 2, atualizada pelo fundador em 07/09): "Marca Malaga (login) — fundo". O token estava em #133046, e a regra de conflito e explicita — "quando houver conflito entre este documento e o codigo existente, vale este documento". Medido antes de trocar, e o mais escuro e o melhor dos dois: #133046 + #FFFFFF = 13,65:1 #101F35 + #FFFFFF = 16,54:1 <- vale E o painel da esquerda agora e uma superficie inteira desta cor, com quatro linhas de texto em cima: a folga extra deixou de ser enfeite. */ --malaga: #101F35; --on-malaga: #FFFFFF; /* O VÉU que escurece o fundo atrás de um painel. Igual nos dois temas de propósito: ele não pinta, ele apaga o que está atrás — e apagar é a mesma coisa no claro e no escuro. Estava escrito à mão em dois lugares (o menu recolhido e o detalhe da cotação), que é exatamente como dois véus começam a discordar. */ --veu: rgba(20, 20, 18, .4); /* ---- AS CORES DE MARCA DOS CANAIS ---- Elas existem SO nos botoes de acao de um contato — abrir a conversa, mandar um e-mail. E uma excecao consciente a regra da caixa de entrada, onde canal se identifica por icone e nunca por cor: la sao dezenas de itens numa lista, e pintar cada um de verde ou rosa faria a caixa parecer tres produtos. Aqui sao dois ou tres botoes num cartao, e a cor e o que faz o olho achar o do WhatsApp sem ler. Tom escurecido do verde oficial (#25D366) para ter contraste sobre papel claro; o e-mail nao tem marca unica, entao usa o azul de correio que todo mundo reconhece. */ --marca-whatsapp: #128C7E; --marca-email: #2563EB; /* ---- a PLACA de voos ---- O único bloco escuro do sistema, e escuro nos DOIS temas: é uma placa de saguão, e placa de saguão não tem modo claro. Por isso estes tokens não aparecem no bloco do escuro lá embaixo — eles não trocam, e isso é a decisão, não um esquecimento. E É DECISÃO AUTORIZADA, não interpretação minha (06/09/2026). Ela chegou a ser levantada como defeito — o bug 8 do documento de regras visuais dizia "faixa de embarques é preta no tema claro". O fundador RETIROU o bug: não é defeito, é a exceção. Está escrito na seção 2 do documento, ao lado da regra que ela excepciona. É A ÚNICA EXCEÇÃO à regra "nenhum elemento pode ter cor fixa que ignore o tema". Qualquer outra cor fixa continua sendo defeito — e quem for tentado a abrir a segunda exceção citando esta: esta aqui custou uma decisão do dono, não um argumento. */ --placa-fundo: #141412; --placa-cel: #211F1C; --placa-cel-hover: #2A2724; --placa-tinta: #F0A830; --placa-tinta-forte: #FFFFFF; --placa-fraca: #7C776D; --placa-fio: rgba(255, 255, 255, .09); --placa-borda-bt: rgba(255, 255, 255, .24); --placa-bt-hover: rgba(255, 255, 255, .07); --placa-vinco: rgba(0, 0, 0, .55); --placa-ruim-fundo: rgba(179, 56, 47, .16); --placa-ruim-borda: rgba(179, 56, 47, .5); --placa-ruim-tinta: #F2A79D; --placa-atencao-fundo: rgba(120, 72, 4, .35); --placa-atencao-borda: rgba(240, 168, 48, .45); --placa-atencao-tinta: #F5C173; --placa-bom-fundo: rgba(46, 107, 79, .18); --placa-bom-borda: rgba(46, 107, 79, .55); --placa-bom-tinta: #95D2AF; /* ---- cores de CATEGORIA ---- Distinguem TIPO onde não há juízo de valor: as colunas do funil, o horário marcado à mão na agenda. Nunca use uma delas para dizer que algo está atrasado, crítico ou pronto — isso é dos quatro papéis semânticos acima, que são reservados. Existem porque, sem elas, a tentação é pintar categoria com a cor de estado e o vermelho deixa de querer dizer vermelho. */ --cat-azul: #4A7FA5; --cat-azul-bg: #EEF2F7; --cat-roxo: #6165B8; --cat-roxo-bg: #EEF0F9; /* O fluxo de caixa (fatia 8): entra e sai sao CATEGORIAS, nao gravidades — no mundo da sinalizacao, preto e cinza. */ --cat-entra: #141414; --cat-sai: #8A8883; --cat-amarelo: #A98110; --cat-amarelo-bg: #FBF6E6; /* ---- ELEVACAO ---- Ate 05/09/2026 nao havia token de sombra nenhum, e as vinte box-shadow da tela estavam escritas a mao em QUATRO tintas diferentes: rgba(16,27,29), rgba(23,24,27), rgba(30,28,26) e preto puro. Tres delas sao frias, e a casa e quente — o cinza do --text-primary e (31,30,28). Uma tinta so, a da casa. O nome obvio para isto seria o da ponte que morreu em 03/09, e ele e PROIBIDO — test_tokens.js reprova a volta dele. (E reprovou: esta frase citava o nome com dois-pontos na primeira versao, e a trava acusou a ponte renascendo. Arquivo que procura um prefixo nao pode conter o prefixo — regra da casa, cobrada de novo no autor dela.) 1 = o cartao que apenas descola do papel (a borda de 1px continua sendo quem separa; a sombra e o sopro) 2 = o que flutua por cima do conteudo — menu suspenso, popover 3 = o que tem veu atras — janela modal, gaveta */ /* SEM SOMBRA NENHUMA (12/09/2026): placa nao flutua. O que separa e a borda de 1px e o cabecalho preto; o que flutua (menu suspenso, modal) ganha borda preta de 1,5px na propria regra. Os tres tokens continuam existindo porque 20 regras os leem — o valor e `none`. */ --elevacao-1: none; --elevacao-2: none; --elevacao-3: none; /* ---- dimensão e ritmo ---- RAIO DE 3PX EM TUDO (12/09/2026): placa tem canto quase vivo. */ --radius-card: 3px; --radius-control: 3px; --radius-pill: 999px; /* ---- O BALAO DA CONVERSA (12/09/2026, decisao do fundador) ---- "As mensagens devem seguir o padrao do whatsapp com baloes e bordas arredondadas." E a UNICA peca do sistema que foge do raio 3, e a razao e que ela nao e uma placa: e a fala de uma pessoa, e o mundo inteiro ja aprendeu a forma dela em outro aplicativo. Placa de aeroporto nao tem canto redondo; balao de conversa tem, e quem abre a caixa de entrada esta lendo conversa, nao lendo sinalizacao. O canto do lado de quem falou fica quase reto — e o bico, sem desenhar bico. */ --radius-balao: 16px; --radius-balao-bico: 4px; /* A SECAO 2 ABRIU UM QUARTO DEGRAU DE RAIO (06/09/2026): botao, campo e item de menu em 6px, um passo mais fechado que o indicador e o painel pequeno, que ficam nos 8 do --radius-control. E ela pede 8px para a "etiqueta de status (pilula)" — que NAO e o --radius-pill. O --radius-pill (999) continua sendo o circulo: ele pinta avatar, trilho de progresso e bolinha de erro, e trocar o token por 8px transformaria toda foto de pessoa num quadrado arredondado. Quem vira 8px e a etiqueta, uma por uma, apontada para o --radius-control. */ --radius-bt: 3px; /* O DEGRAU DE 6 entrou em 06/09/2026 com a escala da secao 2 (4, 6, 8, 12, 16, 20, 24). Ele nao cabia na numeracao posicional — --space-2 ja e o 8 e ha mais de 300 usos dos nomes atuais — entao entra como MEIO DEGRAU nomeado, e nao renumerando a escala. Os degraus de 32, 40 e 48 continuam: a secao 2 fala do espaco DENTRO de componente, e esses tres sao estrutura de pagina (o 48 e a goteira entre a navegacao e o conteudo). */ --space-1h: 6px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* O degrau de 48 entrou em 05/09/2026 com a REGRA DE LAYOUT: e a goteira entre a coluna de navegacao e o conteudo. Ele nao existia e a /design usava 24, que deixava o texto colado no menu — e depois `margin: 0 auto` empurrava tudo para o meio, abrindo um corredor vazio dos dois lados. */ --space-9: 48px; --dur-fast: 120ms; --dur-base: 180ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* ---- tipografia ---- Escala fechada: 12, 13, 14, 16, 18, 22, 26. Pesos 400 e 500. Geist e a "equivalente geometrica" do briefing, ja auto-hospedada — fonte de CDN nesta tela e proibida pela regra da casa (a fonte trocando sozinha no meio de uma conversa com a cliente). */ /* A FACE E A DA SINALIZACAO (12/09/2026): a sans humanista do sistema — Segoe UI no Windows, San Francisco no Apple, Roboto no Android — e a familia da Frutiger das placas de terminal. Geist saiu: era a face de todo produto gerado, e o detector a apontava como tal. */ --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; /* O DEGRAU MICRO (03/09), aberto de propósito e uma vez só: o briefing das cotações pede 11px para o rótulo de etapa, a legenda da coluna e as iniciais do vendedor — texto que se identifica, e não que se lê. A tela tinha chegado com 11px E 10px escritos à mão; dois números soltos é como a escala de 25 tamanhos começou. Um degrau nomeado fecha a porta que dois literais deixavam aberta. */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-16: 16px; /* O TITULO DE PAGINA DA SECAO 2 (06/09/2026). Ela pede 17px/500 para ele, e 17 nao existia na escala. Entrou como token, e nao como numero solto, pela mesma razao do --fs-11: e assim que a escala de 25 tamanhos comecou das duas vezes. */ --fs-17: 17px; --fs-18: 18px; /* O NUMERO DA PLACA SUSPENSA E O CUMPRIMENTO DA CAPA (12/09/2026): 24/600. E o degrau que o fundador pediu ao ver o mockup — "a receber e vencidas estao exagerados" — no lugar dos 56px do primeiro desenho. Entra como token pela mesma razao dos outros degraus. */ --fs-24: 24px; /* O TITULO DO PAINEL DA MARCA NO LOGIN (07/09/2026). E um papel que nenhuma tela de dentro tem — frase de capa, nao titulo de pagina — e por isso ganha degrau proprio em vez de esticar o 18. Entra como token, e nao como numero solto, pela mesma razao do --fs-11 e do --fs-17: e assim que a escala de 25 tamanhos comecou. Nasceu 23px pelo desenho; subiu para 34 quando o fundador viu a bancada ("melhore o tamanho... aproveite mais o espaco"), e para 40 na rodada seguinte ("parece espremido... preencha o espaco") — numa coluna de 720px, menos que isso le como titulo de cartao perdido, nao como capa. Mediçao na tela vence o numero do papel. */ --fs-40: 40px; /* ============================================================ A ESCALA E A DA SECAO 2 DAS REGRAS VISUAIS (07/09/2026) ============================================================ Cinco degraus de texto, um por PAPEL — e o papel e que decide o degrau, nunca o contrario: --fs-17 / 500 titulo de pagina --fs-13 / 500 titulo de cartao · nome · item primario de lista --fs-13 / 400 corpo, celula de tabela --fs-12 / 400 corpo denso, celula de tabela apertada --fs-11 / 400 apoio, metadado, rotulo de indicador --fs-18 / 500 numero em destaque (indicador) O PAR 13/11 E A REGRA QUE MAIS PESA: item primario de lista e a linha de apoio dele sao 13 e 11. Nunca 12 e 11 — um ponto de diferenca le como erro de renderizacao, e nao como hierarquia. Era essa a reclamacao original ("nomes falhados, letras de tamanho diferente"), e ela sobreviveu a duas reformas de cor porque cor nao resolve hierarquia de texto. SUMIRAM em 07/09: --fs-14, --fs-22, --fs-26 e --fs-display (34). Eram a escala anterior, de 05/09, e nao ha traducao possivel entre as duas — 14 e 22 nao aparecem na tabela da secao 2. Quatorze virou 13 (corpo), 22 virou 17 (titulo de pagina) ou 18 (indicador), e 26 e 34 viraram 18. Apagar os tokens e deliberado: enquanto eles existirem, alguem os usa "so nesta tela", e a escala de nove volta por acumulo. "test_tokens.js" guarda os dois lados — o token que sumiu e a referencia que nao pode sobrar. A UNICA EXCECAO E O 16, e ela e do iOS: campo de formulario abaixo de 16px faz o telefone dar zoom sozinho ao focar. Por isso o 16 aparece em campo, e so em campo ("test_zoom_ios.js"). */ /* A MONOESPACADA, so para rotulo de secao e dado tabular (briefing das cotacoes). Pilha do sistema: nao ha fonte mono auto-hospedada, e baixar uma de CDN e proibido nesta tela. */ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --peso-normal: 400; --peso-medio: 500; /* O RESPIRO ENTRE BLOCOS DE PAINEL (07/09/2026 — checklist 8). Ele morava dentro de '.painel', e por isso so existia la. Medido na bancada: em Financeiro os cinco cartoes se ENCOSTAVAM, borda com borda, e as duas grades de dentro ('.kpis' e '.par-dash') tinham 'gap: normal' — porque 'gap: var(--gap)' com a variavel indefinida nao e um erro que apareca, e uma declaracao invalida que o navegador descarta em silencio. E a mesma familia do gap no pai errado de 06/09: o valor existe, o lugar de onde ele e lido nao. Aqui ele sobe para a raiz, que e o unico lugar de onde toda tela enxerga. */ --gap: 18px; } html[data-tema="escuro"] { /* No escuro os dois clareiam: o verde e o azul de papel somem contra fundo carvao. */ --marca-whatsapp: #25D366; --marca-email: #60A5FA; --surface-page: #171614; --surface-card: #1F1E1B; --surface-sunken: #2A2825; --text-primary: #F0EEE9; /* Mesma medicao do claro. Aqui o secundario ja passava com folga e quase nao mexeu; o muted subiu de 3,45:1 para 4,54:1 no pior fundo (o afundado), que era onde ele reprovava. */ --text-secondary: #A8A59D; /* Mesmo caso do claro: a secao 2 pede #77746D e ele da 3,88 / 3,57 / 3,15:1 — reprovado. E o fundo afundado do escuro tambem clareou (#232220 -> #2A2825), o que derrubou ate o valor de 05/09 para 4,20:1. #918F89 devolve a folga: 5,59 / 5,15 / 4,55:1. */ --text-muted: #918F89; --border: #302E2A; --border-strong: #3A3833; /* Subido junto com o fundo afundado: 3,71 / 3,42 / 3,01:1. */ --border-campo: #73716B; --divisoria: #2A2825; /* No escuro a sombra nao pode ser a tinta da casa: cinza quente sobre carvao nao escurece nada. Preto puro, mais opaco — e o unico lugar do arquivo onde o par escuro nao e so um tom diferente da mesma cor, e sim outra decisao. */ --elevacao-1: 0 1px 2px rgba(0, 0, 0, .30); --elevacao-2: 0 2px 4px rgba(0, 0, 0, .24), 0 10px 24px -8px rgba(0, 0, 0, .50); --elevacao-3: 0 24px 64px rgba(0, 0, 0, .62); /* NO ESCURO A PLACA DE ACAO INVERTE (12/09/2026): branca com texto preto. O tema escuro inteiro e ponto em aberto do redesign (brief); aqui so o acento acompanha o mundo para nao sobrar verde. */ --accent-fill: #F0EEE9; --accent-bg: #2A2825; --accent-text: #F0EEE9; --danger-fill: #D06055; --danger-bg: #3A1D1D; --danger-borda: #5A2E2E; --danger-text: #F09595; --warn-fill: #C98F2E; --warn-bg: #3A2A0F; --warn-text: #EF9F27; --ok-fill: #5B9B7C; --ok-bg: #1D3328; --ok-text: #A9CDBA; --on-accent: #141414; --on-danger: #2B100D; /* MEDIDO EM 07/09/2026, e o valor corrigido volta para a secao 2 do documento visual — e a regra 2.1: onde o documento e uma medicao discordarem, vale a medicao. O par escuro nunca tinha sido medido JUNTO, porque `--on-malaga` nao tinha um unico leitor: a tela de entrar escrevia os hexes a mao e nem tocava nele. Medidos agora: fill #4A7BA6 + texto #0B1620 -> 4,07:1 reprova fill #4A7BA6 + texto #FFFFFF -> 4,49:1 reprova por um centesimo fill #41709A + texto #FFFFFF -> 5,24:1 passa O tom desce um degrau e o texto vira branco, como no claro. O navy continua visivel sobre a pagina escura (3,45:1, acima do 3:1 que objeto grafico pede) — e o SIMBOLO da marca nao usa este token: ele tem cor propria, mais clara, justamente para brilhar no escuro. */ --malaga: #41709A; --on-malaga: #FFFFFF; --cat-azul: #7FA8CC; --cat-azul-bg: #1B2733; --cat-roxo: #9296D8; --cat-roxo-bg: #1E2036; --cat-entra: #F2F1ED; --cat-sai: #8A8883; --cat-amarelo: #D9B65E; --cat-amarelo-bg: #2C2614; /* ---- A PLACA NAO ACENDE (decisao do fundador, 12/09/2026) ---- "Modo escuro e todo escuro, sem branco." O saguao noturno da fatia 14 fazia o contrario: a noite chegava e o totem, a barra do topo e os cabecalhos de lista viravam CLAROS. O que saia disso nao era um tema escuro — era a casca branca de sempre com o miolo apagado. A decisao ja existia no arquivo, e a fatia 14 a contrariou sem perceber: o painel de partidas e escuro nos DOIS temas porque "placa de saguao nao tem modo claro" (secao 2 do documento de regras visuais, excecao autorizada em 06/09). O que vale para a placa suspensa vale para o totem. Entao os tokens da placa sao IGUAIS nos dois temas, e esta lista existe so para dizer isso em voz alta — junto com a unica coisa que de fato muda. O QUE MUDA E A ARESTA. A objecao da fatia 14 era real: #141414 sobre o chao #171614 e placa quase colada no chao. A resposta nao e acender a placa, e desenhar a aresta — `--sinal-placa-borda` sai de transparente e vira fio no escuro. Mesmo remedio que o painel de partidas ja usava. */ --sinal-placa: #141414; --sinal-placa-texto: #FFFFFF; --sinal-placa-texto-fraco: rgba(255, 255, 255, .72); --sinal-placa-fio: rgba(255, 255, 255, .14); --sinal-placa-hover: rgba(255, 255, 255, .08); --sinal-placa-2: #242424; --sinal-placa-borda: #35332E; --sinal: #E3B83A; --sinal-na-placa: #E3B83A; --sinal-bg: #3A2F12; --sinal-text: #F2D27A; --alerta-na-placa: #F0B6B9; --alerta-na-placa-forte: #FFD9DB; } /* ============================================================ AS DIMENSOES DA CASCA — nao sao ponte: sao tokens que o briefing nao previu e o produto precisa. Ficam aqui pelo mesmo motivo dos outros: nenhum valor cru dentro de componente. ============================================================ */ :root { --lado: 240px; --lado-recolhido: 64px; --topbar-alt: 56px; /* Alvo de toque minimo (briefing, secao de responsividade). */ --alt: 44px; }