/* ===================================================================
   Ponte de temas do boletim (index.html) → contrato de tokens do Painel
   (painel/temas.css). Um único conjunto de temas para as duas páginas,
   mesma chave local ("painel-tema").

   - "boletim" mantém a paleta nativa do boletim, exatamente como era.
   - Os demais temas reescrevem os tokens do boletim (--s1, --a200, --t1…)
     a partir dos tokens do Painel (--surface, --primary, --text…).
   Especificidade: html[data-tema]:not(...) (0,2,1) vence o :root (0,1,0)
   do <style> do boletim, sem depender da ordem.
   =================================================================== */

/* boletim: temas.css redefine --bg/--border; aqui voltam aos valores nativos */
html[data-tema="boletim"] {
  --bg: #fdf6e8;
  --border: rgba(180,120,20,.14);
  color-scheme: light;
}

html[data-tema]:not([data-tema="boletim"]) {
  /* superfícies */
  --s1: var(--surface);
  --s2: var(--surface-2);
  --s3: color-mix(in srgb, var(--surface-2) 72%, var(--border-forte));
  --border2: var(--border-forte);
  /* marca: a200 é o acento (texto, botões); a700 é o texto sobre ele */
  --a50:  color-mix(in srgb, var(--primary) 10%, var(--surface));
  --a100: var(--accent);
  --a200: var(--primary);
  --a300: color-mix(in srgb, var(--primary) 82%, var(--text));
  --a400: var(--incerto);
  --a500: var(--primary);
  --a600: color-mix(in srgb, var(--primary) 70%, var(--text));
  --a700: var(--primary-ink);
  /* texto */
  --t1: var(--text);
  --t2: var(--text-body);
  --t3: var(--muted);
  /* estados */
  --red: var(--inapto);   --red-bg: var(--inapto-bg);
  --grn: var(--apto);     --grn-bg: var(--apto-bg);
  --blu: color-mix(in srgb, var(--primary) 60%, #3a82b4);
  /* forma */
  --r: var(--radius-sm);
  --font: var(--font-body);
}

/* widget "Compatível com você": os tokens fixos do index.html (#compativel-root, 1,0,0) */
html[data-tema]:not([data-tema="boletim"]) #compativel-root {
  --cv-acento-txt: var(--primary-ink);
  --cv-theta: var(--theta);
  --cv-indet: var(--muted);
  --cv-contra: var(--contra);
}

/* alto contraste: sem transparências no topo, bordas cheias */
html[data-tema="contraste"] nav { background: var(--surface); }
/* as grades de cards usam o fundo como linha de 1px; com borda preta, as células vazias viravam blocos pretos */
html[data-tema="contraste"] .sec-body,
html[data-tema="contraste"] .sub-body { background: var(--surface-2); }