/* tema.css — modo escuro / claro / automático
   Ativado pela classe html.dark (definida por tema.js e pelo script inline no <head>).
   Só reescreve superfícies claras, textos escuros e bordas claras. Cores de marca,
   fotos e blocos que já são escuros ficam como estão. */

:root { color-scheme: light; }
html.dark { color-scheme: dark;
  --dk-base:#0e1815; --dk-surface:#142019; --dk-surface2:#1b2a24; --dk-surface3:#22332c;
  --dk-border:#2a3b34; --dk-border2:#35483f;
  --dk-text:#e7ece9; --dk-text2:#c9d3ce; --dk-muted:#a7b4ae; --dk-muted2:#8b9994;
  /* variáveis das páginas estáticas (dc.css) */
  --paper:#0e1815; --sand:#142019;
  --gray-900:#e7ece9; --gray-800:#d8e0dc; --gray-700:#c9d3ce; --gray-500:#a7b4ae;
  --gray-300:#35483f; --gray-200:#2a3b34; --gray-100:#1b2a24;
  --shadow:0 18px 50px -28px rgba(0,0,0,.8);
}
html.dark, html.dark body { background:var(--dk-base) !important; color:var(--dk-text); }

/* ---------- Tailwind: fundos claros ---------- */
html.dark .bg-white, html.dark .bg-white\/90, html.dark .bg-white\/50, html.dark .bg-white\/40,
html.dark .hover\:bg-white:hover { background-color:var(--dk-surface) !important; }
html.dark .bg-gray-50, html.dark .bg-gray-50\/50, html.dark .bg-gray-50\/70, html.dark .bg-stone-50, html.dark .bg-slate-50,
html.dark .hover\:bg-gray-50:hover { background-color:var(--dk-surface) !important; }
html.dark .bg-gray-100, html.dark .bg-stone-100, html.dark .bg-slate-100, html.dark .bg-gray-200, html.dark .bg-slate-200,
html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-200:hover { background-color:var(--dk-surface2) !important; }
html.dark .bg-white\/10, html.dark .bg-white\/15, html.dark .bg-white\/20, html.dark .bg-white\/5 { background-color:rgba(255,255,255,.08) !important; }

