/* ──────────────────────────────────────────────────────────────
   AUXORA · Sistema de tema claro/escuro (partilhado)
   A paleta escura vive no :root de cada página. Aqui ficam:
   1) defaults das superfícies temáveis (caso a página não os defina)
   2) o override completo do TEMA CLARO, fonte única de verdade
   3) o botão de tema
   ────────────────────────────────────────────────────────────── */

/* 1) Superfícies temáveis — defaults escuros */
:root {
  --nav-bg: rgba(10, 22, 40, 0.85);
  --panel: rgba(10, 22, 40, 0.6);
  --panel-2: rgba(10, 22, 40, 0.4);
  --input-bg: rgba(10, 22, 40, 0.8);
  --card-tint: rgba(212, 169, 61, 0.04);
  --tint-soft: rgba(250, 249, 246, 0.06);
  /* Acentos dourados — defaults (caso a página não os defina, ex. termos/privacidade) */
  --gold-soft: rgba(212, 169, 61, 0.18);
  --gold-line: rgba(212, 169, 61, 0.30);
}

/* 2) TEMA CLARO — mesma identidade, sobre creme/linho */
html[data-theme="light"] {
  --navy: #F2ECE0;
  --navy-2: #FAF6EF;
  --navy-3: #EDE4D4;
  --navy-card: #FFFFFF;
  --gold: #8C6A12;            /* dourado fundo, legível como texto sobre creme */
  --gold-bright: #A6801F;
  --gold-soft: rgba(140, 106, 18, 0.12);
  --gold-line: rgba(140, 106, 18, 0.30);
  --cream: #16212E;           /* títulos: tinta escura */
  --cream-soft: rgba(22, 33, 46, 0.92);
  --cream-mute: rgba(22, 33, 46, 0.72);
  --cream-faint: rgba(22, 33, 46, 0.55);
  --cream-dim: rgba(22, 33, 46, 0.45);
  --line: rgba(22, 33, 46, 0.12);
  --line-soft: rgba(22, 33, 46, 0.08);
  --nav-bg: rgba(250, 247, 241, 0.88);
  --panel: rgba(255, 255, 255, 0.66);
  --panel-2: rgba(255, 255, 255, 0.5);
  --input-bg: #FFFFFF;
  --card-tint: rgba(140, 106, 18, 0.05);
  --tint-soft: rgba(22, 33, 46, 0.05);
}

html, body { transition: background-color 0.3s ease, color 0.3s ease; }

/* 3) Botão de tema */
.nav-right { display: flex; align-items: center; gap: 1.5rem; }
.theme-toggle {
  background: transparent;
  border: 1px solid var(--gold-line);
  border-radius: 100px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gold);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--gold-soft); border-color: var(--gold); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Toggle flutuante — para páginas sem barra de navegação (termos, privacidade) */
.theme-toggle.floating {
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}