/* ========================================================================== static/css/tokens.css — a escala do design system ESTE ARQUIVO NÃO INVENTA NADA. Ele registra o que o projeto JÁ pratica. A varredura de 111 folhas de estilo mostrou que as 10 cores mais usadas são todas da mesma família (slate) e que a borda #e2e8f0 é sempre a mesma em 485 lugares — havia coerência, mantida à mão, sem lugar onde estivesse escrita. O custo aparecia na dispersão: 118 tamanhos de fonte, 144 sombras e 20 raios distintos, entre eles quatro tamanhos indistinguíveis a olho (.78rem / .8rem / .82rem / 0.8125rem) disputando o mesmo papel. ORDEM DE CARGA: logo depois do bootstrap e ANTES de tema_componentes.css. Só declara custom properties — não pinta nada sozinho, então adicioná-lo não muda uma tela sequer. COMO USAR: sempre com fallback — `var(--txt-3, #5b6777)`. O fallback não é adorno: as telas standalone (chamada, meu_horario, admin_dashboard…) não carregam este arquivo, e sem ele a declaração inteira seria descartada pelo browser. Enquanto o shell não for unificado (fase 3), o fallback é o que torna a adoção segura em qualquer template. ADOÇÃO: incremental, nunca em varredura. Tela que for tocada por outro motivo migra os literais; o resto fica. Trocar 4.834 literais de uma vez seria um diff impossível de revisar e sem ganho proporcional. ========================================================================== */ :root { /* ── NEUTROS ──────────────────────────────────────────────────────────── Família slate, na intensidade que o projeto já usava. Os nomes são por PAPEL, não por tom: quem escreve CSS decide "texto secundário", não "cinza 500". */ /* Superfícies */ --sup-0: #ffffff; /* card, modal, linha de tabela */ --sup-1: #f8fafc; /* fundo de página, cabeçalho de tabela */ --sup-2: #f1f5f9; /* faixa alternada, estado hover, chip */ /* Traços */ --borda: #e2e8f0; /* a borda padrão — 485 usos no projeto */ --borda-forte:#cbd5e1; /* divisor com mais presença, hover */ /* ── TEXTO EM SUPERFÍCIE CLARA ────────────────────────────────────────── O contraste está anotado porque é o critério de escolha, não curiosidade. Abaixo de 4,5:1 nenhum destes serve para texto normal (WCAG 2.1 AA). ⚠️ --txt-3 FOI DE #64748b PARA #5b6777 em 02/09/2026, e o motivo é a SUPERFÍCIE. O 4,76:1 anotado era medido contra BRANCO — mas o fundo mais comum do produto não é branco: o `.main-content` do shell pinta #f1f5f9, e ali o mesmo #64748b cai para 4,34:1. Medido no navegador, com o fundo efetivo, em uma tela de cada módulo: 22 classes reprovando, 14 delas o MESMO par #64748b/#f1f5f9. Não eram 14 defeitos, era um. #5b6777 mede 5,75:1 sobre branco e 5,25:1 sobre #f1f5f9 — passa nas duas superfícies. Travado por `configuracoes/test_piso_de_texto.py`. --txt-3 é o PISO. Antes deste arquivo, o papel de "texto terciário" era ocupado por #94a3b8, que mede 2,56:1 sobre branco — reprovado, e ainda assim aplicado em 313 declarações (labels, dicas, estados vazios). Era o texto que sumia primeiro no celular sob sol, e para quem já enxerga mal. Se precisar de algo mais claro que --txt-3 em fundo claro, o problema é a hierarquia da tela, não a cor. */ --txt-1: #1e293b; /* 14,63:1 — título, número em destaque */ --txt-2: #475569; /* 7,58:1 — corpo */ --txt-3: #5b6777; /* 4,76:1 — label, dica, meta. PISO. */ /* ── TEXTO EM SUPERFÍCIE ESCURA (sidebar, faixa navy) ─────────────────── Aqui #94a3b8 é a escolha CERTA: sobre --sup-inv ele mede 7,0:1. É a mesma cor reprovada acima — o que muda é o fundo. Por isso a troca do cinza tem de ser dirigida, nunca em substituição cega. */ --sup-inv: #0f172a; /* fundo do sidebar */ --txt-inv-1: #f8fafc; /* texto principal sobre escuro */ --txt-inv-2: #94a3b8; /* secundário sobre escuro — 7,0:1 */ /* ── SEMÂNTICAS ───────────────────────────────────────────────────────── Duas intensidades por papel: a -texto passa em 4,5:1 sobre fundo claro, a base é para preenchimento e borda. Confundir as duas é como o verde #16a34a virou texto em 45 lugares, medindo 3,30:1. */ --ok: #16a34a; --ok-texto: #15803d; /* 5,02:1 */ --ok-fundo: #f0fdf4; --alerta: #f59e0b; --alerta-texto: #b45309; /* 4,88:1 */ --alerta-fundo:#fffbeb; --erro: #dc2626; --erro-texto: #b91c1c; /* 6,14:1 */ --erro-fundo: #fee2e2; /* ── TIPOGRAFIA ───────────────────────────────────────────────────────── Sete degraus cobrem o produto inteiro. Os quatro tamanhos que brigavam entre .78 e .82 colapsam em --fs-3, que é o corpo pequeno dominante. A pilha começa por system-ui de propósito. 'Segoe UI' vinha primeiro (em três grafias diferentes), e é fonte do Windows: no Android, iPhone e Mac o sistema caía no fallback, então o produto tinha métrica tipográfica diferente por dispositivo. Com system-ui à frente, cada sistema usa a própria fonte de interface — a escolha passa a ser deliberada. A Inter entra na frente (hospedada no projeto — ver css/inter.css) e o system-ui permanece como rede de segurança: se o woff2 não carregar, a tela cai na fonte de interface do sistema em vez de ficar sem estilo. A troca resolve o mesmo problema que motivou a pilha atual, e melhor: agora a métrica é idêntica em TODOS os sistemas, não só coerente dentro de cada um. */ --fonte: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-1: .68rem; /* badge, legenda de gráfico */ --fs-2: .75rem; /* meta, texto auxiliar */ --fs-3: .82rem; /* corpo pequeno — o mais usado do projeto */ --fs-4: .9rem; /* corpo */ --fs-5: 1rem; /* base */ --fs-6: 1.15rem; /* título de card */ --fs-7: 1.4rem; /* título de seção */ /* ⚠️ OS TRÊS DEGRAUS DE EXIBIÇÃO entraram em 04/09/2026, quando o CSS de aplicação foi consolidado. Não são invenção: o projeto já pintava 24, 25.6, 26, 27.2, 28, 28.8, 30, 30.4, 32, 35.2, 36, 38.4, 40, 44 e 48px em números de KPI, placar e percentual — quinze valores para três papéis. Sem degrau declarado acima de 1.4rem, cada tela escolhia o seu. */ --fs-8: 1.5rem; /* número de KPI, placar */ --fs-9: 2rem; /* número grande de painel */ --fs-10: 2.5rem; /* número de destaque, resultado */ /* ── ELEVAÇÃO ─────────────────────────────────────────────────────────── Quatro degraus no lugar de 144 sombras distintas. Todas com a mesma tinta (navy translúcido) — sombra cinza-neutra sobre fundo levemente azulado suja a cor. */ --sombra-1: 0 1px 3px rgba(15, 23, 42, .06); /* card em repouso */ --sombra-2: 0 2px 8px rgba(15, 23, 42, .08); /* card em hover */ --sombra-3: 0 6px 20px rgba(15, 23, 42, .10); /* dropdown, popover*/ --sombra-4: 0 12px 32px rgba(15, 23, 42, .14); /* modal, drawer */ /* ── ESPAÇAMENTO ──────────────────────────────────────────────────────── ⚠️ REGISTRA A ESCALA QUE O PROJETO JÁ PRATICA — não inventa uma. Medido em 03/09/2026 sobre `margin`/`padding`/`gap` de todo o CSS do repo: 4.371 usos, 44 valores distintos. Os oito abaixo são os múltiplos de 4 de fato usados e respondem por 57% do total, com 16px, 8px e 12px liderando (39% somados). ⚠️ O QUE ESTA ESCALA NÃO É: uma varredura. Os fora-da-escala existentes — 10px (9,6%), 14px (7,3%), 6px (5,7%), 2px, 18px, 3px — FICAM. Trocar 2.122 declarações de uma vez daria diff irrevisável, mudaria o visual de telas que ninguém pediu para mexer e, no caso dos gaps de 12/14px, o próprio CLAUDE.md já registra que unificar "mexeria em sete telas para ganhar nada visível". Adoção é INCREMENTAL, como a dos outros tokens: tela tocada por outro motivo migra a dela, para o valor MAIS PRÓXIMO. ⚠️ E, como todo token daqui, sempre com fallback: `var(--esp-4, 16px)`. Sem ele o browser descarta a declaração inteira onde o token não existe — e há 14 telas que não recebem este arquivo (PDF, e-mail, site público, comprovante do pagador). */ /* ⚠️ `--esp-0` NÃO é "meio degrau": é a faixa de AJUSTE FINO — o recuo de 1 a 3px que aparece em selo, chip e alinhamento óptico. Medido em 04/09/2026, o projeto usava 0.3, 0.8, 1, 1.6, 1.9, 2, 2.4, 2.9 e 3px: nove valores para o mesmo gesto, com diferenças que ninguém enxerga. Deixá-los de fora da escala mantinha um terço dos valores distintos de cada tela sem nenhum ganho. */ --esp-0: 2px; /* ajuste fino: selo, chip, alinhamento */ --esp-1: 4px; /* respiro mínimo, ícone↔texto */ --esp-2: 8px; /* dentro de um controle */ --esp-3: 12px; /* entre itens de uma lista */ --esp-4: 16px; /* padrão: dentro de um cartão */ --esp-5: 20px; /* recuo do conteúdo no shell */ --esp-6: 24px; /* entre blocos de uma tela */ --esp-7: 32px; /* entre seções */ --esp-8: 48px; /* respiro de página */ --esp-9: 64px; /* entre seções de uma página longa */ --esp-10: 80px; /* respiro de bloco de página pública */ /* ── RAIO ─────────────────────────────────────────────────────────────── Quatro papéis. Resolve também o par 999px/99px, que fazia a mesma pílula em dois arquivos com valores diferentes. ⚠️ A ESCALA DECLARADA NÃO DESCREVE A PRATICADA, e o registro é para que a adoção não vire chute. Medido em 03/09/2026 sobre 1.053 declarações de `border-radius`: 12px (21,5%), 10px (19,0%), 8px (17,9%), 6px (11,7%), 50% (10,2%), 20px (6,1%), 4px (4,5%) — e `--raio-3` (14px) cobre 2,3%. Ou seja, os dois valores MAIS usados do projeto não têm token. ⚠️ E MESMO ASSIM OS DEGRAUS NÃO MUDAM. Trocar `--raio-3` de 14 para 12px reescreveria o canto de toda tela que já usa o token, para resolver um problema que ninguém vê. O que muda é a REGRA DE ADOÇÃO, abaixo — tela tocada por outro motivo migra a dela, para o degrau mais próximo: 4px, 6px → --raio-1 (6px) 8px, 10px → --raio-2 (10px) 12px, 14px → --raio-3 (14px) ⚠️ 12→14 é o único de +2px 16px, 20px → --raio-3 ou fica literal, se a tela precisar 99px, 999px → --raio-pill 50% → FICA `50%`: círculo é outra coisa que raio em px, e não há drift possível — só existe uma forma de escrever. Token ali seria ruído. */ --raio-1: 6px; /* input, badge */ --raio-2: 10px; /* botão, card pequeno */ --raio-3: 14px; /* card, modal */ --raio-pill: 999px; /* pílula, avatar */ /* ── MOVIMENTO ────────────────────────────────────────────────────────── O projeto já convergia para .15s; o que variava era a notação (.15s e 0.15s conviviam, sinal de copiar-colar de fontes diferentes). */ --transicao: .15s ease; --transicao-lenta: .28s cubic-bezier(.4, 0, .2, 1); /* drawer, sidebar */ } /* ══════════════════════════════════════════════════════════════════════════ BREAKPOINTS — convenção, não variável `var()` NÃO funciona em `@media`: a media query é avaliada antes da cascata, então não há como tokenizar isto em CSS puro. Fica como convenção escrita, e o lugar de cobrá-la é a revisão. O projeto tem hoje 25 valores distintos (768, 640, 576, 480, 900, 992, 1100, 860, 820, 760, 720, 680, 600, 580, 560, 400, 360, 1024, 1200, 1280…), o que faz o layout assentar em pontos diferentes por tela ao arrastar a janela. Os cinco abaixo são os do Bootstrap 5.3, que já está carregado: 576px celular grande 768px tablet retrato — o mais usado (38 das ~120 media queries) e o ponto em que o sidebar vira drawer. Se houver UM só breakpoint numa tela, é este. 992px tablet paisagem / notebook pequeno 1200px desktop 1400px desktop grande Breakpoint novo fora desta lista precisa de justificativa no comentário. ══════════════════════════════════════════════════════════════════════════ */