/* ══════════════════════════════════════════════════════════════════════════
tema.css — FONTE ÚNICA das cores do app (Bloco 0 do tema claro/escuro)
Gestor Financeiro Pessoal · criado em 29/09/2026
══════════════════════════════════════════════════════════════════════════
POR QUE ESTE ARQUIVO EXISTE
Até 29/09/2026 a mesma paleta estava escrita em 7 lugares (spa.css, auth.css
e 4 páginas públicas + inline). Cor é configuração externa, e neste projeto
"número que existe em dois lugares vai divergir" já aconteceu várias vezes
(contagem de testes 2×, nome do modelo da Groq, esc() do apóstrofo). Com o
tema claro a divergência sairia CARA: uma cópia esquecida = uma tela que não
troca de tema e ninguém percebe.
Agora spa.css (o app) e auth.css (as 4 telas de entrada) NÃO declaram cor
nenhuma — leem daqui.
⚠️ FORA DESTE ARQUIVO, DE PROPÓSITO: privacidade.html, planos.html,
assinar.html e apresentacao.html mantêm a paleta própria inline. São páginas
públicas (quem ainda não é cliente), ficaram fora do escopo do tema por
decisão do Lucas em 29/09/2026. Duplicação CONHECIDA — não é bug.
══════════════════════════════════════════════════════════════════════════
COMO O TEMA VAI FUNCIONAR (o interruptor em si é o Bloco 3)
O carrega data-tema="escuro" ou data-tema="claro", escrito por JS
ANTES da página pintar. O CSS só conhece esses dois valores.
⚠️ O "Automático" (seguir o aparelho) NÃO vira @media prefers-color-scheme
aqui. Quem resolve AUTO → claro|escuro é o JS, que grava o resultado no
data-tema. Motivo: com as duas coisas (media query + atributo) a mesma
pergunta teria duas respostas, e elas brigariam justamente no caso em que o
usuário escolheu o contrário do aparelho. Uma fonte só, como o resto daqui.
Sem JS (ou se ele falhar) não há data-tema → vale o :root → ESCURO, que é
exatamente o app de hoje. Falhar para o lado do que já existe é de propósito.
══════════════════════════════════════════════════════════════════════════
REGRA PARA QUEM MEXER AQUI DEPOIS
Token novo nasce COM USO REAL. Não pré-criar 40 papéis "que talvez sirvam":
token sem usuário não é testável, não aparece na tela e envelhece em silêncio
— o mesmo jeito que as tabelas do CLAUDE.md apodreceram. O Bloco 1 adiciona
cada papel no momento em que troca a cor escrita na mão que o exigiu.
══════════════════════════════════════════════════════════════════════════ */
/* ── TEMA ESCURO (padrão) ─────────────────────────────────────────────────
⚠️ Estes são os valores EXATOS que o app já usava antes deste arquivo
existir — o Bloco 0 não muda um pixel de propósito, para poder subir com
clientes usando. Se algo mudou de aparência, é erro, não melhoria. */
:root {
/* Superfícies — do fundo da página para cima */
--bg: #0e1118; /* fundo da página */
--surface: #161b24; /* painel, card, header */
--surface2: #1c2230; /* um degrau acima: linha destacada, campo, hover */
/* Linhas */
--border: #232b3a; /* divisória comum */
--border2: #2c3650; /* divisória com mais presença (foco, ativo) */
/* Texto, em ordem de importância */
--text: #f0f4f8; /* texto principal */
--sub: #8892a4; /* texto secundário, legenda */
--muted: #5a6478; /* texto apagado, placeholder */
/* Cor da marca — o verde esmeralda é a identidade do app */
--em: #10b981; /* destaque principal (botão, ativo, positivo) */
--em2: #059669; /* o mesmo verde mais fundo: hover, gradiente */
/* Significado — cada uma comunica um estado, não é enfeite */
--red: #ef4444; /* erro, vencido, negativo */
--green: #22c55e; /* pago, sucesso */
--amber: #f59e0b; /* atenção, pendente, "olha isto" */
--yellow: var(--amber);
/* ⚠️ --yellow e --amber eram a MESMA cor (#f59e0b) escrita duas vezes, com
8 usos cada. Ficaram amarradas: assim é impossível o tema claro mudar uma
e esquecer a outra — o selo de "atenção" apareceria em dois tons. Para
separá-las um dia, dê um valor próprio ao --yellow E confira os 8 usos. */
/* Apoio — usadas em gráfico, selo e detalhe */
--blue: #3b82f6;
--sky: #38bdf8;
--violet: #818cf8;
--rose: #f43f5e;
/* ── Tinta transparente ────────────────────────────────────────────────
rgba() não aceita hex, então a cor precisa existir também como trio
"r,g,b" para virar `rgba(var(--em-rgb), .1)`.
⚠️ Sim, é o mesmo valor escrito de dois jeitos — exatamente o que este
projeto já viu divergir várias vezes. A escolha foi deixar os dois
LEGÍVEIS e cobrar a coerência num teste (`tests/tema.test.js` confere que
todo `--X-rgb` bate com o `--X`), em vez de esconder o hex atrás de
`rgb(var(--X-rgb))`. Quem abrir este arquivo vê a cor, não uma conta. */
--em-rgb: 16,185,129;
--red-rgb: 239,68,68;
--green-rgb: 34,197,94;
--amber-rgb: 245,158,11;
--rose-rgb: 244,63,94;
--sky-rgb: 56,189,248;
/* ── Sombra e realce — os dois que MAIS quebram no tema claro ──────────
Sombra preta sobre fundo escuro quase não se vê; sobre branco fica suja.
E `rgba(255,255,255,.06)` de realce (o hover das listas) simplesmente
DESAPARECE no claro — branco sobre branco. Por isso viram papel: no claro
a sombra fica cinza-azulada e o realce inverte para preto. */
--sombra-rgb: 0,0,0;
--realce-rgb: 255,255,255;
/* ── Texto sobre fundo colorido saturado ───────────────────────────────
Branco sobre verde/vermelho forte funciona nos DOIS temas — este papel
provavelmente não muda, e é por isso que ele é um papel e não a paleta. */
--sobre-acento: #fff;
--sobre-acento-rgb: 255,255,255; /* mesma cor em trio, para texto meio apagado sobre o acento */
--sobre-acento-veu: rgba(0,0,0,0.25); /* pílula escura sobre fundo colorido */
--sobre-amber: #000; /* texto preto sobre o amarelo (botao comprovante) */
--sobre-em: #04140f; /* texto quase preto sobre o verde da marca */
--sobre-em-2: #042c20; /* ⚠️ MESMO papel, outro tom — herança */
/* ⚠️ `--sobre-em` e `--sobre-em-2` são o mesmo papel ("texto escuro sobre o
verde") em dois tons, herdados de quem escreveu cada tela. Unificar mexeria
em 2 pontos da interface, e o contrato do Bloco 1 é NÃO mudar pixel —
então juntar as duas é decisão do Bloco 2, tomada de propósito e vista. */
/* ── Estados: o mesmo significado aparece em 4 roupas diferentes ─────────
O app acumulou quatro jeitos de dizer "deu certo" / "deu erro", cada um
nascido numa tela diferente. Estão separados por COMPONENTE, não por cor,
porque é assim que se acha depois — e porque juntá-los mudaria a tela.
selo-* → o status quadradinho na lista (PAGO, PENDENTE…)
pill-* → a pílula arredondada de resumo
caixa-* → a caixa de aviso das telas de entrada
convite → o banner verde do cadastro por convite
Consolidar isto é candidato natural ao Bloco 2. */
--pill-ok-fg: #34d399;
--pill-aviso-fg: #fbbf24;
--caixa-ok-fg: #6ee7b7;
--caixa-info-fg: #7dd3fc;
--convite-ok-fg: #4ade80;
/* Cinza-azulado que não estava na paleta: legenda de gráfico, item de
notificação sem urgência, texto de apoio mais claro que o --sub. */
--neutro-escuro: #475569; /* seta discreta no card de metrica */
--neutro: #64748b; /* item inativo, módulo sem cor própria */
--neutro-claro: #94a3b8;
--texto-suave: #cbd5e1; /* entre o --text e o --sub: aviso, legenda forte */
/* ── SELOS: fundo escuro + texto pastel ────────────────────────────────
⚠️ ESTE É O CORAÇÃO DO TEMA CLARO. Estes pares NÃO se invertem sozinhos:
um texto verde-claro que se lê muito bem sobre verde-quase-preto fica
ILEGÍVEL sobre branco. No Bloco 2 cada par vira fundo claro + texto
escuro saturado — desenhado e com contraste medido, não calculado. */
--selo-ok-bg: #052e16;
--selo-ok-fg: #86efac;
--selo-ok-borda: #166534;
--selo-erro-bg: #450a0a;
--selo-erro-fg: #fca5a5;
--selo-erro-borda: #7f1d1d;
--selo-aviso-bg: #422006;
--selo-aviso-fg: #fdba74;
--selo-info-bg: #0c1a2e;
--selo-info-fg: #93c5fd;
--selo-info-borda: #1e3a5f;
--selo-neutro-bg: #1e293b;
/* ── Pílulas e textos de estado sobre tinta transparente ─────────────── */
--pill-venc-fg: #fb7185;
--perigo-fg: #f87171; /* texto de ação destrutiva (excluir, revogar) */
--info-fg: #60a5fa; /* ação/aviso informativo */
/* ── Roxo: é a cor de "admin" no app, e nunca esteve na paleta ────────── */
--roxo: #8b5cf6;
--grafico-rosa: #ec4899; /* 5a cor de serie/avatar */
--roxo-fg: #a78bfa;
--roxo-escuro: #7c3aed;
/* ── Hover e estados de botão ─────────────────────────────────────────── */
--realce-hover: #ffffff06; /* o clarão de 2% ao passar o mouse na lista */
--red-hover: #dc2626;
--green-hover: #16a34a;
--desfazer-bg: #92400e; /* botão "desfazer pagamento" */
--desfazer-fg: #d97706;
--pix: #00b4d8; /* ciano do botão PIX */
--borda-tabela: #1e293b44; /* divisória fininha das tabelas de relatório */
--grafico-grade: #334155; /* as linhas de grade dos graficos */
--grafico-borda: #1e293b; /* o anel que separa as fatias da rosca */
--banner-info-borda: #2563eb55; /* borda do banner azul de boas-vindas */ /* as linhas de grade dos gráficos */
/* ── Toast (a tarja de aviso que sobe na tela) ─────────────────────────── */
--toast-ok-bg: #166534;
--toast-ok-fg: #bbf7d0;
--toast-ok-borda: #22c55e44;
--toast-erro-bg: #7f1d1d;
--toast-erro-fg: #fecaca;
--toast-erro-borda: #ef444444;
}
/* ── MARCA — NÃO muda com o tema, de propósito ────────────────────────────
O gradiente do logo é identidade visual: tem que ser o MESMO no claro e no
escuro. Se ele usasse var(--rose) e var(--amber), mudaria junto com a paleta
e o logo do app viraria outro logo no tema claro.
Fica FORA do bloco do tema para que [data-tema="claro"] não o alcance. */
:root {
--marca-1: #f43f5e; /* rosa — início do gradiente */
--marca-2: #f59e0b; /* âmbar — fim do gradiente */
--marca-fundo: #0a0e1a; /* o quadrado escuro atrás do símbolo */
--telegram: #229ed9; /* azul oficial do Telegram — marca DELES, nunca muda */
}
/* ══════════════════════════════════════════════════════════════════════════
AS EXCEÇÕES — cor que continua escrita na mão DE PROPÓSITO [Bloco 1]
══════════════════════════════════════════════════════════════════════════
O Bloco 4 vai criar um teste que reclama de cor na mão. Estas são as que
ele precisa deixar passar, e cada uma tem motivo:
1. CSS DE IMPRESSÃO (`@media print` em pages/relatorios.js): #000, #111,
#444, #555, #999, #bbb, #ccc, #ddd, #e5e5e5, #fff e os quatro tons
escuros dos cards (#047857, #b91c1c, #b45309, #0369a1).
⚠️ Impressão é SEMPRE sobre papel branco — ela não pode seguir tema
nenhum. Chegou a entrar aqui por engano na conversão automática (o #fff
do fundo do painel virou papel do tema) e foi revertido: se o Bloco 2
mudasse aquele papel, o relatório impresso sairia com fundo colorido.
2. PALETA CATEGÓRICA DOS GRÁFICOS — os arrays `CORES`/`cores` em
pages/dashboard.js e pages/relatorios.js (10 cores cada).
São cores para DISTINGUIR fatias, não para comunicar estado, e são
saturadas o bastante para funcionar sobre fundo claro ou escuro.
⚠️ E tem uma armadilha: os três arrays são PARECIDOS mas NÃO iguais (a
ordem muda do 7º item em diante). Unificar num lugar só mudaria a cor
das fatias de quem já usa — é melhoria real, mas muda a tela, então é
decisão do Bloco 2 e não do Bloco 1.
3. `` e o favicon — ver logo abaixo.
══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ DUAS CORES DA MARCA QUE NÃO DÃO PARA TOKENIZAR, e não é descuido:
1. `` nos 5 HTML — é atributo
lido pelo navegador para pintar a barra do sistema, não passa por CSS.
O Bloco 3 troca isso por JS quando o tema muda.
2. O favicon é um SVG dentro de uma URL `data:` (`fill='%230a0e1a'`) — vira
um documento ISOLADO, onde var() do app não chega. Fica literal. */
/* ── TEMA CLARO ───────────────────────────────────────────────────────────
Entra no Bloco 2, e é DESENHO, não inversão: os selos do app usam
"fundo escuro + texto pastel", e pastel sobre branco não se lê. Cada papel
ganha um valor pensado, com contraste medido (texto normal ≥ 4.5:1).
:root[data-tema="claro"] { … } */
/* ══════════════════════════════════════════════════════════════════════════
TEMA CLARO [Bloco 2 — 29/09/2026]
══════════════════════════════════════════════════════════════════════════
NÃO É INVERSÃO. Inverter um tema escuro dá um cinza sujo e ilegível: os
selos do app são "fundo escuro + texto pastel", e pastel sobre branco não
se lê. Cada papel abaixo foi respondido de novo, e o contraste é MEDIDO
(`npm test` reprova se texto normal ficar abaixo de 4.5:1).
As duas mudanças de raciocínio que aparecem aqui:
1. AS CORES DE AÇÃO ESCURECEM. `#10b981` sobre branco tem contraste 2,2 —
ilegível. No claro o verde da marca vira `#047857`: mesma família, mesma
identidade, mas dá para ler. Vale para vermelho, âmbar, azul e rosa.
2. O QUE ESTÁ SOBRE O ACENTO INVERTE JUNTO. No escuro o verde é claro, então
o texto em cima dele é quase preto (`--sobre-em`). No claro o verde é
escuro, então o texto em cima vira BRANCO. Quem esquece disso escreve
texto preto sobre botão verde-escuro.
⚠️ O TOAST CONTINUA ESCURO DE PROPÓSITO. Ele flutua por cima do app por 3
segundos; escuro ele se lê como camada sobre a página, e é o que quase todo
app faz.
✅ CONFIRMADO PELO LUCAS em 30/09/2026, vendo as duas versões lado a lado: ele
escolheu MANTER escuro. Não clareie por conta própria achando que ficou
esquecido — é escolha, e o motivo está aqui e no CLAUDE.md. */
:root[data-tema="claro"] {
/* Superfícies — o fundo NÃO é branco puro: é ele que faz o painel branco
aparecer como painel, em vez de tudo virar uma folha só. */
--bg: #f4f6fa;
--surface: #ffffff;
--surface2: #eef1f7;
--border: #dfe4ed;
--border2: #c2cad8;
/* Texto — do mais importante ao mais apagado */
--text: #111827;
--sub: #4b5563;
--muted: #6b7280;
/* Marca e significado, escurecidos para se lerem sobre branco */
--em: #047857;
--em2: #065f46;
--red: #dc2626;
--green: #15803d;
--amber: #b45309;
--blue: #1d4ed8;
--sky: #0369a1;
--violet: #4f46e5;
--rose: #be123c;
/* Os trios TÊM que acompanhar o hex novo — há teste conferindo */
--em-rgb: 4,120,87;
--red-rgb: 220,38,38;
--green-rgb: 21,128,61;
--amber-rgb: 180,83,9;
--rose-rgb: 190,18,60;
--sky-rgb: 3,105,161;
/* Sombra deixa de ser preta (suja sobre branco) e vira cinza-azulada.
E o realce do hover INVERTE: branco sobre branco não existe. */
--sombra-rgb: 100,116,139;
--realce-rgb: 0,0,0;
--realce-hover: #0000000a;
/* Sobre fundo colorido: o acento ficou escuro, então o texto fica branco */
--sobre-amber: #fff;
--sobre-em: #fff;
--sobre-em-2: #fff;
/* Selos: fundo claro + texto escuro saturado (o inverso do escuro) */
--selo-ok-bg: #dcfce7;
--selo-ok-fg: #14532d;
--selo-ok-borda: #86efac;
--selo-erro-bg: #fee2e2;
--selo-erro-fg: #991b1b;
--selo-erro-borda: #fca5a5;
--selo-aviso-bg: #fef3c7;
--selo-aviso-fg: #92400e;
--selo-info-bg: #dbeafe;
--selo-info-fg: #1e40af;
--selo-info-borda: #bfdbfe;
--selo-neutro-bg: #e5e7eb;
/* Textos de estado sobre tinta transparente */
--pill-ok-fg: #047857;
--pill-aviso-fg: #b45309;
--pill-venc-fg: #be123c;
--perigo-fg: #b91c1c;
--info-fg: #1d4ed8;
--caixa-ok-fg: #047857;
--caixa-info-fg: #0369a1;
--convite-ok-fg: #15803d;
/* Neutros — no escuro ficam mais claros que o texto; aqui, mais escuros */
--neutro-escuro: #334155;
--neutro: #5c6675;
--neutro-claro: #64748b;
--texto-suave: #374151;
/* Roxo do admin */
--roxo: #6d28d9;
--roxo-fg: #6d28d9;
--roxo-escuro: #5b21b6;
--grafico-rosa: #db2777;
/* Estados de botão */
--red-hover: #b91c1c;
--green-hover: #15803d;
--desfazer-bg: #b45309;
--desfazer-fg: #92400e;
--pix: #0e7490;
/* Linhas: grade de gráfico e divisória de tabela quase somem no claro */
--borda-tabela: #e5e7eb;
--grafico-grade: #e5e7eb;
--grafico-borda: #ffffff; /* o anel da rosca acompanha o painel */
--banner-info-borda: #bfdbfe;
}
/* ══════════════════════════════════════════════════════════════════════════
IMPRESSÃO — sempre claro, qualquer que seja o tema escolhido [Bloco 3]
══════════════════════════════════════════════════════════════════════════
Papel é branco. Imprimir o tema escuro gasta tinta à toa e sai ilegível —
vale até para quem nunca sair do escuro na tela.
⚠️ O SELETOR PRECISA SER `:root[data-tema]`, não só `:root`. Peso de
seletor vence media query: `:root[data-tema="claro"]` (que está acima) tem
mais peso que um `:root` sozinho e ganharia dele mesmo aqui dentro. Com o
atributo, os dois empatam em peso e quem vem DEPOIS no arquivo vence — este.
Só os papéis que fazem diferença no papel: fundo, texto, linha e as cores de
ação (que precisam escurecer para se lerem sobre branco).
⚠️ O CSS de impressão do pages/relatorios.js continua valendo por cima disto
com `!important` — ele é mais específico por página e não foi tocado. */
@media print {
:root, :root[data-tema] {
--bg: #fff;
--surface: #fff;
--surface2: #fff;
--border: #ccc;
--border2: #999;
--text: #111;
--sub: #444;
--muted: #555;
--em: #047857;
--em2: #065f46;
--red: #b91c1c;
--green: #15803d;
--amber: #b45309;
--blue: #1d4ed8;
--rose: #be123c;
--em-rgb: 4,120,87;
--red-rgb: 185,28,28;
--green-rgb: 21,128,61;
--amber-rgb: 180,83,9;
--rose-rgb: 190,18,60;
--sobre-em: #fff;
--sobre-em-2: #fff;
--sobre-amber: #fff;
/* Nada de fundo colorido nem sombra: economia de tinta e legibilidade */
--realce-hover: transparent;
--sombra-rgb: 255,255,255;
--realce-rgb: 0,0,0;
--grafico-grade: #ddd;
--grafico-borda: #fff;
--borda-tabela: #ddd;
--selo-ok-bg: #f1f8f3;
--selo-ok-fg: #14532d;
--selo-erro-bg: #fdf2f2;
--selo-erro-fg: #991b1b;
--selo-aviso-bg: #fdf8ee;
--selo-aviso-fg: #92400e;
--selo-info-bg: #f2f6fd;
--selo-info-fg: #1e40af;
--selo-neutro-bg: #f3f4f6;
}
}