/* Dimensol — tema escuro (28/10/2026)
   ----------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE, E POR QUE ELE CONSEGUE FUNCIONAR SEM REESCREVER
   O CSS DE 36 PÁGINAS:

   Cada página de public/ é autocontida e declara a paleta num `:root{...}` dentro
   do próprio <style> (é o padrão do projeto, sem build step). Um arquivo externo
   com `:root` teria a MESMA especificidade e perderia para o bloco inline sempre
   que viesse antes dele no documento. Os seletores aqui são `:root[data-theme=...]`
   e `:root:not([data-theme=...])`, que valem 0,2,0 contra os 0,1,0 do `:root` puro —
   então vencem independentemente da ordem do <link>. É só por isso que dá para
   acrescentar uma linha por página em vez de mexer na paleta de cada uma.

   OS DOIS BLOCOS ABAIXO TÊM DE ANDAR JUNTOS. O primeiro atende quem tem o sistema
   no escuro e não escolheu nada ("automático"); o segundo, quem clicou no botão e
   pediu escuro explicitamente. O CSS não deixa derivar um do outro sem truque
   obscuro, então os valores são repetidos de propósito: MUDOU UM, MUDE O OUTRO.
   O `:not([data-theme="light"])` é o que permite forçar o claro num sistema escuro.

   CONTRASTE: todos os tokens de texto foram medidos contra os três fundos (--bg,
   --bg-panel, --bg-field) e passam no mínimo AA da WCAG (4,5:1 para texto normal).
   O --text-dim é o mais justo: #9E897A dá 4,81:1 no pior fundo. Não o escureça sem
   medir de novo — no tema claro esse mesmo token está em 2,49:1, que é um achado
   em aberto da auditoria de 27/10/2026, e não se conserta nada repetindo o erro.  */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1512; --bg-panel: #241A15; --bg-panel-2: #2B1F19; --bg-field: #2B1F19;
    --line: #3D2C23; --line-soft: #2F2219; --line-strong: #857060;
    --text: #F0E4D8; --text-muted: #B59C8A; --text-dim: #9E897A;
    --copper: #FE7A42; --copper-dim: #FE6D30;
    --copper-glow: rgba(254,122,66,0.30); --copper-soft: rgba(254,122,66,0.12);
    --teal: #FEC62F; --teal-glow: rgba(254,198,47,0.30); --teal-soft: rgba(254,198,47,0.14);
    --marrom: #E8A882;
    --ok: #5FC48F; --ok-soft: rgba(95,196,143,0.14);
    --err: #F08279; --err-soft: rgba(240,130,121,0.14);
    --sombra: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.26);
    --header-bg: rgba(36,26,21,0.92);
    --superficie-clara: #2B1F19;
    /* avisa o navegador: barras de rolagem, caixas de seleção e campos nativos escuros */
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1C1512; --bg-panel: #241A15; --bg-panel-2: #2B1F19; --bg-field: #2B1F19;
  --line: #3D2C23; --line-soft: #2F2219; --line-strong: #857060;
  --text: #F0E4D8; --text-muted: #B59C8A; --text-dim: #9E897A;
  --copper: #FE7A42; --copper-dim: #FE6D30;
  --copper-glow: rgba(254,122,66,0.30); --copper-soft: rgba(254,122,66,0.12);
  --teal: #FEC62F; --teal-glow: rgba(254,198,47,0.30); --teal-soft: rgba(254,198,47,0.14);
  --marrom: #E8A882;
  --ok: #5FC48F; --ok-soft: rgba(95,196,143,0.14);
  --err: #F08279; --err-soft: rgba(240,130,121,0.14);
  --sombra: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.26);
  --header-bg: rgba(36,26,21,0.92);
  --superficie-clara: #2B1F19;
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   AJUSTES QUE OS TOKENS SOZINHOS NÃO RESOLVEM
   ---------------------------------------------------------------------------- */

