/* =====================================================================
   DRUZA SEMI JOIAS — theme.css (tema claro e escuro)

   Carregada POR ÚLTIMO em todas as páginas da loja e da conta. Não
   refatora os :root que já existem em druza.css e styles.css — não
   precisa: `:root[data-theme="dark"]` tem especificidade 0,2,0 e vence
   o `:root` (0,1,0) daquelas folhas, independente da ordem.

   O CLARO É O PADRÃO, sempre. A identidade da casa é branco dominante, e
   abrir escuro só porque o sistema da pessoa está escuro entrega uma
   primeira impressão que não é a da marca. Por isso aqui NÃO existe bloco
   @media (prefers-color-scheme:dark): o escuro é opt-in, entra pelo botão
   do header e fica salvo em localStorage.

   Quem escolheu escuro tem data-theme="dark" carimbado por um <script>
   inline no <head> de cada página, antes da primeira pintura — se ficasse
   no theme.js com defer, essa pessoa veria um lampejo branco a cada
   carregamento.
   ===================================================================== */

/* ── Tokens de papel ────────────────────────────────────────
   A base de druza.css nomeia as cores pelo que elas SÃO (--white,
   --ink). Isso quebra no escuro porque alguns tokens têm dois papéis:
   --ink é cor de título E fundo de botão sólido; --rose-deep é fundo da
   faixa de anúncio E cor de texto sobre o blush. Inverter um quebra o
   outro. Os tokens abaixo separam os papéis; as regras no fim do arquivo
   trocam o literal pelo papel, valendo nos DOIS temas. */
:root{
  color-scheme:light;

  --surface-raised:#FFFFFF;              /* chip, input, painel flutuante */
  --surface-veil:rgba(255,255,255,.97);  /* header translúcido */
  --surface-veil-strong:rgba(255,255,255,.96);

  --btn-solid-bg:var(--ink);             /* botão sólido / estado ativo */
  --btn-solid-bg-hover:#000;
  --btn-solid-fg:#fff;

  --rose-ink:var(--rose-deep);           /* rosé no papel de TEXTO */
  --foot-bg:var(--ink);
  --foot-fg:#fff;

  --sort-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234A4547' stroke-width='1.5'><path d='m2 4 4 4 4-4'/></svg>");
}

/* ── Paleta escura ──────────────────────────────────────────
   Base #191416 é um quase-preto puxado para o quente da marca, não um
   cinza neutro. O --night fica MAIS escuro que a base para o hero e o
   rodapé continuarem sendo uma zona mais profunda que o corpo — a mesma
   ideia de "duas temperaturas" do Cinema Editorial, invertida.
   O rosé sobe de #C98B90 para #D9A3A8: o de assinatura não tem contraste
   suficiente sobre fundo escuro. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --white:#191416; --white-warm:#1F1A1D; --blush:#251E22; --rose-inst:#2C2328;
  --rose:#D9A3A8; --rose-strong:#E9C3C7; --rose-deep:#3D2D32;
  --emerald:#3E9B85; --paraiba:#6FC5B0; --silver:#8B9299;
  --line:#352C31; --ink:#F6F1F3; --text:#D2C9CD; --muted:#9E9498; --night:#100C0E;

  --surface-raised:#231D21;
  --surface-veil:rgba(25,20,22,.97);
  --surface-veil-strong:rgba(25,20,22,.96);
  --btn-solid-bg:#F0EAEC; --btn-solid-bg-hover:#FFFFFF; --btn-solid-fg:#191416;
  --rose-ink:#DCB2B7;
  --foot-bg:#100C0E; --foot-fg:#F0EAEC;
  --sort-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23D2C9CD' stroke-width='1.5'><path d='m2 4 4 4 4-4'/></svg>");
  --mono:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g transform='translate(100,116) scale(0.85)' fill='%23F0D9DC' fill-opacity='0.035'><path transform='rotate(-52)' d='M0,0 C -4,-7 -3,-17 0,-20 C 3,-17 4,-7 0,0 Z'/><path transform='rotate(-26)' d='M0,0 C -4,-7 -3,-17 0,-20 C 3,-17 4,-7 0,0 Z'/><path d='M0,0 C -4,-7 -3,-19 0,-22 C 3,-19 4,-7 0,0 Z'/><path transform='rotate(26)' d='M0,0 C -4,-7 -3,-17 0,-20 C 3,-17 4,-7 0,0 Z'/><path transform='rotate(52)' d='M0,0 C -4,-7 -3,-17 0,-20 C 3,-17 4,-7 0,0 Z'/></g></svg>");
}

/* ── Literal → papel ────────────────────────────────────────
   Vale nos dois temas: no claro os tokens resolvem para os mesmos
   valores de antes, então nada muda visualmente. Sempre background-COLOR,
   nunca o atalho background, para não apagar imagem de fundo (a seta do
   .fbar__sort é background-image). */
