/* =========================================================================== 01 · TOKENS A linguagem visual do sistema declarada num lugar só. Nada aqui pinta nada: são apenas nomes para valores que as outras camadas consomem. POR QUE ESTA CAMADA EXISTE (medido em 08/10/2026, antes da divisão): · 336 ocorrências de hex no sistema, e a maioria repetia o valor exato de uma variável que já existia. Só o #D4AF37 aparecia 72 vezes, com `--gold` declarado desde o primeiro dia · 157 ocorrências de rgba em 47 combinações, sendo 10 níveis de transparência do MESMO dourado. Trocar a cor da marca exigia caçar os 10, em 14 arquivos diferentes · 22 tamanhos de fonte distintos em 384 usos, mas 8 deles cobrem 84% · 30 valores de espaçamento em 1.050 usos, 8 deles cobrem 84% REGRA DE OURO DESTA CAMADA: valor novo não entra aqui sem um uso. Token sem consumidor é o que produziu `--surface` e `--text-secondary`, que ficaram anos sem ninguém chamar. =========================================================================== */ :root { /* ── Canais RGB ───────────────────────────────────────────────────────── O canal vive separado do hex porque as escadas de transparência são montadas a partir dele: `rgba(var(--gold-rgb), 0.15)`. É o único jeito de a cor da marca ter UM lugar. Sem isso, mudar o dourado significa reescrever 10 triplas 212,175,55 à mão, e esquecer uma não dá erro nenhum: só deixa uma sombra da cor velha na tela. */ --gold-rgb: 212, 175, 55; --gold-dark-rgb: 184, 134, 11; --danger-rgb: 239, 68, 68; --success-rgb: 16, 185, 129; --warning-rgb: 245, 158, 11; --neutro-rgb: 107, 114, 128; --preto-rgb: 0, 0, 0; --branco-rgb: 255, 255, 255; /* O fundo da aplicação também tem canal próprio: as telas públicas usam o cabeçalho translúcido sobre ele (0.9, 0.94 e 0.98). */ --dark-rgb: 10, 10, 10; /* ── Cores sólidas ──────────────────────────────────────────────────── */ --gold: #D4AF37; --gold-dark: #B8860B; --gold-light: #F4D03F; --secondary: #10B981; --warning: #F59E0B; --danger: #EF4444; /* O vermelho de TEXTO sobre fundo translucido escuro. O --danger cheio reprova nos tres fundos onde a etiqueta de atraso aparece (4,12 / 3,38 / 4,16 contra 4,5 exigido); este passa nos tres (5,54 / 4,55 / 5,59). Existe separado porque o --danger continua sendo a cor de FUNDO de botao e badge, onde clarear estragaria o contraste do texto escuro. */ --danger-texto: #F37373; --dark: #0A0A0A; --dark-lighter: #141414; --dark-card: #0F0F0F; --dark-border: #252525; --text: #E5E5E5; /* #888888 reprovava sobre os fundos coloridos escuros (3,59:1 no card de cobranca, 4,41:1 no card vermelho) e ficava em 4,32:1 sobre --dark-border. Clareado, passa em TODOS os fundos do sistema e melhora onde ja passava: 5,58 para 7,04 sobre o fundo da pagina. Como o tema e dark-only, clarear aqui nunca piora. */ --text-muted: #9A9A9A; /* Fundos pontuais que não são "a paleta", mas também não são acidente: o gradiente do rodapé da sidebar e o do cabeçalho dela. */ --dark-deep: #050505; --dark-header-a: #1a1a1a; --dark-header-b: #0d0d0d; /* ── Escada de transparência do dourado ───────────────────────────────── Os 10 níveis que o sistema realmente usa, medidos. Eles NÃO foram inventados nem arredondados para uma escala bonita: arredondar 0.08 para 0.1 mudaria o fundo de 5 elementos, e esta fase não pode mudar pixel nenhum. A escala existe para ser podada depois, com os dois números na mão. */ --gold-a03: rgba(var(--gold-rgb), 0.03); --gold-a05: rgba(var(--gold-rgb), 0.05); --gold-a08: rgba(var(--gold-rgb), 0.08); --gold-a10: rgba(var(--gold-rgb), 0.1); --gold-a12: rgba(var(--gold-rgb), 0.12); --gold-a15: rgba(var(--gold-rgb), 0.15); --gold-a20: rgba(var(--gold-rgb), 0.2); --gold-a25: rgba(var(--gold-rgb), 0.25); --gold-a30: rgba(var(--gold-rgb), 0.3); --gold-a40: rgba(var(--gold-rgb), 0.4); /* Um nível do dourado ESCURO, usado no realce de linha de tabela. */ --gold-dark-a05: rgba(var(--gold-dark-rgb), 0.05); /* ── Transparência das cores de estado ───────────────────────────────── Mesmo princípio. Os níveis são os que existem hoje, nada a mais. */ --danger-a08: rgba(var(--danger-rgb), 0.08); --danger-a10: rgba(var(--danger-rgb), 0.1); --danger-a15: rgba(var(--danger-rgb), 0.15); --danger-a20: rgba(var(--danger-rgb), 0.2); --danger-a30: rgba(var(--danger-rgb), 0.3); --danger-a40: rgba(var(--danger-rgb), 0.4); --danger-a50: rgba(var(--danger-rgb), 0.5); --danger-a90: rgba(var(--danger-rgb), 0.9); --success-a10: rgba(var(--success-rgb), 0.1); --success-a15: rgba(var(--success-rgb), 0.15); --success-a20: rgba(var(--success-rgb), 0.2); --success-a30: rgba(var(--success-rgb), 0.3); --success-a40: rgba(var(--success-rgb), 0.4); --warning-a15: rgba(var(--warning-rgb), 0.15); --warning-a20: rgba(var(--warning-rgb), 0.2); --neutro-a20: rgba(var(--neutro-rgb), 0.2); /* ── Véus de preto e branco ───────────────────────────────────────────── Preto é sombra e cortina de modal; branco é realce sobre o dourado nas telas públicas. */ --preto-a20: rgba(var(--preto-rgb), 0.2); --preto-a30: rgba(var(--preto-rgb), 0.3); --preto-a40: rgba(var(--preto-rgb), 0.4); --preto-a50: rgba(var(--preto-rgb), 0.5); --preto-a60: rgba(var(--preto-rgb), 0.6); --preto-a70: rgba(var(--preto-rgb), 0.7); --preto-a90: rgba(var(--preto-rgb), 0.9); --branco-a05: rgba(var(--branco-rgb), 0.05); --branco-a10: rgba(var(--branco-rgb), 0.1); --branco-a20: rgba(var(--branco-rgb), 0.2); --branco-a30: rgba(var(--branco-rgb), 0.3); --branco-a80: rgba(var(--branco-rgb), 0.8); /* ── Tipografia ───────────────────────────────────────────────────────── A escala sai dos 8 tamanhos que cobrem 84% dos 384 usos medidos: 13px(70) 14px(65) 20px(44) 12px(36) 16px(31) 18px(31) 11px(29) 24px(16). Os nomes descrevem o PAPEL, não o tamanho, porque é o papel que se mantém quando alguém decidir afinar a escala. Os 14 tamanhos restantes (10, 15, 22, 26, 28, 32, 34, 36, 48, 50, 56, 64, 72 e o clamp do valor do card) somam 16% e são ornamento de tela específica: ícone grande de estado vazio, número de hero, código de erro 404. Eles NÃO entram na escala; viram literal na camada que os usa, que é o lugar honesto para ornamento. */ --txt-nota: 11px; /* th em caixa alta, badge, subtítulo do logo */ --txt-mini: 12px; /* status, dica de formulário, CPF */ --txt-rotulo: 13px; /* form-label, stat-label, texto de apoio */ --txt-corpo: 14px; /* td, botão, item de menu: o texto padrão */ --txt-destaque: 16px; /* ícone de menu, card-title no celular */ --txt-titulo: 18px; /* card-title, modal-title */ --txt-titulo-g: 20px; /* logo, total do painel de cobrança */ --txt-pagina: 21px; /* título da página na topbar. Eram 24px, baixado a pedido do dono em 08/10/2026 */ --fonte: 'Inter', sans-serif; /* O dinheiro declara monospace como segunda opção, e por isso continua caindo na Inter: é o que está no ar e não se mexe nesta fase. */ --fonte-num: 'Inter', monospace; --peso-normal: 500; --peso-medio: 600; --peso-forte: 700; --peso-max: 800; /* ── Espaçamento ──────────────────────────────────────────────────────── Grade de 4px. Os 8 degraus abaixo cobrem 84% dos 1.050 usos medidos: 8px(204) 12px(145) 24px(137) 16px(128) 20px(103) 0(97) 4px(41) 32px(23). O QUE FAZER COM OS 9 VALORES FORA DA GRADE (5, 6, 10, 14, 18, 1, 2, 3, 7px, somando 112 usos, 10,7%): eles NÃO ganham token. Criar `--esp-1-25: 5px` seria carimbar a inconsistência com nome oficial e garantir que ela nunca saia. A regra é outra: · 1, 2 e 3px NÃO são espaçamento, são ajuste óptico de 1 a 3 pixels (deslocar um ícone, encostar uma legenda). Ficam literais e assim se declaram, com comentário onde não for óbvio · 5, 6, 7, 10, 14 e 18px são "quase": cada um fica a 1 ou 2px de um degrau. Eles encostam na grade quando alguém converter a tela, uma por uma, OLHANDO. Não nesta fase: encostar 32 ocorrências de 5px em 4px muda a tela, e esta fase não pode mudar a tela Enquanto não encostam, continuam literais. Literal é visível na busca; token é invisível. */ --esp-0: 0; --esp-1: 4px; --esp-2: 8px; --esp-3: 11.5px; /* fora da escala de 4 por decisão do dono, em 08/10/2026 */ --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-15: 60px; /* ── Raio ─────────────────────────────────────────────────────────────── 11 valores em 114 usos; estes 5 cobrem 83%: 8px(33) 12px(30) 16px(13) 50%(10) 4px(7). */ --raio-xs: 4px; --raio-sm: 6px; --raio: 8px; --raio-md: 12px; --raio-lg: 16px; --raio-pilula: 20px; /* badge de status: o valor que está no ar */ --raio-circulo: 50%; /* ── Duração ──────────────────────────────────────────────────────────── 8 formas de transição em 34 usos, e as diferenças são de digitação, não de intenção: `all 0.2s` e `all 0.2s ease` são a MESMA curva (ease é o padrão). Sobram duas durações de verdade. */ --dur-rapida: 0.2s; --dur-media: 0.3s; --dur-lenta: 1s; /* barra de progresso que enche */ --curva: ease; /* ── Camadas (z-index) ────────────────────────────────────────────────── Os 5 valores que existem, arrumados em ordem. São poucos e não brigam, mas estavam espalhados como números mágicos: um `z-index: 99` solto não conta a história de que ele é o véu ABAIXO da sidebar. */ --z-base: 1; --z-topbar: 50; /* A barra de navegação do celular fica ACIMA do conteúdo e ABAIXO do véu: com a gaveta aberta ela precisa escurecer junto com o resto do fundo. Qualquer valor entre 51 e 98 serviria; 90 deixa folga dos dois lados para o dia em que algo precisar entrar no meio. */ --z-barra-inf: 90; --z-veu: 99; /* véu que escurece o fundo quando a gaveta abre */ --z-sidebar: 100; /* precisa ficar acima do véu */ --z-modal: 1000; /* modal e tooltip */ /* ── Apelidos ─────────────────────────────────────────────────────────── Estes existem para o `var()` escrito à mão dentro de `style=` nas views não ficar inválido. Quando um `var()` não resolve, o navegador DESCARTA a declaração inteira em silêncio: foi assim que os cards de Comissões apareceram sem fundo e sem borda. É rede de proteção, não paleta. */ --surface: var(--dark-card); --surface-light: var(--dark-lighter); --border: var(--dark-border); --success: var(--secondary); --text-primary: var(--text); --text-secondary: var(--text-muted); /* `--primary*` é o nome antigo de `--gold*`. Deixou de repetir o hex e passou a apontar para ele: um lugar só para a cor da marca, e nenhum `style="color: var(--primary)"` de view antiga quebra. */ --primary: var(--gold); --primary-dark: var(--gold-dark); --primary-light: var(--gold-light); /* `--gold-dim` é o nome que as camadas já usavam para o fundo dourado de 15%. Vira apelido do degrau da escada em vez de uma segunda cópia. */ --gold-dim: var(--gold-a15); }