/* 0. SUPERFÍCIES COM BRANCO ESCRITO À MÃO.

   Levantamento de 28/10/2026 sobre as 36 páginas: o `header` é declarado com
   `background: rgba(255,255,255,0.9)` — branco literal, não token — em 22 delas, o
   que deixava uma faixa clara no alto da página escura. Mais alguns casos pontuais
   (`.lado` do Arranjo, cartões de cidade e de PDF no admin).

   Vale o `!important` porque a regra da própria página tem a mesma especificidade e
   vem DEPOIS no documento (o <link> é injetado no topo do <head>, antes do <style>
   inline); sem ele não há como vencer sem editar as 22 páginas uma a uma. O escopo é
   só o tema escuro, de propósito: no claro nada muda, nem nas páginas cujo header
   tem outro fundo ou nenhum.

   NÃO entram aqui os `background:#fff` do bloco "RELATÓRIO EM PDF" de cada
   ferramenta (#report-root e .rpt). Aqueles estão certos: o relatório é a folha que
   vai para o cliente do projetista e continua branca em qualquer tema. */
:root[data-theme="dark"] header { background: var(--header-bg) !important; }
:root[data-theme="dark"] .lado,
:root[data-theme="dark"] .city-card,
:root[data-theme="dark"] .pdf-card { background: var(--superficie-clara) !important; }

/* 0b. TEXTO INVERTIDO SOBRE FUNDO QUE NÃO INVERTEU.

   O --marrom é o único token que troca de lado: no tema claro é #7c3b23 (escuro, serve
   de texto sobre creme) e no escuro vira #E8A882 (claro, para ler sobre o marrom-preto).
   Onde ele é texto sobre o AMARELO --teal, que é quase o mesmo nos dois temas, a
   inversão o apaga. Medido no selo "mais popular" da landing: 5,32:1 no claro e 1,29:1
   no escuro — ou seja, esta foi uma regressão introduzida pelo tema, não um defeito
   antigo. Varredura nas 36 páginas em 28/10/2026 achou só este caso. */
:root[data-theme="dark"] .plan-badge.pop { color: #2b1810; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan-badge.pop { color: #2b1810; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header { background: var(--header-bg) !important; }
  :root:not([data-theme="light"]) .lado,
  :root:not([data-theme="light"]) .city-card,
  :root:not([data-theme="light"]) .pdf-card { background: var(--superficie-clara) !important; }
}

/* 1. GRÁFICOS DESENHADOS EM SVG ficam numa "folha" clara.

   Os SVGs de resultado (Arranjo de Coletores, SAP, SAS, CAQ, Termossifão, Trocador)
   são escritos com cor HEX LITERAL, e isso não é descuido: o motor vetorial de PDF
   (public/js/pdf-relatorio.js) lê esses elementos para redesenhá-los no relatório e
   NÃO resolve `var(--)`. Trocar os hex por variáveis quebraria o PDF em silêncio —
   está documentado no CLAUDE.md, no bullet do Arranjo de Coletores.

   Como os traços e textos são escuros por construção, eles sumiriam sobre o fundo
   escuro. A saída é tratar o gráfico como uma folha de papel clara dentro da página
   escura: legível, e deixa a área que vai para o PDF parecida com o que será impresso.

   MEDIDO em 28/10/2026, no desenho do Arranjo de Coletores sem esta regra: 42 textos
   no SVG, com os rótulos de temperatura ("40,0°", "45,4°", "SAI") em contraste de
   1,06:1 — invisíveis. A cor vem de `const COR_TEXTO = '#2b1810'` no próprio script
   da página, um hex literal, e é justamente por causa do PDF que ele não pode virar
   token. Só o Arranjo e o Termossifão têm esse padrão hoje, os dois com .desenho-wrap.

   FERRAMENTA NOVA QUE DESENHE SVG precisa envolver o desenho num destes containers,
   ou acrescentar o seu à lista — senão o desenho some no tema escuro, sem erro
   nenhum no console. É a mesma classe de armadilha das classes rpt-* que o motor de
   PDF não conhece. */