/* gradientes claros */
html.dark .from-white { --tw-gradient-from:var(--dk-surface) var(--tw-gradient-from-position) !important;
  --tw-gradient-to:rgb(20 32 25 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important; }
html.dark .from-gray-50, html.dark .from-slate-50, html.dark .from-stone-50 { --tw-gradient-from:var(--dk-base) var(--tw-gradient-from-position) !important;
  --tw-gradient-to:rgb(14 24 21 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important; }
html.dark .from-gray-200 { --tw-gradient-from:var(--dk-surface2) var(--tw-gradient-from-position) !important;
  --tw-gradient-to:rgb(27 42 36 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to:var(--dk-base) var(--tw-gradient-to-position) !important; }
html.dark .to-gray-100, html.dark .to-stone-100 { --tw-gradient-to:var(--dk-surface2) var(--tw-gradient-to-position) !important; }
html.dark .via-white\/15, html.dark .via-white\/20 { --tw-gradient-stops:var(--tw-gradient-from),rgba(255,255,255,.06) var(--tw-gradient-via-position),var(--tw-gradient-to) !important; }

/* ---------- Tailwind: textos escuros ---------- */
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-black,
html.dark .hover\:text-gray-900:hover { color:var(--dk-text) !important; }
html.dark .text-gray-700, html.dark .text-slate-700, html.dark .hover\:text-gray-700:hover { color:var(--dk-text2) !important; }
html.dark .text-gray-600, html.dark .text-slate-600, html.dark .text-gray-500, html.dark .text-slate-500,
html.dark .hover\:text-gray-600:hover { color:var(--dk-muted) !important; }
html.dark .placeholder-gray-400::placeholder, html.dark .placeholder-gray-500::placeholder { color:var(--dk-muted2) !important; }

/* textos de destaque em tons escuros (ficam ilegíveis no fundo escuro) */
html.dark .text-teal-900, html.dark .text-teal-800, html.dark .text-teal-700 { color:#5eead4 !important; }
html.dark .text-green-900, html.dark .text-green-800, html.dark .text-green-700, html.dark .text-emerald-900, html.dark .text-emerald-800, html.dark .text-emerald-700 { color:#6ee7b7 !important; }
html.dark .text-amber-900, html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-orange-800, html.dark .text-orange-700, html.dark .text-yellow-800, html.dark .text-yellow-700 { color:#fcd34d !important; }
html.dark .text-red-900, html.dark .text-red-800, html.dark .text-red-700, html.dark .text-rose-800, html.dark .text-rose-700 { color:#fca5a5 !important; }
html.dark .text-indigo-900, html.dark .text-indigo-800, html.dark .text-indigo-700, html.dark .text-blue-900, html.dark .text-blue-800, html.dark .text-blue-700, html.dark .text-cyan-800, html.dark .text-cyan-700 { color:#93c5fd !important; }
html.dark .text-violet-800, html.dark .text-violet-700, html.dark .text-purple-800, html.dark .text-purple-700 { color:#c4b5fd !important; }

/* tokens que o Readdy usa mas não existem no CSS (text-foreground-*, bg-background-*) — herdam preto */
html.dark [class*="text-foreground-"] { color:var(--dk-text) !important; }
html.dark nav, html.dark header { color:var(--dk-text); }
:where(html.dark button:not([class*="text-"])) { color:inherit; }

/* ---------- Tailwind: bordas claras ---------- */
html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-stone-200,
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--dk-border) !important; }
html.dark .border-gray-300, html.dark .hover\:border-gray-300:hover { border-color:var(--dk-border2) !important; }

/* ---------- Tailwind: fundos de destaque claros (50/100) ---------- */
html.dark .bg-amber-50, html.dark .bg-amber-50\/40, html.dark .bg-amber-50\/50, html.dark .bg-amber-50\/80, html.dark .bg-amber-100, html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color:rgba(245,158,11,.14) !important; }
html.dark .bg-green-50, html.dark .bg-green-50\/50, html.dark .bg-green-100, html.dark .bg-emerald-50, html.dark .bg-emerald-100, html.dark .bg-emerald-100\/20, html.dark .bg-emerald-100\/30, html.dark .bg-teal-50, html.dark .bg-teal-100, html.dark .bg-lime-50 { background-color:rgba(16,185,129,.14) !important; }
html.dark .bg-cyan-50, html.dark .bg-sky-50, html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color:rgba(59,130,246,.14) !important; }
html.dark .bg-red-50, html.dark .bg-red-100, html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color:rgba(239,68,68,.14) !important; }
html.dark .bg-violet-50, html.dark .bg-purple-50, html.dark .bg-violet-100 { background-color:rgba(139,92,246,.14) !important; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-200\/60, html.dark .border-orange-200 { border-color:rgba(245,158,11,.35) !important; }
html.dark .border-green-200, html.dark .border-emerald-200, html.dark .border-teal-100, html.dark .border-teal-200 { border-color:rgba(16,185,129,.35) !important; }
html.dark .border-indigo-200, html.dark .border-blue-200, html.dark .border-cyan-200 { border-color:rgba(59,130,246,.35) !important; }
html.dark .border-red-200, html.dark .border-rose-200 { border-color:rgba(239,68,68,.35) !important; }

/* ---------- formulários e sombras ---------- */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html.dark textarea, html.dark select {
  background-color:var(--dk-surface2) !important; color:var(--dk-text) !important; border-color:var(--dk-border2) !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color:var(--dk-muted2) !important; }
html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl {
  --tw-shadow-color:rgba(0,0,0,.55); --tw-shadow:var(--tw-shadow-colored); }

/* ---------- páginas estáticas (dc.css) ---------- */
html.dark .top { background:rgba(14,24,21,.92) !important; border-bottom-color:var(--dk-border) !important; }
html.dark .btn-line { background:var(--dk-surface2) !important; color:var(--dk-text) !important; }
html.dark .bloco, html.dark .cam, html.dark .passo, html.dark .tab-wrap, html.dark .faq details, html.dark .card, html.dark .item { background:var(--dk-surface) !important; }
html.dark .dica, html.dark .alerta { background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.35) !important; }
html.dark .dica, html.dark .dica p, html.dark .alerta, html.dark .alerta p { color:var(--dk-text2) !important; }
html.dark .msg.ok { background:rgba(16,185,129,.15) !important; color:#a7f3d0 !important; }
html.dark .msg.err { background:rgba(239,68,68,.15) !important; color:#fecaca !important; }
html.dark .fator { border-top-color:var(--dk-text) !important; }
html.dark .faq h3, html.dark .passo h3, html.dark .item h3, html.dark .p-mid, html.dark .cam h3, html.dark .bloco h3, html.dark h3.sub-t { color:#5eead4 !important; }
html.dark .resumo b, html.dark .item .pr, html.dark .top-links a:hover, html.dark .btn-line:hover { color:#2dd4bf !important; }
html.dark .dica b, html.dark .alerta h3, html.dark .alerta b { color:#fcd34d !important; }
html.dark table.precos td.var { color:#4ade80 !important; }

/* ---------- botão de tema ---------- */
/* o botão nativo do app (só claro/escuro) sai de cena; o flutuante cobre os três modos */
button[aria-label="Alternar modo escuro"] { display:none !important; }
#dc-tema { position:fixed; left:18px; bottom:18px; z-index:9990; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.92); color:#0f3d38; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .15s, background .15s; padding:0; }
#dc-tema:hover { transform:translateY(-1px); }
#dc-tema[data-pref=auto]::after { content:"A"; position:absolute; right:-2px; top:-2px; font:700 10px/16px Inter,system-ui,sans-serif;
  width:16px; height:16px; border-radius:50%; background:#0f766e; color:#fff; text-align:center; }
html.dark #dc-tema { background:rgba(27,42,36,.94); color:#e7ece9; border-color:rgba(255,255,255,.14); }
@media (max-width:640px) { #dc-tema { width:40px; height:40px; left:12px; bottom:12px; font-size:18px; } }
@media print { #dc-tema { display:none; } }