/* ============================================================ FUNDAÇÃO DE TEMA (Fase 1) Contrato: data-theme no . Ausente ou "light" = CLARO (padrão, produto institucional). "dark" = ESCURO. Chave de persistência: FLORESER_TEMA, valores "claro" | "escuro". A restauração acontece numa IIFE no de painel.html, antes de qualquer folha pintar. REGRA DE OURO: cor de DADO não é cor de TEMA. As 17 cores oficiais das ODS (Agenda 2030), as 7 séries dos gráficos, os semáforos de status e as fotografias do acervo são idênticos nos dois temas. O que inverte é o cromo: fundo, superfície, borda, texto, eixos, grade e rótulos. A INVERSÃO NÃO É ESPELHO, e há uma quebra deliberada: --bg-2 (gaveta, rodapé, cartão de login) continua sendo a camada mais PROFUNDA nos dois temas. No claro é mais escura que --bg; no escuro também. Inverter isso jogaria a gaveta para frente e desmontaria a hierarquia. --text-3 FOI CORRIGIDO NESTA RODADA, nos dois temas. No claro saiu de #8A7A5E (3.16:1 sobre o creme, 3.90:1 sobre o painel, reprovava em toda superfície clara) para #6B5C43, que fecha 4.5:1 em todas as superfícies onde ele aparece: 6.06:1 sobre --panel, 4.91:1 sobre o creme, 4.76:1 sobre --panel-3 e sobre o pé do gradiente da topbar, 4.51:1 sobre --trilho. O equivalente escuro (#A2916F) entrega 4.70:1 no pior caso. Nenhum dos dois temas é mais acessível que o outro neste ponto. ASSIMETRIA REMANESCENTE, documentada e não escondida: --ocre. No claro ele dá 2.27:1 sobre --panel e 1.78:1 sobre --panel-3, então no tema claro --ocre só vale como PIGMENTO (fio de KPI, ponto de chip, traço da trilha) e nunca como texto. No escuro ele é tinta legítima: 7.61:1. PIOR CASO É O CRITÉRIO: toda razão declarada abaixo foi medida contra --panel-3 escuro (#31281B), a MAIS CLARA das cinco superfícies escuras. Passando nela, passa nas outras quatro. No tema claro o pior caso é --trilho (#E3D6BC), a mais escura das superfícies claras de texto. ============================================================ */ :root{ /* Flore-ser: identidade "Herbário Comum" (paleta do site de divulgação) */ /* --- tinta de papel: FIXA nos dois temas --------------------------- --papel e --creme não são superfícies, são a cor do papel usada como TINTA sobre o hero (que é escuro nos dois temas por decisão de design). Se invertessem, o texto do hero sumiria. --hero-txt-1 e --hero-txt-2 são os nomes de papel dessa função. */ --papel:#F4EDDD; --creme:#EADFC7; --hero-txt-1:#F3EAD8; --hero-txt-2:#E4D7B8; /* --- acentos de marca --- */ --verde:#38512F; --oliva:#5C6A34; --terra:#C0603A; --terra-txt:#A64B29; --ocre:#D89B34; --magenta:#E5286E; --tinta:#2A2418; --casca:#4A3826; /* --- superfícies --- */ --bg:#F4EDDD; --bg-2:#EADFC7; --panel:#FBF7EC; --panel-2:#EFE7D3; --panel-3:#E7DCC2; --topbar-1:#EFE7D3; --topbar-2:#E7DCC2; --hero-1:#3f5a34; --hero-2:#33492b; --hero-3:#27381f; --trilho:#E3D6BC; --trilho-2:#DCCDB0; /* --- bordas --- --line e --line-2 são DECORATIVAS: nem uma nem outra chega a 3:1 em nenhum dos dois temas, então nenhuma delas pode ser o único indicador de um controle. Para isso existe --line-portadora, o único papel de borda que fecha 3:1 (4.10:1 no pior caso claro, 3.07:1 no escuro). */ --line:rgba(74,56,38,.15); --line-2:rgba(74,56,38,.30); --line-portadora:#75664B; /* --- papéis funcionais de cor --- */ --cyan:#5C6A34; --cyan-2:#38512F; --blue:#A64B29; --blue-2:#C0603A; --green:#3E6B2E; --green-soft:rgba(62,107,46,.14); --red:#B0472A; --red-soft:rgba(176,71,42,.14); --amber:#B07C1B; --amber-txt:#8A5A00; --amber-soft:rgba(216,155,52,.22); --purple:#C0603A; --purple-soft:rgba(192,96,58,.16); --cyan-soft:rgba(92,106,52,.16); --blue-soft:rgba(166,75,41,.13); /* bordas de chip (1px). No escuro o alfa sobe para .60, que é o mínimo que fecha 3:1 sobre --panel-2; em .55 o magenta reprova (2.74:1). */ /* duas forcas de borda de acento: --line-acento e a SUAVE (contorno de cartao com sotaque, chip discreto), --chip-b-* e a FORTE (estado ligado, chip de dado, foco de componente). Consolidar as duas numa so engrossaria visivelmente o contorno do .note e do .kpi.accent-cyan no tema claro, que e o tema em producao. */ --line-acento:rgba(92,106,52,.25); --chip-b-cy:rgba(92,106,52,.45); --chip-b-gr:rgba(62,107,46,.45); --chip-b-bl:rgba(216,155,52,.30); --chip-b-am:rgba(216,155,52,.60); --chip-b-pp:rgba(192,96,58,.30); --chip-b-rd:rgba(176,71,42,.30); /* TINTA DE CHIP, medida sobre o chip e não sobre o painel. --terra-txt e --red foram aferidos sobre --panel (5.36:1 e 5.19:1), mas o chip pinta a tinta sobre o próprio tint de acento, que é alguns pontos mais escuro: ali os mesmos dois hex caíam para 4.47:1 e 4.27:1. Estes dois papéis existem só para esse fundo, e foram medidos sobre ele: #9F4726 dá 4.83:1 sobre o tint azul e #9E3F25 dá 5.07:1 sobre o vermelho. No escuro o chip é escuro, e aí a tinta clara já servia. */ --chip-bl-txt:#9F4726; --chip-rd-txt:#9E3F25; /* tinta neutra e realce de linha (chip base, .trend.flat, hover de tabela) */ --tint-neutro:rgba(74,56,38,.045); --tint-hover:rgba(74,56,38,.022); --tint-codigo:rgba(74,56,38,.09); /* tints de acento sobre superficie (gradientes de botao, nota, menu ativo) */ --tint-acento-0:rgba(92,106,52,.05); --tint-acento:rgba(92,106,52,.10); --tint-acento-2:rgba(92,106,52,.16); --tint-ocre:rgba(216,155,52,.12); --tint-ocre-2:rgba(216,155,52,.20); --nav-ativo-1:rgba(92,106,52,.16); --nav-ativo-2:rgba(92,106,52,.03); /* --- texto em três níveis --- */ /* --text-3 era #8A7A5E e reprovava em TODA superficie clara (3,16:1 sobre o creme, 3,90:1 sobre o painel). #6B5C43 mantem matiz e saturacao e fecha 4.5:1 nas superficies onde ele de fato aparece. Medido (razao de contraste WCAG, tinta sobre chapa): --panel #FBF7EC 6.06:1 | --bg #F4EDDD 5.56:1 | --panel-2 #EFE7D3 5.26:1 --bg-2/creme #EADFC7 4.91:1 | --panel-3 #E7DCC2 4.76:1 | --trilho #E3D6BC 4.51:1 O gradiente da topbar vai de --panel-2 a --panel-3, entao o pior caso ali e 4.76:1; medido por pixel na captura do painel claro (1280x900), na linha do glifo de .app-title span, a razao real e 4.89:1. O mesmo valor esta em _v1-divulgacao/styles.css: a paleta compartilhada nao diverge mais. */ --text:#2A2418; --text-2:#5A4B38; --text-3:#6B5C43; /* --- foco, véu, seleção, chrome do navegador --- Anel de foco por tema, com halo de valor oposto em segunda camada: o anel precisa sobreviver ao foco caindo sobre uma foto da galeria ou sobre o hero, onde não há superfície de token nenhuma. Claro #6E5A1C: 4.91:1 no pior caso. Escuro #E7B44F: 7.61:1. */ --anel:#6E5A1C; --anel-halo:#FBF7EC; --veu:rgba(23,18,9,.55); --selecao:rgba(192,96,58,.22); --scroll-thumb:#CDBD9A; --scroll-thumb-hover:#BDA986; --grade:rgba(74,56,38,.13); --legenda-bg:rgba(244,237,221,.60); --atrib-bg:rgba(20,16,12,.78); --atrib-txt:#D8CDB5; /* --- forma e tipografia: fixas nos dois temas --- */ --radius:14px; --radius-sm:10px; --shadow:0 14px 32px -20px rgba(56,81,47,.40), 0 3px 10px -7px rgba(74,56,38,.22), 0 1px 0 rgba(255,252,244,.6) inset; --ff:'Source Serif 4',Georgia,serif; --display:'Fraunces',Georgia,'Times New Roman',serif; --mono:'Space Mono',ui-monospace,monospace; color-scheme:light; } /* ============================================================ TEMA ESCURO: "Cerrado à noite", não "painel de servidor". Toda superfície escura fica no hue 30 a 40 graus com saturação 25 a 40%: #171209 é terra profunda de cerradão depois da chuva, não preto neutro. A ELEVAÇÃO MUDA DE MECANISMO. No claro ela vem da sombra. No escuro, sombra preta sobre terra profunda é invisível (rgba(0,0,0,.8) sobre #171209 muda a luminância em menos de 0.004). Então o card sobe ficando MAIS CLARO que o fundo (#1F1810 sobre #171209) e ganha um anel luminoso de 1px. Consequência prática: no escuro o contorno legível do card é a BORDA, nunca a sombra. Por isso .card, .kpi, .map-tip, .fb-card, .user-menu e .auth-card ganharam borda visível mais abaixo. ============================================================ */ html[data-theme="dark"]{ /* --papel, --creme, --hero-txt-1 e --hero-txt-2 NÃO são redefinidos: são tinta de papel sobre o hero, escuro nos dois temas. */ --verde:#7FB463; --oliva:#A7BE63; --terra:#E08B5A; --terra-txt:#EC9A72; --ocre:#E7B44F; --magenta:#F2749F; --tinta:#171209; --casca:#CDBB98; --bg:#171209; --bg-2:#120E07; --panel:#1F1810; --panel-2:#272016; --panel-3:#31281B; --topbar-1:#272016; --topbar-2:#1F1810; --hero-1:#26361F; --hero-2:#1E2C19; --hero-3:#172113; --trilho:#31281B; --trilho-2:#3C3125; --line:rgba(240,226,196,.14); --line-2:rgba(240,226,196,.26); --line-portadora:rgba(240,226,196,.40); --cyan:#A7BE63; --cyan-2:#7FB463; --blue:#EC9A72; --blue-2:#E08B5A; --green:#7FC15E; --green-soft:rgba(127,193,94,.14); --red:#E8836A; --red-soft:rgba(232,131,106,.14); --amber:#E0A93A; --amber-txt:#E0A93A; --amber-soft:rgba(231,180,79,.14); --purple:#E08B5A; --purple-soft:rgba(224,139,90,.14); --cyan-soft:rgba(167,190,99,.14); --blue-soft:rgba(224,139,90,.14); --line-acento:rgba(167,190,99,.45); --chip-b-cy:rgba(167,190,99,.60); --chip-b-gr:rgba(127,193,94,.60); --chip-b-bl:rgba(224,139,90,.60); --chip-b-am:rgba(231,180,79,.60); --chip-b-pp:rgba(224,139,90,.60); --chip-b-rd:rgba(232,131,106,.60); --chip-bl-txt:#EC9A72; --chip-rd-txt:#E8836A; --tint-neutro:rgba(240,226,196,.05); --tint-hover:rgba(240,226,196,.045); --tint-codigo:rgba(240,226,196,.09); --tint-acento-0:rgba(167,190,99,.06); --tint-acento:rgba(167,190,99,.12); --tint-acento-2:rgba(167,190,99,.18); --tint-ocre:rgba(231,180,79,.14); --tint-ocre-2:rgba(231,180,79,.22); --nav-ativo-1:rgba(167,190,99,.20); --nav-ativo-2:rgba(167,190,99,.03); --text:#F3EAD8; --text-2:#CDBB98; --text-3:#A2916F; --anel:#E7B44F; --anel-halo:#171209; --veu:rgba(0,0,0,.66); --selecao:rgba(167,190,99,.26); --scroll-thumb:#4E4433; --scroll-thumb-hover:#5E533F; --grade:rgba(240,226,196,.10); --legenda-bg:rgba(23,18,9,.62); --atrib-bg:rgba(10,8,5,.80); --atrib-txt:#CDBB98; --shadow:0 18px 40px -22px rgba(0,0,0,.80), 0 4px 14px -8px rgba(0,0,0,.60), 0 0 0 1px rgba(240,226,196,.07), 0 1px 0 rgba(255,233,192,.07) inset; color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--ff); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5; } a{color:inherit} /* scrollbars */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)} /* ===== Top bar ===== */ .topbar{ position:sticky; top:0; z-index:40; height:62px; display:flex; align-items:center; gap:18px; padding:0 22px; background:linear-gradient(180deg,var(--panel-2),var(--panel-3)); border-bottom:1px solid var(--line); } .brand-row{display:flex; align-items:center; gap:16px} .wm{display:flex; align-items:center; gap:7px; color:var(--text); opacity:.92} .wm .dot{width:22px;height:22px;border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--oliva),var(--verde) 70%); box-shadow:0 0 0 3px rgba(92,106,52,.12)} .wm small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);line-height:1.05} .wm b{font-size:13px;letter-spacing:.02em} .wm.govbr b{font-weight:800} .wm.govbr b i{color:var(--green);font-style:normal} .wm-sep{width:1px;height:26px;background:var(--line-2)} .app-title{display:flex;flex-direction:column;line-height:1.1} .app-title b{font-size:14.5px;font-weight:700;letter-spacing:.01em} .app-title span{font-size:11px;color:var(--text-3)} .topbar .spacer{flex:1} /* C.4 BORDA PORTADORA: onde o controle so existe pela borda (campo de formulario vazio, checkbox), nem --line (1.30:1) nem --line-2 (1.72:1) chegam a 3:1 em nenhum dos dois temas. Esses pontos usam --line-portadora, o unico papel de borda que fecha o minimo. */ /* O campo de busca da topbar foi REMOVIDO: nao tinha rotulo nem nome acessivel e, principalmente, nao tinha nenhum ouvinte ligado a ele em script.js: nao buscava nada. Quando a busca existir de verdade, o lugar dela e aqui, com