/* Tokens de cor — fonte única para as cinco páginas. ============================================================================ Antes disto a mesma paleta estava escrita à mão cinco vezes (app.css e os quatro ficheiros de autenticação), e já tinha divergido: existiam QUATRO vermelhos diferentes para dizer "erro" (#dc2626, #c0392b, #e74c3c, #a93226). Um tema escuro por cima disso seriam cinco cópias a dessincronizar-se. Aqui só vivem cores. Nada de layout: as regras de estrutura ficam onde estavam, para o ecrã de entrada não mudar de forma. O tema escuro tem UM único bloco. O `tema.js` resolve a preferência antes da primeira pintura e escreve sempre `data-theme` no , mesmo quando a escolha vem do sistema operativo. A alternativa — repetir o bloco dentro de um `@media (prefers-color-scheme: dark)` — obrigava a manter duas cópias iguais à mão, que é a origem dos quatro vermelhos acima. */ :root { color-scheme: light; /* Marca. Estes três azuis não mudam com o tema: são a identidade, e o logótipo (verde-escuro + amarelo + branco) foi desenhado para assentar neles. Num fundo preto o verde do logótipo desapareceria. */ --navy: #154360; --navy2: #1a5276; --blue: #2e86c1; --grad-marca: linear-gradient(135deg, var(--navy), var(--blue)); --texto-sobre-marca: #ffffff; /* Superfícies, da mais funda para a mais elevada. */ --fundo: #f3f6fa; --superficie: #ffffff; --superficie-2: #f8fafc; /* caixas encaixadas, listas, zonas de apoio */ --superficie-3: #eef2f7; /* rodapés de tabela, contadores */ --superficie-azul: #f0f7fc; /* destaque do saldo */ /* Texto. */ --texto: #152033; /* Informação secundária mas que é para ler: etiquetas, "por contar", o ✗ das permissões. Era #64748b e caía a 4,2:1 nos fundos mais escuros. Este é o tom mais claro que passa 4,5:1 em todos eles. */ --texto-suave: #5f6e84; /* Só para o que está mesmo inactivo: linhas anuladas, campos desactivados, selos de conta desligada. A WCAG isenta componentes inactivos do mínimo de contraste, e é isso que permite manter este tom apagado — a falta de contraste É a informação. O que não estiver inactivo usa --texto-suave; tentar servir os dois casos com um só token fazia-os convergir para a mesma cor e perdia-se a distinção. */ --texto-fraco: #7d8ea6; /* Traços e campos. */ --borda: #d7dee8; --borda-campo: #cbd5e1; --campo-fundo: #ffffff; --foco-fundo: #eff6ff; --foco-anel: #bfdbfe; /* Acentos semânticos (texto, ícones e traços — não fundos de botão). Estes servem de texto em sítios que importam: o valor da diferença, a contagem de pendentes, o ✓/✗ das permissões. Os tons originais (#059669, #dc2626, #d97706) davam 3,4:1, 4,3:1 e 2,8:1 — o âmbar era o pior, e era justamente a cor dos valores por contar. Ficam no tom mais claro que ainda passa 4,5:1 em todos os fundos onde aparecem. */ --verde: #047c57; --vermelho: #d52222; --ambar: #a55b05; --teal: #0e6655; /* moedas, por oposição às notas */ --nota-fundo: #1a5276; /* cabeçalho das colunas de notas */ --moeda-fundo: #0e6655; /* cabeçalho das colunas de moedas */ --azul-texto: #1a5276; /* totais em destaque sobre superfície */ /* Acentos vivos dos blocos de alerta. São propositadamente mais saturados do que o chip da mesma família: marcam a barra lateral do bloco e têm de se ver de longe. */ --acento-azul: #2563eb; --acento-rosa: #e11d48; --acento-laranja: #ea580c; --acento-violeta: #7c3aed; /* Fundos de botão sólido com texto branco por cima. Vivem separados dos acentos porque seguem a direcção contrária: no escuro os acentos têm de clarear para se lerem sobre fundo escuro, mas um botão que clareie deixa de suportar o texto branco que tem dentro. */ /* O verde é mais escuro do que o acento --verde (#059669): com texto branco por cima, aquele dava 3,77:1. Não é regressão do tema escuro — já era assim antes de existir tema nenhum. */ --btn-verde: #04855d; --btn-vermelho: #dc2626; --btn-teal: #0f766e; --btn-neutro: #64748b; --toast-fundo: #111827; --demo-fundo: #f59e0b; --demo-texto: #3b2300; /* Tons de estado: fundo / traço / texto. Os mesmos nove tons servem chips, pastilhas, selos e avisos — antes estavam repetidos dezenas de vezes em hexadecimal. */ --t-vermelho-f: #fee2e2; --t-vermelho-b: #fca5a5; --t-vermelho-t: #991b1b; --t-ambar-f: #fef3c7; --t-ambar-b: #fcd34d; --t-ambar-t: #92400e; --t-verde-f: #dcfce7; --t-verde-b: #86efac; --t-verde-t: #166534; --t-azul-f: #dbeafe; --t-azul-b: #93c5fd; --t-azul-t: #1e40af; --t-violeta-f: #ede9fe; --t-violeta-b: #c4b5fd; --t-violeta-t: #5b21b6; --t-laranja-f: #ffedd5; --t-laranja-b: #fdba74; --t-laranja-t: #9a3412; --t-rosa-f: #ffe4e6; --t-rosa-b: #fda4af; --t-rosa-t: #9f1239; --t-neutro-f: #e2e8f0; --t-neutro-b: #cbd5e1; --t-neutro-t: #475569; --t-teal-f: #ccfbf1; --t-teal-b: #5eead4; --t-teal-t: #0f766e; /* Cinzento mais claro, para campos esbatidos e selos apagados. */ --t-neutro-f2: #f1f5f9; /* Vermelho de traço mais suave, para bordas que não devem gritar. */ --t-vermelho-b2: #fecaca; --superficie-suave: #fcfdfe; /* corpo do cartão de utilizador */ --zona-perigo: #fffbfb; /* fundo das operações destrutivas */ --borda-auth: #d4e6f1; /* campos do ecrã de entrada, mais azulados */ /* Fundos de linha da grelha. São mais suaves do que os tons acima: uma linha inteira pintada com a cor de um chip cansaria a vista. */ --linha-divergente: #fff1f2; --linha-justificada:#fffbeb; --linha-ok: #f0fdf4; --linha-origem: #fff7ed; --linha-confirmada: #eff6ff; --linha-saida: #fdf2f2; --linha-anulada: #f8fafc; --linha-coberta: #f0fdfa; --linha-seleccionada:#eff6ff; --linha-flash: #fde68a; /* Sombras. */ --sombra-card: 0 1px 2px rgba(15, 23, 42, .04); --sombra-media: 0 6px 18px rgba(15, 23, 42, .08); --sombra-alta: 0 20px 60px rgba(0, 0, 0, .25); --sombra-cortina: rgba(15, 23, 42, .5); /* No claro o rato escurece a linha; no escuro tem de a clarear, senão o efeito não se vê. Um único número resolve os dois casos. */ --brilho-hover: .965; /* Mapa de calor das quebras: o JavaScript só decide a intensidade (que é dado); a cor é decisão do tema. */ --calor-rgb: 220 38 38; --calor-escala: 1; } :root[data-theme="escuro"] { color-scheme: dark; --fundo: #0e1726; --superficie: #172131; --superficie-2: #1b2739; --superficie-3: #223046; --superficie-azul: #182a42; --texto: #e8eef7; --texto-suave: #9db0c9; /* Medido: a #6f8199 as linhas anuladas ficavam a 3,96:1 e a pastilha ANULADO a 3,54:1, ambas abaixo do mínimo de 4,5:1. */ --texto-fraco: #93a7c0; --borda: #2b3a52; --borda-campo: #3a4c68; --campo-fundo: #101b2b; --foco-fundo: #1b2c48; --foco-anel: #2f5c93; /* Acentos mais claros: os do tema claro foram escolhidos para contrastar com branco e num fundo escuro ficariam abafados. */ --verde: #34d399; --vermelho: #f87171; --ambar: #fbbf24; --teal: #2dd4bf; --nota-fundo: #1d3f5c; --moeda-fundo: #14544a; --azul-texto: #8fc3ef; --acento-azul: #60a5fa; --acento-rosa: #fb7185; --acento-laranja: #fb923c; --acento-violeta: #a78bfa; /* Ligeiramente mais claros do que no tema claro, mas ainda escuros o suficiente para o texto branco lá dentro se ler. */ --btn-verde: #0d865e; --btn-vermelho: #c8393c; --btn-teal: #0f8478; --btn-neutro: #4a5b74; --toast-fundo: #33415a; --demo-fundo: #a04a08; --demo-texto: #ffedd5; /* Tons invertidos: fundo fundo, texto claro. Mantêm-se distinguíveis entre si — confundir DIVERGENTE com CONFERIDO custa dinheiro. */ --t-vermelho-f: #401a1e; --t-vermelho-b: #7f2c30; --t-vermelho-t: #fecaca; --t-ambar-f: #3d2f10; --t-ambar-b: #7a5a15; --t-ambar-t: #fde68a; --t-verde-f: #10331f; --t-verde-b: #1f6b3a; --t-verde-t: #bbf7d0; --t-azul-f: #16294a; --t-azul-b: #2a4a80; --t-azul-t: #bfdbfe; --t-violeta-f: #281f45; --t-violeta-b: #4c3b80; --t-violeta-t: #ddd6fe; --t-laranja-f: #402412; --t-laranja-b: #7c4620; --t-laranja-t: #fed7aa; --t-rosa-f: #401320; --t-rosa-b: #7d2740; --t-rosa-t: #fecdd3; --t-neutro-f: #2a3a4f; --t-neutro-b: #3a4b63; --t-neutro-t: #c3d2e4; --t-teal-f: #0d332f; --t-teal-b: #1a6a60; --t-teal-t: #99f6e4; --t-neutro-f2: #202c3e; --t-vermelho-b2: #6b2427; --superficie-suave: #1b2739; --zona-perigo: #2a1a1e; --borda-auth: #3a4c68; --linha-divergente: #34191d; --linha-justificada:#332913; --linha-ok: #122c1d; --linha-origem: #332214; --linha-confirmada: #16243c; --linha-saida: #301819; --linha-anulada: #1a2333; --linha-coberta: #0f2c29; --linha-seleccionada:#1c3357; --linha-flash: #6b5210; --sombra-card: 0 1px 2px rgba(0, 0, 0, .5); --sombra-media: 0 6px 18px rgba(0, 0, 0, .55); --sombra-alta: 0 20px 60px rgba(0, 0, 0, .7); --sombra-cortina: rgba(2, 6, 14, .72); --brilho-hover: 1.22; /* Vermelho mais claro e escala reforçada: a 8% de opacidade sobre fundo escuro o mapa de calor desaparecia. */ --calor-rgb: 248 113 113; --calor-escala: 1.7; } /* O Chrome pinta os campos preenchidos automaticamente com amarelo/branco próprios, ignorando o background do CSS. Num cartão escuro fica um bloco claro com texto invisível. A sombra interna de 1000px é a única forma fiável de o cobrir. Não existia regra nenhuma para isto no projecto. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--campo-fundo) inset; -webkit-text-fill-color: var(--texto); caret-color: var(--texto); } /* Botão de troca de tema, na barra de topo e no cartão de entrada. */ .tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, .4); color: #fff; cursor: pointer; line-height: 1; font-size: 15px; } .tema-btn:hover { background: rgba(255, 255, 255, .14); } .tema-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Mostra-se o símbolo do tema para onde se vai, não o do tema actual. */ .tema-btn .p-claro { display: none; } :root[data-theme="escuro"] .tema-btn .p-escuro { display: none; } :root[data-theme="escuro"] .tema-btn .p-claro { display: inline; } /* Quem prefira menos movimento não leva transições de cor ao trocar de tema. */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color .18s ease, color .18s ease; } }