/* ═══════════════════════════════════════════════════════════════════════════ O TEMA — paleta da casa em tokens, claro e escuro, e o vidro [CC] Jano Assistente · 17/08/2026 🔴 A PALETA NÃO FOI ESCOLHIDA: foi MEDIDA. Varri 504 arquivos dos outros projetos da operação e contei ocorrência de cor. `#0B2447` aparece 781× e `#C7202A` 459×, os dois em SETE projetos — Aurora, Calíope, Estratégia, Fonte, Íris, MapaPará, Minerva, Sentinela. Isso é identidade, não gosto. 🔴 E O PAR PRINCIPAL NÃO PODE SE TOCAR. Contraste medido (WCAG 2.1): branco sobre marinho .... 15,47 ✅ ouro sobre marinho ..... 6,35 ✅ ← é ele que carrega número branco sobre vermelho .... 5,72 ✅ cinza sobre marinho ..... 3,84 🔴 texto normal · ✅ só grande VERMELHO sobre MARINHO .... 2,70 🔴 REPROVA ATÉ EM TEXTO GRANDE ⚠️ Por isso o vermelho aqui é **faixa, borda e alerta — nunca letra sobre o marinho**. Já era assim por instinto; agora é por medição, e está escrito para a próxima pessoa não desfazer sem saber o que desfaz. ═══════════════════════════════════════════════════════════════════════════ */ /* ── ESCURO: o padrão da casa ─────────────────────────────────────────────── */ :root{ --marinho:#0B2447; --vermelho:#C7202A; --ouro:#C8A13A; --preto:#1A2027; --cinza:#74808C; --fundo:#08152a; --caixa-solida:#0e2444; /* 🔴 VIDRO EM CAMADAS, não um `rgba` chapado. O que faz parecer vidro não é o blur — é a LUZ: um gradiente que cai do canto superior esquerdo, uma linha fina clara na aresta de cima (o brilho da borda) e duas sombras, uma de contato e uma ambiente. A primeira versão tinha só o blur e um fundo uniforme, e por isso lia como «cartão semitransparente», não como vidro. */ --caixa:linear-gradient(148deg, rgba(30,58,99,.80) 0%, rgba(12,32,60,.66) 58%, rgba(9,25,48,.62) 100%); --aresta:rgba(174,199,235,.16); --linha:#1b365d; --tinta:#e8eef7; --fraco:#93a7c4; /* 🔴 #61789c media 3,45 sobre o cartão — reprovava o piso de 4,5 do texto normal. Clareado até PASSAR, não até parecer bonito. */ --tenue:#8ba0be; --ouro-claro:#E8B84B; --verde:#7FB69C; --vermelho-claro:#F87171; --azul:#60A5FA; --trilho:#0a1c33; /* saturate acima de 1 devolve a cor que o blur lava; brightness levíssimo separa o cartão do fundo sem clarear o texto. */ --vidro:blur(16px) saturate(1.7) brightness(1.06); --sombra:0 1px 0 rgba(255,255,255,.10) inset, 0 -1px 0 rgba(0,0,0,.22) inset, 0 1px 2px rgba(0,0,0,.30), 0 14px 38px rgba(0,0,0,.34); --brilho:0 0 30px rgba(200,161,58,.22); } /* ── CLARO ──────────────────────────────────────────────────────────────── ⚠️ Não é o escuro invertido. No claro o marinho vira TINTA (15,47 sobre branco) e o ouro sai de vez do texto: ouro sobre branco dá 2,44 — reprova. Cor que funciona num modo pode ser ilegível no outro, e trocar só o fundo é o erro mais comum de tema duplo. */ :root[data-tema="claro"]{ --fundo:#eef1f6; --caixa-solida:#ffffff; /* ⚠️ No claro o vidro é OUTRO material: menos blur, mais branco, aresta escura em vez de clara. Copiar os valores do escuro produz um cartão acinzentado e sujo — o erro clássico de tema duplo. */ --caixa:linear-gradient(148deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 100%); --aresta:rgba(11,36,71,.10); --linha:#d7dde6; --tinta:#12203a; --fraco:#3d4c63; /* 🔴 #74808C media 4,03 sobre branco — reprovava. Escurecido até passar. */ --tenue:#5a6880; /* 🔴 E O `--ouro` TAMBÉM, não só o `--ouro-claro`: o número grande do painel usa `--ouro`, e no claro ele media **2,44** — ilegível, e eu teria publicado. Medir a TELA, não o token, é o que pegou. */ --ouro:#7d5f0d; --ouro-claro:#6b5209; --verde:#1c6b45; --vermelho-claro:#a3141d; --azul:#1b5fb0; --trilho:#e6eaf1; --sombra:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(11,36,71,.07), 0 12px 30px rgba(11,36,71,.10); --brilho:0 0 24px rgba(138,106,18,.16); } @media (prefers-color-scheme:light){ :root:not([data-tema="escuro"]){ --fundo:#f4f6f9; --caixa:rgba(255,255,255,.78); --caixa-solida:#ffffff; --linha:#d7dde6; --tinta:#12203a; --fraco:#3d4c63; --tenue:#5a6880; --ouro:#7d5f0d; --ouro-claro:#6b5209; --verde:#1c6b45; --vermelho-claro:#a3141d; --azul:#1b5fb0; --trilho:#e6eaf1; --caixa:linear-gradient(148deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 100%); --aresta:rgba(11,36,71,.10); --fundo:#eef1f6; --sombra:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(11,36,71,.07), 0 12px 30px rgba(11,36,71,.10); --brilho:0 0 24px rgba(138,106,18,.16); } } /* ── O VIDRO ────────────────────────────────────────────────────────────── 🔴 SÓ AQUI, e nunca no app de campo: `backdrop-filter` compõe uma camada por quadro. No desktop é grátis; no celular fraco em 3G é onde trava, e o orçamento do 06 é de 9,7 KB e um aparelho de entrada. ⚠️ `@supports` porque quem não tem o filtro precisa do fundo SÓLIDO — sem isso o cartão fica translúcido sobre o fundo e o texto perde contraste. */ .painel, .kpi, .gerador, .item, .legenda{ background:var(--caixa-solida); border:1px solid var(--linha); box-shadow:var(--sombra); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){ .painel, .kpi, .gerador, .item, .legenda{ background:var(--caixa); -webkit-backdrop-filter:var(--vidro); backdrop-filter:var(--vidro); /* 🔴 A ARESTA CLARA EM CIMA é o que o olho lê como espessura do vidro. Sem ela o cartão parece recortado; com ela, parece uma placa. */ border-color:var(--linha); border-top-color:var(--aresta); border-left-color:var(--aresta); border-radius:5px; } /* o realce da aresta superior, fino e independente da borda */ .painel, .kpi, .gerador{ position:relative; } .painel::before, .kpi::before, .gerador::before{ content:"";position:absolute;left:9px;right:9px;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--aresta),transparent); pointer-events:none; } } /* ⚠️ `will-change` NÃO entra aqui: ele promove cada cartão a uma camada de GPU própria, e com 8 cartões o custo de memória supera o ganho. Medido como prática, não testado aqui — fica declarado como decisão, não como medição. */ /* o halo do número grande — o «efeito de luz» da direção A */ .kpi .val, .heroi{ text-shadow:var(--brilho); } /* 🔴 O VERMELHO COMO FAIXA, NUNCA COMO LETRA SOBRE O MARINHO. */ .faixa-alerta{ background:repeating-linear-gradient(45deg,var(--vermelho) 0 14px,#8e1620 14px 28px); color:#fff; } /* ── o botão de tema ──────────────────────────────────────────────────────── */ /* ⚠️ `--fraco` no botão media 2,10 sobre a barra escura no modo claro: a barra NÃO troca de cor com o tema (é sempre escura), então o texto dela também não pode. Cor fixa aqui é o certo — token que segue o tema erra quando o fundo não segue. */ #jano-tema{ font:600 12px/1 ui-sans-serif,system-ui,sans-serif;background:transparent; color:#c3d0e2;border:1px solid #1b365d;padding:6px 10px;cursor:pointer; margin-left:auto;border-radius:3px; } #jano-tema:hover{color:#fff;border-color:#C8A13A} @media print{ #jano-tema{display:none} }