.chip,.select,.opt button,.cep input,
.fbar__btn,.fbar__panel,.fprice__row input,.fmob__btn,
.fsheet,.fsheet__foot,.fsheet__clear,.estado,.plp__quick a,
.dzdrawer__foot a,
.drawer,.dzdrawer,.dzmega,.dzsearch{background-color:var(--surface-raised);}

/* :not(.dzhead--over) é obrigatório. O .dzhead--over flutua transparente
   sobre o hero e só solidifica ao rolar; como esta folha carrega depois
   de druza-shop.css, um `.dzhead` cru venceria o `background:transparent`
   por ser a última regra de mesma especificidade — e a marca branca do
   header sumiria no branco. */
.head--solid,.head--static,.head--pinned,
.head--floating.is-scrolled,.head--floating.is-open,
.quick-nav__panel,.mobile-nav,
.dzhead:not(.dzhead--over),
.dzhead--over.is-solid,.dzhead--over.is-open{background-color:var(--surface-veil);}
.stickybuy,.fmob{background-color:var(--surface-veil-strong);}

.quick-nav.is-scrolled .quick-nav__trigger,
.quick-nav.is-pinned .quick-nav__trigger,
.head--pinned + .quick-nav .quick-nav__trigger{background-color:var(--surface-raised);}

/* botão sólido e estados ativos */
.skip,.btn--ink,.chip.is-active,.opt button.is-active,
.dzdrawer__foot a.is-primary,.plp__quick a[aria-current="page"],
.fbar__btn.has-value,.dzitem.is-current .dzitem__n{
  background-color:var(--btn-solid-bg);color:var(--btn-solid-fg);border-color:var(--btn-solid-bg);}
.btn--ink:hover{background-color:var(--btn-solid-bg-hover);}
.btn--ink::before{background:var(--btn-solid-bg-hover);}

/* .btn--light e .btn--ghost-light vivem sobre fotografia escura (hero e
   campanha) nos DOIS temas — esses blocos não invertem. Por isso valores
   fixos: seguir var(--ink) deixaria texto claro sobre pílula branca. */
.btn--light{background-color:#fff;color:#1A1517;}
.btn--light::before{background:#1A1517;}
.btn--light:hover,.btn--light:focus-visible{color:#fff;}
.btn--ghost-light{color:#fff;}
.btn--ghost-light::before{background:#fff;}
.btn--ghost-light:hover,.btn--ghost-light:focus-visible{color:#1A1517;border-color:#fff;}

/* rosé no papel de texto — sobre fundo claro ele é escuro, sobre fundo
   escuro precisa subir, senão some no blush invertido */
.cart-ship__msg,.home-social__copy p,.dzmega__featurecap span,
.dzitem.is-current .dzitem__label,.quick-nav__links a:last-child{color:var(--rose-ink);}
.plp__back:hover{color:var(--rose-ink);}

.foot{background-color:var(--foot-bg);color:var(--foot-fg);}
.fbar__sort{background-image:var(--sort-arrow);}

/* ── Correções só do escuro ─────────────────────────────────
   Coisas que no claro estão certas e no escuro ficariam ilegíveis. */
:root[data-theme="dark"] .ph{border-color:var(--line);}

/* A vitrine tem blocos que são escuros nos DOIS temas (hero, campanha,
   rodapé). O texto branco neles continua certo — nada a fazer. Já o
   scrim do hero é preto sobre foto e fica igual. */

/* ── Botão de troca de tema ─────────────────────────────────
   Injetado por js/theme.js dentro do .dzhead__actions, então herda o
   tamanho e o alvo de toque do .dzhead__act. Os dois ícones moram no
   DOM e a troca é só de opacidade — evita reflow e pisca menos. */
.dztheme{position:relative;}
.dztheme svg{transition:opacity .18s var(--e-out,ease),transform .28s var(--e-out,ease);}
.dztheme__moon{position:absolute;inset:0;margin:auto;}
:root[data-theme="dark"] .dztheme__sun,
.dztheme__moon{opacity:0;transform:rotate(-35deg) scale(.8);}
:root[data-theme="dark"] .dztheme__moon{opacity:1;transform:none;}
.dztheme__sun{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .dztheme svg{transition:none;}
}