/* ============================================================
   theme.css — tema escuro + botão de alternância.
   Carregado em TODAS as páginas, depois do CSS específico,
   para que os overrides [data-theme="dark"] vençam.
   ============================================================ */

/* ── Tema ESCURO: sobrescreve os tokens definidos no CSS da página ── */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #171a21;
  --surface-2: #232733;
  --surface-3: #1d212b;
  --text-strong: #f3f4f6;
  --text: #d6dae2;
  --text-2: #c2c9d4;
  --text-3: #aab2bf;
  --text-muted: #97a0ae;
  --text-faint: #7a8493;
  --border: #2a2f3a;
  --border-2: #353c49;

  --hero-bg: linear-gradient(160deg, #171a22 0%, #0f1117 60%);
  --section-alt: #13161d;
  --footer-bg: #0a0c11;
  --card-shadow: 0 1px 4px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* sombras de hover um pouco mais fortes no escuro */
[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent, #e8140e) 55%, #000 30%);
}

/* cartões coloridos (avisos / segurança) ajustados para o escuro */
[data-theme="dark"] .notice-card { border-color: #4a2b28; }
[data-theme="dark"] .notice-card.warn { background: #241d0c; border-color: #5a4a16; }
[data-theme="dark"] .security-card { border-color: #1d3a4c; }

/* badges com fundo claro fixo: suaviza no escuro */
[data-theme="dark"] .badge-premium { background: #3a3413; color: #f5d98a; }

/* "Trabalhe do seu jeito": as imagens têm gradiente claro inline → escurece */
[data-theme="dark"] .work-card-img { background: #1d212b !important; filter: brightness(.9); }

/* ── Botão de alternância de tema ── */
.theme-toggle {
  margin-left: 10px; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--border-2); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }

/* mostra lua no claro, sol no escuro */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }