/* ============================================================
   Joinville Notícias — MODO ESCURO (feature isolada)

   Como funciona: o cookie "jn_theme" guarda o modo escolhido
   (light | dark | auto). O script inline no <head> do base.html
   e o theme.js resolvem o modo para data-theme="light|dark" no
   <html>; "auto" segue o prefers-color-scheme do sistema.

   Para REMOVER a feature por completo:
   1. Apague este arquivo (nos dois diretórios de static)
   2. No base.html: remova o <link> deste CSS, o script inline
      "modo escuro" no <head> e o <script> do theme.js
   3. No partials/header.html: remova o botão #themeBtn
   4. Apague o js/theme.js (nos dois diretórios de static)
   ============================================================ */

/* --- Tokens escuros --- */
html[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0A1128;
  --c-surface: #131E40;
  --c-ink: #E9EEFB;
  --c-ink-soft: #BAC6E7;
  --c-ink-mute: #8494C2;
  --c-divider: #253258;
  --c-divider-strong: #35437A;

  --c-blue: #5D8CF8;
  --c-blue-hover: #5D8CF899;
  --c-blue-main: #7AA4FA;

  /* texto secundário (parágrafos, metas, placeholders) */
  --c-blue-stormy: #93A3CF;

  /* usado como cor de títulos em cards no tema claro */
  --c-blue-dark: #D9E3FB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.45);

  /* aliases dos estilos inline do contato.html (lá eles só têm
     fallback claro, ex.: var(--text, #111)) */
  --text: var(--c-ink);
  --text-secondary: var(--c-ink-mute);
  --border: var(--c-divider);
  --bg-alt: var(--c-surface);
  --accent: var(--c-blue);
}

/* Superfícies que usam --c-blue-dark como FUNDO no tema claro
   e devem continuar azul-marinho no escuro */
html[data-theme="dark"] .ticker .tag,
html[data-theme="dark"] .hero-main,
html[data-theme="dark"] .panel.dark,
html[data-theme="dark"] .evento-hero,
html[data-theme="dark"] .map-card,
html[data-theme="dark"] .newsletter,
html[data-theme="dark"] .cat-hero,
html[data-theme="dark"] .cookie-banner,
html[data-theme="dark"] .card-list .passway,
html[data-theme="dark"] .chip.dark {
  background: #0D193C;
}

/* Logo é azul-escuro sobre fundo claro; no escuro vira branco */
html[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }

/* Ajustes pontuais de cores fixas do tema claro */
html[data-theme="dark"] .evento-main,
html[data-theme="dark"] .article-body { color: var(--c-ink-soft); }
/* Botão "Copiar link": no claro é navy (--c-blue-dark) com texto
   branco; como esse token vira cor clara no escuro, ele precisa
   de fundo próprio */
html[data-theme="dark"] .share-row .copy {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: white;
}
html[data-theme="dark"] .share-row .copy:hover {
  background: var(--c-blue-main);
  border-color: var(--c-blue-main);
}

/* Página de detalhe da notícia: fundo acompanha a home (--c-bg),
   não a cor de superfície de cards */
html[data-theme="dark"] .article-wrap { background: var(--c-bg); }
html[data-theme="dark"] .article-wrap--obit { background: #0E1733; }

/* Cards da página de notícia que no claro usam --c-bg para se
   destacar do fundo branco; no escuro isso os funde com a página,
   então viram superfície */
html[data-theme="dark"] .side-mostread,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .related { background: var(--c-surface); }
html[data-theme="dark"] .cat-toolbar .sort select { color: var(--c-ink); }
html[data-theme="dark"] .drawer-nav a:hover,
html[data-theme="dark"] .drawer-nav a.active { background: rgba(93, 140, 248, 0.14); }
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .search-result.focused { background: rgba(93, 140, 248, 0.12); }
html[data-theme="dark"] .cat-item:hover { background: rgba(93, 140, 248, 0.07); }

/* --- Botão de alternância (#themeBtn no header) ---
   Mostra apenas o ícone do modo atual (sol / lua / auto) */
#themeBtn .ico { display: none; }
html[data-theme-mode="light"] #themeBtn .ico-light,
html[data-theme-mode="dark"] #themeBtn .ico-dark,
html[data-theme-mode="auto"] #themeBtn .ico-auto,
html:not([data-theme-mode]) #themeBtn .ico-light { display: block; }