:root[data-theme="dark"] .rpt-chart-wrap,
:root[data-theme="dark"] .grafico-svg,
:root[data-theme="dark"] .chart-wrap,
:root[data-theme="dark"] .desenho-wrap,
:root[data-theme="dark"] svg.grafico,
:root[data-theme="dark"] .logo-previa,
:root[data-theme="dark"] #report-root {
  background: #FFFFFF;
  border-radius: 10px;
  color-scheme: light;
  /* Os tokens voltam ao claro DENTRO da folha, e por herança valem para tudo que
     está nela. Sem isto, o conteúdo que usa var(--text)/var(--marrom) continuaria
     claro sobre o branco: medido em 28/10/2026 na prévia da logo de /meus-dados,
     o título do relatório ficou em 2,03:1 e o aviso "Nenhuma logo salva" em 3,33:1.
     É a mesma ideia do [data-pdf-claro] abaixo, só que limitada a um pedaço da tela. */
  /* --text-dim recebe o valor do --text-muted de propósito: o #b3a190 do tema claro dá
     só 2,49:1 sobre branco (o achado em aberto da auditoria de 27/10/2026), e dentro
     desta folha o fundo É branco. Usar o tom mais escuro aqui corrige o texto pequeno
     da prévia da logo sem mexer na paleta clara do site, que é decisão à parte. */
  --text: #2b1810; --text-muted: #8a7768; --text-dim: #8a7768;
  --line: #E4D3C0; --line-soft: #F0E4D8; --marrom: #7c3b23;
  --bg: #FFFFFF; --bg-panel: #FFF7EC; --bg-field: #FFFCF7;
  color: var(--text);
}
:root[data-theme="dark"] .rpt-chart-wrap,
:root[data-theme="dark"] .grafico-svg,
:root[data-theme="dark"] .chart-wrap,
:root[data-theme="dark"] .desenho-wrap,
:root[data-theme="dark"] svg.grafico { padding: 10px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rpt-chart-wrap,
  :root:not([data-theme="light"]) .grafico-svg,
  :root:not([data-theme="light"]) .chart-wrap,
  :root:not([data-theme="light"]) .desenho-wrap,
  :root:not([data-theme="light"]) svg.grafico,
  :root:not([data-theme="light"]) .logo-previa,
  :root:not([data-theme="light"]) #report-root {
    background: #FFFFFF;
    border-radius: 10px;
    color-scheme: light;
    --text: #2b1810; --text-muted: #8a7768; --text-dim: #8a7768;
    --line: #E4D3C0; --line-soft: #F0E4D8; --marrom: #7c3b23;
    --bg: #FFFFFF; --bg-panel: #FFF7EC; --bg-field: #FFFCF7;
    color: var(--text);
  }
  :root:not([data-theme="light"]) .rpt-chart-wrap,
  :root:not([data-theme="light"]) .grafico-svg,
  :root:not([data-theme="light"]) .chart-wrap,
  :root:not([data-theme="light"]) .desenho-wrap,
  :root:not([data-theme="light"]) svg.grafico { padding: 10px; }
}

/* 2. O RELATÓRIO NUNCA É ESCURO.
   Enquanto o PDF é gerado, public/js/pdf-relatorio.js marca <html> com
   data-pdf-claro: o motor de reserva usa html2canvas, que fotografa o HTML como
   ele está na tela, e um relatório preto chegaria ao cliente do projetista. Esta
   regra força a paleta clara durante a captura, seja qual for o tema escolhido. */
:root[data-pdf-claro] {
  --bg: #FFFFFF; --bg-panel: #FFF7EC; --bg-panel-2: #FBEEDA; --bg-field: #FFFCF7;
  --line: #E4D3C0; --line-soft: #F0E4D8; --line-strong: #C9AE93;
  --text: #2b1810; --text-muted: #8a7768; --text-dim: #b3a190;
  --copper: #fe6d30; --copper-dim: #fe522d;
  --copper-glow: rgba(254,109,48,0.35); --copper-soft: rgba(254,109,48,0.14);
  --teal: #fec62f; --teal-glow: rgba(254,198,47,0.35); --teal-soft: rgba(254,198,47,0.16);
  --marrom: #7c3b23;
  --ok: #4CAF7D; --ok-soft: rgba(76,175,125,0.14);
  --err: #D9534F; --err-soft: rgba(217,83,79,0.14);
  color-scheme: light;
}

/* 3. BOTÃO DE TEMA (injetado por public/js/tema.js).
   Herda os tokens, então acompanha o tema sem regra extra. */
.tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  color: var(--text-muted); cursor: pointer; line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tema-btn:hover { background: var(--copper-soft); color: var(--copper); border-color: var(--copper); }
.tema-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.tema-btn svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* nas telas sem <header> (login, confirmação de e-mail, página offline) ele flutua no canto */
.tema-btn--solto { position: fixed; top: 14px; right: 14px; z-index: 50; background: var(--bg-panel); }
@media (max-width: 520px) { .tema-btn { width: 34px; height: 34px; } }
@media print { .tema-btn { display: none !important; } }