/* ═════════════════════════ tema claro ═════════════════════════

   A direção clara aprovada pelo CEO em 11/09/2026
   (`capturas/PROPOSTA_tela_claro_2026-09-11.html`): papel mineral, superfícies
   opacas, petróleo como acento. Paleta de `docs/tasks/CODEX_cockpit-hud_RESPOSTA.md`
   (seção 3), sem os instrumentos novos daquela proposta — aqui só a pele.

   **Como vale:** `tema.js` marca `<html data-tema="claro">` antes da primeira
   pintura; este arquivo carrega DEPOIS das outras folhas e redefine os tokens.
   O escuro continua sendo o `:root` de `estilo.css` — trocar de tema é trocar o
   atributo, nunca duplicar regra. As regras abaixo dos tokens existem só onde a
   folha escura escreveu cor fixa em vez de token (31 ocorrências em 14/09/2026).
   Nada inline: a CSP `style-src 'self'` bloqueia em silêncio. */

html[data-tema="claro"] {
  color-scheme: light;

  --fundo: #FBFAF7;
  --fundo-2: #F7F5EF;
  --sup: #FFFFFF;
  --sup-2: #F7F5EF;
  --sup-3: #EDE9DF;
  --tinta: #1A1915;
  --tinta-2: #57524A;
  --tinta-3: #857E72;
  --borda: #E3DFD3;
  --borda-2: #CEC7B6;

  --petroleo: #0E6E7B;
  --petroleo-forte: #095763;
  --ambar: #A8681A;
  --ambar-texto: #92570E;
  --vermelho: #A62B22;
  --verde: #1C7048;
  --acao-suave: #E7F1F2;
  --espera-suave: #FAF0DF;
  --erro-suave: #FBEAE7;
  --fechado-suave: #E8F2EB;
  --sobre-acento: #FFFFFF;

  /* Compatibilidade: o CSS e os SVG existentes falam em ciano, azul, índigo. */
  --ciano: var(--petroleo);
  --ciano-2: var(--petroleo-forte);
  --ciano-glow: var(--acao-suave);
  --ambar-glow: var(--espera-suave);
  --vermelho-glow: var(--erro-suave);
  --verde-glow: var(--fechado-suave);
  --azul: #526B88;
  --indigo: #746682;
  --roxo: #746682;

  --r: 10px;
  --r-p: 7px;
  --sombra: 0 1px 2px rgb(40 34 24 / 6%), 0 6px 18px rgb(40 34 24 / 5%);
}

/* ── fundo e casca ── */
html[data-tema="claro"] body { background-image: none; }
html[data-tema="claro"] .topo { background: rgb(251 250 247 / 88%); }
html[data-tema="claro"] .cartao::before { background: none; }
html[data-tema="claro"] .dialogo::backdrop { background: rgb(26 25 21 / 32%); }

/* ── acento: texto claro sobre petróleo e âmbar ── */
html[data-tema="claro"] .rail .logo,
html[data-tema="claro"] .logo-entrar { color: var(--sobre-acento); box-shadow: none; }
html[data-tema="claro"] .selo-n { color: var(--sobre-acento); }
html[data-tema="claro"] button.principal { color: var(--sobre-acento); box-shadow: none; }
html[data-tema="claro"] button.principal:hover { filter: none; background: var(--petroleo-forte); }
html[data-tema="claro"] button:hover { background: var(--sup-3); border-color: var(--borda-2); }
html[data-tema="claro"] button.discreto:hover { background: var(--sup-3); border-color: var(--borda); }

/* ── condição: texto escuro legível sobre superfície suave ── */
html[data-tema="claro"] .recado.ruim { color: var(--vermelho); border-color: #EFC1BB; }
html[data-tema="claro"] .recado.bom { color: var(--verde); border-color: #B9D8C4; }
html[data-tema="claro"] .pilula.s-em_andamento,
html[data-tema="claro"] .pilula.s-baixado,
html[data-tema="claro"] .pilula.verde { color: var(--verde); border-color: #B9D8C4; }
html[data-tema="claro"] .pilula.s-nao_iniciada,
html[data-tema="claro"] .pilula.sev-media,
html[data-tema="claro"] .pilula.ambar { color: var(--ambar-texto); border-color: #E8CF9F; }
html[data-tema="claro"] .pilula.s-paralisada,
html[data-tema="claro"] .pilula.s-aberto,
html[data-tema="claro"] .pilula.sev-alta { color: var(--vermelho); border-color: #EFC1BB; }
html[data-tema="claro"] .erro-senha { color: var(--vermelho); }
html[data-tema="claro"] .erro-senha.ok,
html[data-tema="claro"] #estado-api.bom { color: var(--verde); }
html[data-tema="claro"] .dica.erro,
html[data-tema="claro"] .alcada-linha[data-estado="indisponivel"],
html[data-tema="claro"] .alcada-linha[data-estado="sem acesso"] { color: var(--ambar-texto); }

/* ── tela de entrada ── */
html[data-tema="claro"] .tela-entrar {
  background:
    radial-gradient(900px 520px at 50% -12%, rgb(14 110 123 / 9%), transparent 70%),
    var(--fundo);
}
html[data-tema="claro"] .cartao-entrar { background: var(--sup); }

/* ── E3: bordas que a folha própria escreveu fixas ── */
html[data-tema="claro"] .boletins-itens,
html[data-tema="claro"] .boletim-linha { border-color: var(--borda-2); }

/* ═════════════════════════ o seletor de modo ═════════════════════════ */

.modo-tela { display: flex; align-items: center; gap: 4px; }
a.link-modo {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px;
  border-radius: var(--r-p); border: 1px solid var(--borda); color: var(--tinta-2);
  font-size: 13.5px; font-weight: 560; text-decoration: none; white-space: nowrap;
}
a.link-modo:hover { background: var(--sup-3); color: var(--tinta); }