/* ============================================================
   css/publico-escuro.css — modo escuro das páginas públicas
   ============================================================
   Usado por: / (landing), /sobre, /blog, /carreiras, /imprensa.
   (Termos, Privacidade e Uso Aceitável usam css/style.css + legal.css
   e recebem o tema escuro pelo data-theme — ver o <script> no <head>
   delas.)

   Segue a configuração do navegador/sistema do visitante, sem botão e
   sem JavaScript: tudo está dentro de @media (prefers-color-scheme:
   dark). Quem usa o claro não recebe NADA daqui — o bloco inteiro é
   ignorado e a página fica exatamente como era.

   Carregue DEPOIS do <style> da página. Mesma especificidade, quem vem
   depois vence — o mesmo princípio do bloco "NAVBAR CANÔNICA".

   Paleta: a mesma do modo escuro do app (css/style.css,
   :root[data-theme="dark"]), para landing e produto parecerem a mesma
   marca nos dois temas.
============================================================ */

@media (prefers-color-scheme: dark){

  :root{
    /* Barra de rolagem, campos e popups nativos também ficam escuros. */
    color-scheme:dark;

    --bg:#151515;
    --panel:#20201F;
    --panel-soft:#30302E;
    --border:#3A3936;
    --text:#EEECE5;
    --text-soft:#D6D4C9;
    --text-muted:#A29E92;
    --text-faint:#6E6C63;

    /* --accent vira o tom CLARO: onde era fundo escuro com texto
       branco (selo e botão do plano), agora é fundo claro com texto
       escuro — ver os overrides logo abaixo. --accent-hover é usado
       como COR DE TEXTO (h1 em, eyebrow, ✓) e como fundo de :hover. */
    --accent:#EEECE5;
    --accent-hover:#D6D4C9;
    --accent-wash:rgba(238,236,229,0.08);
  }

  /* ---------- Header (a navbar canônica usa valores literais) ---------- */
  header::before{ background:rgba(21,21,21,0.86); }
  header.is-scrolled::before{ background:rgba(21,21,21,0.94); }
  header.is-scrolled{ box-shadow:0 6px 24px -18px rgba(0,0,0,.8); }

  header .logo{ color:#EEECE5; }
  header .nav-links a{ color:#A29E92; }
  header .nav-links a:hover{ color:#EEECE5; }
  header .btn-text{ color:#D6D4C9; }
  header .btn-text:hover{ color:#EEECE5; }
  header .btn-dark{ background:#EEECE5; color:#151515; }
  header .btn-dark:hover{ background:#D6D4C9; color:#151515; }

  /* ---------- Botões: no :hover o fundo vira --accent-hover (claro) ----------
     e o texto era #fff — branco sobre cinza claro some. */
  .btn-dark:hover,
  .btn-primary:hover,
  .btn-cta-primary:hover,
  .pricing-btn-primary:hover{ color:#151515; }

  .btn-secondary:hover{ background:rgba(255,255,255,.05); }

  /* ---------- Plano em destaque ---------- */
  .pricing-badge{ color:#151515; }
  .pricing-btn-primary{ color:#151515; }

  /* ---------- Hero: o halo era um cinza escuro sobre claro ---------- */
  .hero::before{
    background:radial-gradient(circle, rgba(238,236,229,0.07), transparent 68%);
  }

  /* ---------- Faixa CTA ----------
     Já era escura. Sobre fundo #151515 ela sumia, então ganha um tom
     um pouco mais alto e uma borda fina que a separa da página. */
  .cta{
    background:linear-gradient(160deg, #2A2927 0%, #1C1B19 100%);
    border:1px solid #3A3936;
  }
  .cta::before{
    background:radial-gradient(circle at 70% 30%, rgba(238,236,229,0.07), transparent 55%);
  }

  /* ---------- Ícones dos cartões ----------
     O traço vem do atributo stroke="#2B2A27" no SVG; CSS vence
     atributo de apresentação, então basta redefinir aqui. */
  .feature-icon svg{ stroke:var(--text-soft); }

  /* ---------- Cartões e banner de cookies ---------- */
  .feature-card:hover,
  .pricing-card:hover,
  .controle-card:hover{ box-shadow:0 10px 30px -12px rgba(0,0,0,.6); }
  .cookie-banner{ box-shadow:0 12px 32px rgba(0,0,0,0.5); }

  /* ---------- Imprensa: amostras da paleta da marca ----------
     As cores das amostras são as da marca e não mudam; só ganham uma
     borda visível, senão a #1F1E1D some no fundo escuro. */
  .kit-swatch{ border-color:#5A5954 !important; }
}