/* ══════════════════════════════════════════════════════════════ Sistema Financeiro GS3 · tokens visuais · v1 Nada aqui depende de servidor externo. Copiado de docs/design/especificacao-visual.html, seção "Tokens · bloco para colar". Aquele documento é a especificação visual: em conflito, ele vence no visual e docs/ESPECIFICACAO.md vence em regra de negócio e segurança. REGRA: nenhum valor cru depois deste arquivo. Se um valor não está aqui, ele não existe no sistema. ══════════════════════════════════════════════════════════════ */ /* ── AS DUAS FONTES ─────────────────────────────────────────── Nunito · Vernon Adams / Cyreal / Jacques Le Bailly · SIL OFL 1.1 Outfit · Smartsheet / Rodrigo Fuenzalida · SIL OFL 1.1 Vieram da V4 do Claude Design (15/09/2026). Nunito carrega TODO o texto; Outfit carrega TODO o número — e a divisão entre as duas é a classe `.num`, lá embaixo neste arquivo. POR QUE DUAS FONTES, e o que isso exige de quem mexer aqui: O Outfit tem algarismos de larguras DIFERENTES por padrão — o "1" mede 14,2px e o "0" mede 26,2px a 40px. Numa coluna de valores, `R$ 111.111,11` e `R$ 999.999,99` sairiam com 22px de diferença e a coluna do DRE deixaria de alinhar. O que impede isso é a regra `.num` deste arquivo, que liga os algarismos tabulares. **Ela deixou de ser estética e virou o que permite trocar a fonte do número.** Medido em 15/09/2026: 439 números de dinheiro em 8 telas, todos tabulares. Servidas do próprio domínio, nunca de CDN — ver Regras de segurança no CLAUDE.md. Um arquivo variável por pedaço: Nunito cobre 300–700, Outfit 300–600 — o peso mais forte do sistema é 600, então cabe. As duas licenças estão em assets/fonts/, ao lado dos arquivos, como manda a OFL. O PRELOAD ACOMPANHA: Shell.php e login.php pedem Nunito-Variable.woff2 com prioridade alta. Trocar a fonte aqui e esquecer lá faz toda tela baixar uma fonte que ninguém usa. ────────────────────────────────────────────────────────────── */ @font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; /* latino básico: cobre português inteiro */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Variable-ext.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Italic-Variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Italic-Variable-ext.woff2") format("woff2-variations"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Variable.woff2") format("woff2-variations"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Variable-ext.woff2") format("woff2-variations"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ── PAPEL E TINTA · tema claro (padrão) ─────────────────── Valores da V4 (13/09/2026), ajustados até que NENHUM par do conferidor piore em relação ao que havia antes. O matiz saiu do cinza-azul para o cinza-violeta, que é o da paleta nova. */ --papel: #FFFFFF; /* fundo da tela */ --papel-2: #F7F7FA; /* cabeçalho de tabela, campo, faixa */ --papel-3: #E9E8F0; /* rebaixo, linha desativada, --tela */ --banda: #E7E7EF; /* linha de resultado do DRE, col TOTAL */ --tinta: #14131A; /* texto e número principal */ --tinta-2: #4A4857; /* rótulo, categoria, texto secundário */ --tinta-3: #706D7D; /* metadado, zero, placeholder */ /* O ALVO DESTE TOKEN É 5,0 SOBRE O BLOCO, desde 15/09/2026 — não é o mínimo da norma (4,5) nem o valor que ele já teve (5,29). O motivo: a folga de 0,11 que o valor antigo tinha já foi consumida uma vez sem ninguém ver, e 0,36 de folga contra a PRÓXIMA mudança de paleta vale mais, porque assim o número é escolhido e não herdado. O que aconteceu: em 15/08/2026 o documento de design V1 mediu e declarou que este token passava sobre o branco — media 5,29, com o valor #676C73. A paleta da leva 1, em 13/09/2026, trocou o matiz para o cinza-violeta, clareou o token para #7B7889 e derrubou o par para 4,29, abaixo do mínimo. Passou em silêncio por dois dias porque este par não estava no conferidor — justamente porque tinha sido medido uma vez e declarado seguro. Agora está: é um dos pares obrigatórios. QUEM MEXER AQUI: o alvo é 5,0 sobre --bloco nos DOIS temas, e subir muito além disso tem custo. A 5,5 a distância até --tinta-2 cai para 1,62x e a regra 1 lá embaixo perde a base aritmética; a 6,5 cai para 1,37x e os três níveis de tinta viram dois. A conta está em docs/relatorios/2026-09-15-leva-5-proposta-o-tinta-3.md. */ --linha: #E1E0EA; /* divisória entre linhas de tabela */ --linha-2: #C3C1D3; /* borda de componente, contorno campo */ --regua: #8E8AA3; /* régua estrutural: resultado, cabeç. */ /* ── MARCA · identidade e ação primária ────────────────────── Nunca em número. Nunca em situação de conta. Nunca em gráfico. */ /* O roxo da ação é o roxo da paleta oficial: ver "A paleta oficial da marca" no CLAUDE.md. O hover e o pressionado descem dele em claridade, na mesma matiz, pelos mesmos degraus que separavam os tons anteriores (medidos em OKLCH). Branco por cima: 5,96 · 7,69 · 9,96. Os dois claros abaixo já estavam na matiz do roxo oficial (a 1,7° e 0,8° dela). */ --marca: var(--paleta-roxo); --marca-forte: #7326BC; /* hover; link dentro de texto corrido */ --marca-press: #5C2097; /* pressionado */ --marca-fraca: #F1E9FE; /* fundo do item de menu ativo */ /* A LINHA da marca, que não é o fundo dela. Nasceu em 24/09/2026, quando a borda do cartão do valor na tela de baixa, feita com `--marca-fraca`, mediu 1,06 contra o fundo do cartão no tema escuro — ou seja, sumiu. Cor de preenchimento clareia no claro e escurece no escuro; cor de linha precisa se afastar do fundo nos dois. Os dois valores são os do desenho. */ --marca-linha: #D9C4FB; /* contorno em tom da marca */ --foco: var(--marca); /* anel: 2px solid, offset 2px */ /* ── ESTADO · sempre com cor E palavra ─────────────────────── */ --liquidado: #0E6B38; --liquidado-fraca: #E6F4EB; --liquidado-borda: #C3DFCE; --hoje: #8A5600; --hoje-fraca: #FCF6E8; --hoje-borda: #EBDBB1; --vencido: #B0132C; --vencido-fraca: #FCEBED; --vencido-borda: #F1CDD3; --aberto: #55535F; --aberto-fraca: #EFEFF3; --aberto-borda: #DEDDE6; /* ── AS BARRAS DO GRÁFICO DO PAINEL (21/09/2026) ───────────── Vermelho e verde não entram aqui — ver A regra de cor no CLAUDE.md. A pagar e a receber não são nem vencido nem pago, e o gráfico dos próximos catorze dias fala dos dois, então ele sai da paleta de estado e entra na de cinza, que é o que o desenho da V5 faz. OS TRÊS VALORES FORAM ESCURECIDOS/CLAREADOS EM 22/09/2026: o cinza de "a receber" escurece até passar 3,0 contra o cartão nos dois temas, sem sair do cinza. Os do desenho mediam 1,97 e 1,89 — pouco para um elemento que carrega dado. Agora: a receber 3,02 (claro) · 3,03 (escuro) contra o cartão a pagar 9,20 · 9,13 hoje 5,26 · 5,26 entre as duas barras 3,04 · 3,01 O FORTE GANHOU TOKEN PRÓPRIO na mesma hora. Ele era o --tinta-2, e com o fraco escurecendo os dois ficavam abaixo dos 3,0 um do outro — 2,95 no claro e 2,87 no escuro. Dois pontos de RGB resolveram no claro e cinco no escuro, mas mexer no --tinta-2 mexeria no texto do sistema inteiro. A LEITURA INVERTE ENTRE OS TEMAS, e é de propósito: no claro o fraco é claro e no escuro ele é escuro. O que separa os dois lados não é "claro e escuro", é MUITO e POUCO contraste contra o papel — e isso troca de lado quando o papel troca. O ÂMBAR FICA ENTRE OS DOIS CINZAS, e não nos 3,0 literais: a 3,0 ele passa a medir 1,00 contra o cinza fraco — ou seja, em tons de cinza a barra de hoje viraria uma barra de "a receber" qualquer. Entre as duas, a 5,26, ele fica a 1,74 de cada uma: é o máximo que três tons conseguem nesta faixa, e satisfaz o mínimo de 3,0 com folga. Quem termina de marcar o dia é o NÚMERO DO DIA em âmbar e em NEGRITO, que é texto e aparece mesmo nos dias sem barra. */ --barra-fraca: #95939E; /* a receber */ --barra-forte: #484655; /* a pagar */ --barra-hoje: #916300; /* as barras e o eixo do dia de hoje */ /* ── AVATAR · as iniciais do contato (V5, 15/09/2026) ──────── O desenho põe um quadrado de 34px com duas letras antes do nome. Não é enfeite: é o que faz o olho achar a linha certa antes de ler. Cor PRÓPRIA, e não --banda sobre --bloco, porque aqui o fundo carrega TEXTO — a régua é a de texto (4,5), não a de superfície (1,15). O conferidor guarda o par, e guarda também a sigla contra o quadro, como superfície. */ --avatar: #EDEBF5; --avatar-tinta: #5A5568; /* ── TIPOGRAFIA · 7 degraus, nenhum a mais ────────────────── Os quatro primeiros subiram 1px em 28/08/2026 (leva 1 da legibilidade, proposta B): a tela é lida o dia inteiro e os degraus de leitura estavam um ponto abaixo do confortável. As ALTURAS de linha, botão, campo e chip NÃO mudaram — a conta de que todas seguram +1px está no relatório 2026-08-28-leva1-proposta-legibilidade.md. */ --fonte: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-num: "Outfit", "Nunito", system-ui, sans-serif; /* só em .num */ --fs-rotulo: 12px; /* rótulo de campo, cabeçalho de coluna (era 11) */ --fs-meta: 13px; /* categoria nível 3, chip, metadado (era 12) */ --fs-dado: 14px; /* toda célula de tabela, todo número (era 13) */ --fs-corpo: 16px; /* campo de formulário, texto de leitura (era 15) */ --fs-titulo: 19px; /* título de bloco, total do rodapé baixa */ --fs-tela: 26px; /* título de tela */ --fs-numerao: 32px; /* número grande de cartão do Painel */ --fs-destaque: 42px; /* o número da tela inteira — só o saldo do Painel (mudança 2 da extensão visual, aplicada em 24/08/2026 no passo do Painel, como o plano previa) */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; /* O QUARTO DEGRAU, de 19/09/2026. O desenho escreve `font-weight:700` 99 vezes nos 15 arquivos — é passo da escala dele, não exceção. Entra aqui porque peso é token, e hoje serve a UM uso: o botão primário. Quem quiser o segundo tem de medir no desenho antes, como este foi. */ --peso-negrito: 700; --lh-dado: 1.35; --lh-corpo: 1.5; --lh-titulo: 1.15; /* ── ESPAÇO · régua base 4 px ─────────────────────────────── */ --e-1: 2px; --e-2: 4px; --e-3: 8px; --e-4: 12px; --e-5: 16px; --e-6: 24px; --e-7: 32px; --e-8: 48px; /* ── RAIO · só dois, mais o círculo ───────────────────────── */ --r-0: 0; /* a GRADE: linha, célula, cabeçalho, rodapé e a barra de seleção, que é faixa dentro da caixa. A CAIXA da tabela usa --r-2 desde 15/09/2026. */ /* --r-1 e --r-2 são declarados UMA VEZ SÓ, no bloco da v3 no fim deste arquivo. A v1 dizia 2px aqui; deixar as duas declarações faria este trecho mentir para quem lesse só ele. */ /* ── SOMBRA ──────────────────────────────────────────────── A regra era "só no que flutua, nunca em cartão parado", e CAIU em 20/09/2026. O motivo antigo (15/09) era bom: a paleta já resolvia a separação do quadro. O motivo novo é outro — o desenho da V5 usa sombra 73 vezes nos quinze arquivos; é a linguagem dele, e o sistema a segue. NO ESCURO A SOMBRA QUASE NÃO APARECE, e isso é verdade aqui e no desenho: preto sobre um fundo quase preto muda pouco. A conta, no ponto mais denso da sombra sobre o fundo da tela: no claro o #E9E8F0 vira rgb(207,206,215), que dá 1,28; no escuro o #0A0910 vira rgb(3,3,5), que dá 1,04 — ou seja, nada. Por isso a sombra NUNCA é quem separa o quadro: ela reforça. Quem separa é o TOM (o --bloco é mais claro que o --tela nos dois temas: 1,22 no claro e 1,18 no escuro) e a régua de 1px, e são esses dois que o bin/conferir-contraste.php mede. O conferidor não sabe medir sombra; o que ele passou a garantir é que quem tem sombra também tem borda, para o escuro nunca depender dela. A tinta da --sh-quadro é a do desenho (#100E1C, violeta-preto, que casa com o fundo violeta das telas); as três antigas usam a tinta verde-preta da v1 e ficam como estão, que é onde já foram medidas. */ --sh-quadro: 0 1px 2px rgba(16, 14, 28, .04), 0 8px 24px -12px rgba(16, 14, 28, .12); --sh-menu: 0 4px 12px rgba(22, 24, 27, .14); --sh-modal: 0 16px 48px rgba(22, 24, 27, .24); --sh-coluna: 6px 0 8px -6px rgba(22, 24, 27, .18); /* ── GRADE DO DRE · medidas fixas ─────────────────────────── */ --col-rotulo: 340px; --col-mes: 96px; --col-total: 118px; --linha-h: 28px; --linha-h-resultado: 34px; --recuo-nivel: 22px; /* nível 2 = 1x, nível 3 = 2x */ /* ── CHROME ───────────────────────────────────────────────── */ --menu-w: 224px; /* --topo-h É A FAIXA QUE GRUDA, e desde 19/09/2026 ela não é mais uma barra de altura fixa: é a linha do título e das ações, e ela cresce com o subtítulo da tela. MEDIDO a 1.366, com a caixa do seletor de período de 40: 42px onde não há subtítulo (baixa, cadastros), 52 nas listagens, 63 no Painel e nas telas de Configurações, 74 no Fluxo e no DRE — mais os 4 da margem embaixo da faixa, que fica fora do fundo dela. O valor aqui fica como teto: as telas que o descontam sobram, não cortam. QUEM USA ISTO, e o que acontece quando o número erra: o Fluxo o desconta da altura da janela para dimensionar a rolagem interna. Descontar DEMAIS encurta a tabela e nunca corta nada (regra de 28/08/2026). Descontar de menos faz a página rolar um pouco, o que também não corta nada. O DRE MEDE O PRÓPRIO TOPO (dre.js): o campo "Cliente" desce de linha numa janela estreita e a faixa do filtro mora no topo, e um número fixo erraria por dezenas de pixels. Este valor vale lá só sem JS. NÃO use este número para posicionar coisa grudada numa tela específica: a faixa daquela tela pode ser bem menor, e a peça nasceria com um vão. Meça a tela e escreva o número lá, como a baixa faz. */ --topo-h: 90px; } /* ── TEMA ESCURO ───────────────────────────────────────────── Só as cores mudam. Tamanho, espaço, raio e sombra são os mesmos. */ [data-tema="escuro"] { /* banda, linha e linha-2 subiram um tom em 29/08/2026 (leva 4): a MEDIÇÃO mostrou que o escuro perdia em ESTRUTURA, não em texto — divisórias a 1,24 e cabeçalho de grupo a 1,20 derretiam as bordas que organizam a página. Agora: linha/bloco 1,40 (claro: 1,28), linha-2/bloco 2,03 (claro: 1,73), banda/bloco 1,24. A conta inteira está em docs/relatorios/2026-08-29-leva4-tema-escuro-proposta.md. */ --papel: #0A0910; --papel-2: #1B1A23; --papel-3: #21202A; --banda: #2F2D3B; --tinta: #F5F4F9; --tinta-2: #BCB9C8; --tinta-3: #8F8A9E; --linha: #383649; --linha-2: #514E61; --regua: #5A5768; --marca: #B57BFF; --marca-forte: #B57BFF; --marca-press: #8F4FE0; --marca-fraca: #221037; --marca-linha: #3D2159; --liquidado: #57CE87; --liquidado-fraca: #0E2418; --liquidado-borda: #1E432F; --hoje: #EFB248; --hoje-fraca: #2A1F0B; --hoje-borda: #463516; --vencido: #FF7C8D; --vencido-fraca: #2B1219; --vencido-borda: #4A1F28; --aberto: #9C98A9; --aberto-fraca: #1D1C25; --aberto-borda: #302E3A; /* As barras do gráfico do Painel — a explicação está no bloco claro. Aqui o fraco é ESCURO: contra papel preto, pouco contraste é escuro. */ --barra-fraca: #6A667B; --barra-forte: #C1BDCD; --barra-hoje: #BF851B; --avatar: #2D2B3B; /* 1,21:1 contra o bloco */ --avatar-tinta: #BDB8CC; /* A sombra do quadro fica MUITO mais densa no escuro (.7 contra .12) e ainda assim quase não aparece — é a conta que está escrita na declaração do claro. Ela fica porque é o que o desenho faz, e porque tirar produziria dois sistemas; o que separa o quadro lá é o tom. */ --sh-quadro: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px -14px rgba(0, 0, 0, .70); --sh-menu: 0 4px 12px rgba(0, 0, 0, .50); --sh-modal: 0 16px 48px rgba(0, 0, 0, .60); --sh-coluna: 6px 0 8px -6px rgba(0, 0, 0, .55); } /* ══════════════════════════════════════════════════════════════ Base obrigatória ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fonte); font-size: var(--fs-corpo); line-height: var(--lh-corpo); font-feature-settings: "lnum" 1; /* algarismos de mesma altura */ -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--marca) 22%, transparent); } /* Todo número de dinheiro é tabular e alinhado à direita. Sem exceção, em nenhuma tela. Desde 15/09/2026 esta regra faz uma segunda coisa: ela é A FRONTEIRA entre as duas fontes do sistema. `.num` é o número (Outfit); tudo o mais é texto (Nunito). Onde número e texto vivem no MESMO elemento — o chip "Parcial · restam R$ 300,00", o "R$" de campo de formulário — a classe não é usada e o trecho fica em Nunito inteiro, de propósito: trocar a fonte no meio de uma frase fica pior que o ganho. E o tabular aqui não é enfeite: sem ele o Outfit desalinha a coluna do DRE em 22px. Ver o cabeçalho deste arquivo. */ .num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; text-align: right; white-space: nowrap; } /* CAMPO DE FORMULÁRIO é a exceção que precisa ser escrita. Controle de formulário não herda a fonte do documento — o navegador impõe a dele —, e por isso `.campo-caixa` em componentes.css declara `font-family: inherit`. Essa regra tem a MESMA especificidade do `.num` acima e componentes.css carrega DEPOIS de tokens.css, então ela vencia: os 16 campos escritos `class="campo-caixa num"` (o valor da baixa, o saldo inicial, o % do rateio, os dias do cartão, o "Valor cobrado pelo banco") pediam Outfit e recebiam Nunito — o mesmo número saía com um desenho no campo e outro na tabela ao lado, no mesmo quadro, sem erro em lugar nenhum. Qualificar por elemento resolve por especificidade, não por ordem — e assim não depende de quem carrega primeiro. */ input.num, select.num, textarea.num { font-family: var(--fonte-num); } /* E O CONTRÁRIO: três lugares usam `.num` numa FRASE, só para encostá-la à direita — não para dizer que ela é dinheiro. "44 em aberto de 44", "44 lançamentos · vencidos de meses anteriores", "a pagar R$ 4.209,60 · a receber R$ 6.998,83". Pela regra escrita no topo deste arquivo, texto misturado com número fica no texto; aqui a fonte volta. (Cabeçalho de coluna NÃO entra nesta lista: "jan", "Principal", "Saldo hoje" ficam em Outfit de propósito, sobre a coluna de números que eles nomeiam.) */ /* Eram três; o `.v3-total-sub` morreu com a faixa de total das listagens em 21/09/2026. Classe sem markup citada AQUI é o pior lugar possível, e o parágrafo dez linhas abaixo diz exatamente isso. */ .topo-contador, .painel-dez-totais { font-family: var(--fonte); } /* O `.rotulo` — caixa alta, pequeno, espaçado — FOI REMOVIDO em 20/09/2026. Ele tinha um único usuário no sistema inteiro, o rótulo de grupo da barra lateral ("DIA A DIA"), e foi dali que ele saiu. Classe sem markup é código morto, e código morto num arquivo de tokens é pior: quem lê acredita que a caixa alta é uma convenção viva do sistema. O cabeçalho de TABELA tem regra própria em componentes.css, com tamanho e espaçamento próprios — ver O cabeçalho de coluna no CLAUDE.md. */ /* Só para leitor de tela. O `left/top: 0` não é enfeite: sem ele, o elemento absoluto fica na POSIÇÃO QUE TERIA NO FLUXO — e dentro de uma tabela larga isso é fora da tela, empurrando a rolagem horizontal da PÁGINA inteira mesmo medindo 1×1px. Foi o defeito de 29/08 na tela de Excluídos (308px de estouro) e de novo em Recorrências no celular (305px, com o corpo cabendo em 375px). Ancorar o rolo resolvia um caso por vez; isto resolve todos, inclusive os que ainda não existem. Invisível de qualquer jeito (clip-path), e o leitor de tela segue a ordem do DOM, não a posição. */ .so-leitor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ══════════════════════════════════════════════════════════════ V3 · Contas a receber por outro caminho — aprovado em 17/08/2026 docs/design/V3/. Cola depois do bloco da v1. Sete linhas: três mudam de valor, três entram, e --banda ganha um uso novo sem mudar de valor. Nenhuma cor de marca, de estado ou de tinta é alterada; nenhum token da v1 é apagado. --tela e --bloco vinham da v2 e nunca tinham sido aplicados; entram aqui já com o valor da v3, que é um degrau mais fundo. ══════════════════════════════════════════════════════════════ */ :root { /* ══ O MENU · uma superfície escura que vive nos DOIS temas ═══ Leva 4, 15/09/2026. O menu deixa de ser --bloco e passa a ter cor própria: o mesmo preto no tema claro e no escuro, como a V4 desenhou. POR QUE UMA FAMÍLIA NOVA, e não trocar o valor de --bloco: nenhum token do sistema descrevia "superfície escura dentro do tema claro". Medido, os tokens do tema claro sobre este preto: --tinta dá 1,05, --tinta-2 dá 2,18, --marca dá 3,26 — nenhum chega aos 4,5 de texto. Não havia o que reaproveitar. Estes tokens são ACRESCENTADOS, não renomeados, que é o que a regra da casa protege. Eles NÃO são redeclarados no bloco do tema escuro, e isso é a entrega: o menu é o mesmo objeto nos dois temas. O que separa o menu da tela continua sendo a BORDA (--linha-2), que mede 11,00 contra o preto no claro e 2,42 no escuro. Foi a saída escolhida entre as duas: a borda faz o trabalho, e o preto fica igual dos dois lados. O item aceso usa o --rail-marca duas vezes: cheio, no anel de 2px, e no miolo, sob o --rail-ativo-veu. */ /* O preto é o da paleta oficial. Os dois degraus escuros (o ativo e o hover) guardam, contra ele, o mesmo contraste que tinham contra o preto anterior, na mesma matiz. */ --rail: var(--paleta-preto); /* o menu, nos dois temas */ --rail-ink: #FFFFFF; /* marca, nome do usuário, item ativo 19,44 */ --rail-ink-2: #ACA7BC; /* item, e-mail, contador, seção, Sair 8,34 */ --rail-ativo: #211C2D; /* degrau escuro sobre o menu 1,17 */ /* O VÉU DO ITEM ACESO: o preto do menu a 62% por cima do degradê da marca, que aparece por baixo e pinta o item inteiro, como no desenho. Medido sobre os 101 pontos do --rail-marca: o branco do texto fica em 10,16 ou mais, e o --rail-foco em 3,51 ou mais. */ --rail-ativo-veu: rgba(13, 13, 13, .62); --rail-hover: #191521; /* o degrau do hover, abaixo do ativo 1,08 */ --rail-linha: #2A2536; /* divisórias dentro do menu 1,31 */ /* O ANEL DE FOCO DENTRO DO MENU. O --foco do tema claro mede 3,26 contra o trilho, 3,01 sobre o hover e 2,78 sobre o degrau escuro, este abaixo do mínimo de 3,0 de contorno de controle; este é o roxo da marca do tema escuro, que mede 6,70 sobre o trilho, 6,19 sobre o hover, 5,71 sobre o degrau escuro e 3,51 sobre o miolo do item aceso. Um valor só, porque o trilho é o mesmo nos dois temas. */ --rail-foco: #B57BFF; /* o anel de foco dos controles do menu 6,70 */ /* O VERMELHO DO VENCIDO SOBRE O MENU: o mesmo do --vencido do tema escuro, porque o menu é preto nos dois temas. Mede 7,88 sobre o trilho e 7,28 sobre o hover. */ --rail-vencido: #FF7C8D; /* o número de vencidos de A pagar e A receber */ /* O --rail-mais e o --rail-menos viveram um dia. Nasceram em 21/09/2026 porque o verde e o vermelho do tema claro afundavam sobre o trilho preto (2,96), e morreram em 22/09 porque a regra de cor dela tirou o verde e o vermelho daqueles lugares: a variação, o saldo negativo e a projeção negativa passaram a usar a cor normal do texto, com o sinal dizendo o sentido. Token sem uso é a mesma dívida do CSS sem uso — saiu junto. */ /* ── A PARTE JÁ LIQUIDADA DENTRO DA BARRA (21/09/2026) ──────── Ela é um CLAREAMENTO, e não uma cor — e por isso o valor é o mesmo nos dois temas, como os do trilho aqui em cima. O motivo é a legenda, que diz "a parte mais clara de cada barra". Com as barras na paleta de estado isso era fácil; com os dois cinzas do desenho, um deles é claro e o outro é escuro DENTRO DO MESMO TEMA, e a ordem se inverte de um tema para o outro. Qualquer cor chapada seria "mais clara" em uns casos e mais escura em outros — e a frase deixaria de ser verdade em metade do gráfico. Branco a 45% é sempre mais claro que o que está embaixo, nos quatro casos. */ --barra-pago: rgba(255, 255, 255, .45); /* ── AS FATIAS DA FITA SOBRE O PRETO (V5, 19/09/2026) ───────── A fita de proporção da tela de Contas correntes é UMA barra contínua sobre o --rail, dividida por conta. Quatro degraus de claro, do branco ao quase-fundo, para as fatias se distinguirem sem cor de significado — e a cor NUNCA é a única portadora: a legenda embaixo escreve o nome da conta e o porcento de cada uma. Os dois primeiros são os tons de tinta do menu, que já existem; os dois últimos descem a escala e ainda ficam acima do --rail-linha, que é o trilho vazio da fita. Medido (razão WCAG) sobre o --rail e sobre o trilho, que é o que decide se a fatia se vê quando a vizinha está vazia ao lado: sobre o rail sobre o trilho fatia 1 #FFFFFF 19,44 14,83 fatia 2 #ACA7BC 8,34 6,36 fatia 3 #6E6982 3,71 2,83 fatia 4 #46414F 1,97 1,50 (trilho #2A2536 1,31) */ --rail-fatia-1: var(--rail-ink); --rail-fatia-2: var(--rail-ink-2); --rail-fatia-3: #6E6982; --rail-fatia-4: #46414F; /* ── A GEOMETRIA DO CARTÃO (V5, 15/09/2026) ─────────────────── O menu deixou de ser uma faixa colada na borda e virou um CARTÃO FLUTUANTE: 12px de folga em cima, embaixo e à esquerda, e canto de 24px. É o desenho da V5, que manda em posição e tamanho. POR QUE ESTES DOIS RAIOS SÃO TOKENS PRÓPRIOS e não degraus novos da escala geral: 24 e 12 são usados UMA vez cada, no menu, que é o único objeto flutuante do sistema. Acrescentá-los a --r-1/--r-2 criaria dois degraus que nenhuma outra peça usa — e a regra da casa é que tamanho usado uma vez não vira token da escala. Aqui eles moram na família do menu, que é onde fazem sentido. */ --rail-folga: 12px; /* o vão em volta do cartão */ --rail-raio: 24px; /* o canto do cartão */ --rail-item-raio: 12px; /* o canto do item; o anel usa +2 */ /* A PALETA OFICIAL DA MARCA: ver a seção de mesmo nome no CLAUDE.md. O único lugar destes valores; quem pinta a marca usa as variáveis. O degradê vai do laranja ao roxo, contínuo, da ponta esquerda à direita da peça. Na tela de entrada, ele pinta a faixa e as linhas, que são decoração, sem texto em cima. */ --paleta-laranja: #FF8A00; --paleta-rosa: #FF2D7A; --paleta-roxo: #8A2BE2; --paleta-preto: #0D0D0D; --paleta-degrade: linear-gradient(90deg, var(--paleta-laranja), var(--paleta-rosa), var(--paleta-roxo)); /* O --rail-marca é o degradê do desenho, e pinta o item aceso do menu: é uma das variações de propósito da seção "A paleta oficial da marca". */ --rail-marca: linear-gradient(100deg, #FD6700 0%, #F3303B 20%, #F22148 34%, #D33CC4 60%, #B35FD8 78%, #B57BFF 100%); /* O DEGRADÊ DA MARCA — e a proibição de gradiente CAIU, em 15/09/2026. O motivo: a proibição foi escrita em agosto pensando na marca antiga, que não era gradiente; a marca nova é gradiente inteira, e a regra perdeu o motivo. A regra vinha do documento de design V1, de 15/08/2026 — "Degradê, em qualquer lugar. Fundo, botão, gráfico, cabeçalho." — e do checklist do mesmo documento, "Zero degradê. Busque `gradient` no CSS e não ache nada." Nenhum dos dois textos escrevia o motivo, e foi preciso escrevê-lo para poder revogá-lo. AS TRÊS ÚLTIMAS PARADAS SAÍRAM DO DESENHO, pela regra de sempre: onde a V4 reprova, o valor se ajusta até passar. O degradê original terminava em #BE03AD, #9500B7 e #5B01EB, e sobre o preto do menu o pior ponto dele media 2,64 — abaixo do mínimo de 3,0 de elemento gráfico. Clareadas, o pior ponto mede 4,62 contra o preto de hoje. E O CONFERIDOR APRENDEU A JULGAR RAMPA: medido com 1.001 pontos, o pior ponto de um gradiente NÃO cai numa parada declarada (caiu a 96,0% e a 41,5% nos dois casos medidos). Conferir a lista de cores deixaria passar o pior pedaço; por isso ele varre. */ /* ── RAIO · A GRAMÁTICA DOS CANTOS (V5, 19/09/2026) ────────── A recusa da pílula, de 15/09, foi revogada nesta data. E a medição que a leva fez mostrou que a recusa e a revogação discutiam a coisa errada: **o desenho não é pílula em tudo.** Emparelhei altura e raio de todos os controles dos 15 arquivos do desenho. A forma mais comum do conjunto inteiro, 58 vezes, é um controle de 40px com canto de 12 — que não é pílula. A pílula aparece 32 vezes. Separando por elemento, a divisão é limpa e não tem exceção: altura 40 · raio 12 → e