/* =========================================================================
   BALVOX — Tema ESCURO
   Override sobre styles/main.css, ativado por [data-theme="dark"] no <html>.
   Não altera o tema claro: sem o atributo, nada aqui se aplica.
   ========================================================================= */

[data-theme="dark"] {
  /* Marca (Tier 1) — invertido para superfície escura.
     Fundo = a mesma cor do retângulo da logo BALVOX-dark-wordmark.svg
     (rgb 31,35,38 = #1F2326), para a logo embutida fundir com o site. */
  --color-pergaminho:   #1F2326; /* BACKGROUND BASE escuro = fundo da logo */
  --color-marfim:       #272B30; /* cards / surfaces (levemente acima do fundo) */
  --color-cinza-fumo:   #E9E7E1; /* texto principal · wordmark */
  --color-teal:         #1AA9A6; /* verde-petróleo · BALVOX (clareado) */

  /* Variações */
  --color-teal-abismo:  #3FD3CF; /* hover · ativo (clareado) */
  --color-teal-bruma:   #16403F; /* tags · info (fundo escuro) */
  --color-carvao:       #FBF9F4; /* números-herói · alto contraste */
  --color-cinza-bruma:  #9CA1A7; /* texto secundário */
  --color-cinza-pedra:  #565B61; /* separadores · UI */

  /* Acento */
  --color-cobre:        #DE7C50; /* Execução · CTA (clareado) */
  --color-areia-cobre:  #E8C9B2;

  /* Camadas semânticas */
  --color-estrategia:   #5E8AD0; /* azul-marinho clareado */
  --color-execucao:     #DE7C50;
  --color-arquitetura:  #1AA9A6;

  /* fio de borda hairline para superfícies escuras */
  --hair: rgba(255, 255, 255, 0.10);
  --hair-soft: rgba(255, 255, 255, 0.07);

  color-scheme: dark;
}

/* ===== Navbar: gradiente escuro (mesmo tom do fundo da logo) ===== */
[data-theme="dark"] .nav {
  background: linear-gradient(to bottom, rgba(31, 35, 38, 0.92), rgba(31, 35, 38, 0));
}

/* ===== Troca de logo (colorida → wordmark com fundo escuro) =====
   Selecionadores escopados em .nav__brand para superar a especificidade
   de `.nav__brand img` (0,1,1). O véu usa .veil__logo (em main.css). */
.nav__brand .brand-logo--dark { display: none; }
[data-theme="dark"] .nav__brand .brand-logo--light { display: none; }
[data-theme="dark"] .nav__brand .brand-logo--dark { display: block; }
[data-theme="dark"] .nav__brand img { height: 100%; width: auto; }

/* logo do rodapé: colorida no claro, wordmark dark (com fundo) no escuro */
.footer__logo--dark { display: none; }
[data-theme="dark"] .footer__logo--light { display: none; }
[data-theme="dark"] .footer__logo--dark { display: block; }

/* ===== Bordas hairline (claras sobre escuro) ===== */
[data-theme="dark"] .macro-card,
[data-theme="dark"] .oferta,
[data-theme="dark"] .layer-legend { border-color: var(--hair); }
[data-theme="dark"] .proof {
  border-top-color: var(--hair);
  border-bottom-color: var(--hair);
}
[data-theme="dark"] .cta-final {
  border-top-color: var(--hair);
  border-bottom-color: var(--hair);
}
[data-theme="dark"] .capacidade { border-top-color: var(--hair); }
[data-theme="dark"] .layer-legend__row + .layer-legend__row { border-top-color: var(--hair-soft); }
[data-theme="dark"] .footer__bottom { border-top-color: var(--hair); }

/* leve elevação dos cards para separá-los do fundo */
[data-theme="dark"] .macro-card,
[data-theme="dark"] .oferta,
[data-theme="dark"] .layer-legend {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}

/* ===== Toggle de tema na navbar (override escuro; base em main.css) ===== */
[data-theme="dark"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-cinza-fumo);
  background: rgba(255, 255, 255, 0.02);
}

/* ===== Halo de legibilidade — invertido para o escuro =====
   No tema claro o halo é uma aura CLARA (pergaminho) atrás do texto; sobre o
   fundo escuro essa aura vira um bloco luminoso atrás dos títulos. Aqui o
   halo passa a ser escuro (cor do fundo), mantendo a função sem o slab. */
[data-theme="dark"] .hero__title,
[data-theme="dark"] .hero__pain,
[data-theme="dark"] .hero__sub,
[data-theme="dark"] .s__title,
[data-theme="dark"] .s__lead,
[data-theme="dark"] .manifesto p,
[data-theme="dark"] .cta-final h2,
[data-theme="dark"] .cta-final .ticket {
  text-shadow:
    0 0 18px rgba(18, 19, 22, 0.92),
    0 0 36px rgba(18, 19, 22, 0.7);
}
[data-theme="dark"] .s__label,
[data-theme="dark"] .hero__tag,
[data-theme="dark"] .layer-tag,
[data-theme="dark"] .oferta__code,
[data-theme="dark"] .capacidade__role {
  text-shadow: 0 0 10px rgba(18, 19, 22, 0.92);
}