/* ============================================================
   ROTEIRO ALEATÓRIO — Temas: "clean" (claro, padrão) e "dark"
   Carregar DEPOIS de styles.css / site.css / loja.css / artigo.css
   ============================================================ */

/* ---------- TEMA CLEAN (claro) — padrão (:root) ---------- */
:root,
[data-theme="clean"] {
  --bg-0: #F7F4EE;   /* off-white quente */
  --bg-1: #FFFFFF;
  --bg-2: #F1ECE3;
  --bg-3: #E6DFD2;
  --line: rgba(26,20,8,0.12);
  --glass: rgba(255,255,255,0.72);

  --tx-1: #17120C;
  --tx-2: rgba(23,18,12,0.66);
  --tx-3: rgba(23,18,12,0.46);

  --gold-ink: #8A5E10;            /* dourado profundo p/ texto sobre claro */
  --prose: rgba(23,18,12,0.82);   /* texto de corpo do artigo (claro) */
  --header-bg: rgba(247,244,238,0.82);
  --menu-bg: rgba(247,244,238,0.98);
  --buybar-bg: rgba(255,255,255,0.94);
  --ghost-hover: rgba(26,20,8,0.06);
  --shadow-deep: 0 22px 55px -22px rgba(60,45,12,0.28);

  /* Categorias — versões mais profundas, legíveis sobre claro */
  --c-passeios: #7A3CEB; --c-passeios-rgb: 122,60,235;
  --c-viagens:  #0E7FA3; --c-viagens-rgb: 14,127,163;
  --c-hosp:     #C81E64; --c-hosp-rgb: 200,30,100;
  --c-gastro:   #D44818; --c-gastro-rgb: 212,72,24;
  --c-saude:    #3C8F2C; --c-saude-rgb: 60,143,44;
  --c-loja:     #8A5E10; --c-loja-rgb: 138,94,16;
}

/* ---------- TEMA DARK ---------- */
[data-theme="dark"] {
  --bg-0: #0B0B0B;
  --bg-1: #131313;
  --bg-2: #1A1A1A;
  --bg-3: #232323;
  --line: rgba(255,255,255,0.10);
  --glass: rgba(255,255,255,0.06);

  --tx-1: #FFFFFF;
  --tx-2: rgba(255,255,255,0.72);
  --tx-3: rgba(255,255,255,0.48);

  --gold-ink: var(--gold);
  --prose: rgba(255,255,255,0.86); /* texto de corpo do artigo (escuro) */
  --header-bg: rgba(11,11,11,0.78);
  --menu-bg: rgba(11,11,11,0.97);
  --buybar-bg: rgba(11,11,11,0.92);
  --ghost-hover: rgba(255,255,255,0.10);
  --shadow-deep: 0 24px 60px -20px rgba(0,0,0,0.8);

  /* Categorias — versões neon vibrantes (sobre escuro) */
  --c-passeios: var(--purple); --c-passeios-rgb: 155,92,255;
  --c-viagens:  var(--blue);   --c-viagens-rgb: 39,211,242;
  --c-hosp:     var(--pink);   --c-hosp-rgb: 255,79,145;
  --c-gastro:   var(--orange); --c-gastro-rgb: 255,106,61;
  --c-saude:    var(--green);  --c-saude-rgb: 124,203,90;
  --c-loja:     var(--gold);   --c-loja-rgb: 245,182,66;
}

/* As classes de categoria agora puxam do token do tema */
.cat-passeios { --cat: var(--c-passeios); --cat-rgb: var(--c-passeios-rgb); }
.cat-viagens  { --cat: var(--c-viagens);  --cat-rgb: var(--c-viagens-rgb); }
.cat-hosp     { --cat: var(--c-hosp);     --cat-rgb: var(--c-hosp-rgb); }
.cat-gastro   { --cat: var(--c-gastro);   --cat-rgb: var(--c-gastro-rgb); }
.cat-saude    { --cat: var(--c-saude);    --cat-rgb: var(--c-saude-rgb); }
.cat-loja     { --cat: var(--c-loja);     --cat-rgb: var(--c-loja-rgb); }

/* transição suave ao trocar de tema */
body { transition: background-color 300ms var(--ease), color 300ms var(--ease); }

/* No tema claro, os placeholders continuam escuros (representam fotos);
   suavizamos um pouco a tinta para combinar com o fundo claro */
[data-theme="clean"] .ph {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 11px),
    linear-gradient(135deg,
      color-mix(in oklab, var(--cat, #6b6b6b) 38%, #1d1b18),
      color-mix(in oklab, var(--cat, #6b6b6b) 16%, #14110d));
}

/* inline-product (artigo) — borda/tinte dourados funcionam nos dois temas */
[data-theme="clean"] .inline-product {
  background: linear-gradient(135deg, rgba(245,182,66,0.14), rgba(245,182,66,0.05));
  border-color: rgba(138,94,16,0.35);
}

/* ============================================================
   LOGO — versão por tema
   ============================================================ */
.wm-img { height: 54px; width: auto; display: block; }
.footer-brand .wm-img { height: 74px; }
.wm-dark { display: none; }
[data-theme="dark"] .wm-clean { display: none; }
[data-theme="dark"] .wm-dark { display: block; }
@media (max-width: 560px) { .wm-img { height: 42px; } .footer-brand .wm-img { height: 60px; } }

/* ============================================================
   BOTÃO DE TROCA DE TEMA
   ============================================================ */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass);
  color: var(--tx-1); cursor: pointer;
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); transform: translateY(-1px); }
.theme-toggle .tt-ico { line-height: 1; }
.theme-toggle .tt-moon { display: none; }
[data-theme="dark"] .theme-toggle .tt-sun { display: none; }
[data-theme="dark"] .theme-toggle .tt-moon { display: inline; }