/* ==========================================================================
   HANGAR MMA — Modo noturno · loja/vitrine.php
   30/09/2026 — carregar DEPOIS do <style> da página e do hangar-dark.css.

   A vitrine tem design próprio (sem Tailwind) com tokens em :root. Aqui os
   tokens de SUPERFÍCIE e TEXTO são redefinidos; os de marca não mudam:
     --sinal (laranja: tarja, etiqueta clara, CTA, foco)  → intacto
     --tinta / --tinta-2 (placa em destaque, etiqueta)    → intactos
   --tinta também é usada como cor de TEXTO (.topo__link, .placa__titulo,
   .cta); esses três usos recebem regra própria em vez de inverter o token.
   Paleta escura derivada da --tinta (azul-petróleo), não do slate do painel:
     fundo #08131A · cartão #10212C · hover #162B38 · linha #233A49
     texto #C9D5DC · títulos #EEF3F6 · suave #93A5B1
   ========================================================================== */

/* ---------- Tokens do hangar-dark.css re-apontados (body, switch, toast) ---------- */
html.dark {
  --hg-bg: #08131A;
  --hg-surface: #10212C;
  --hg-surface-2: #162B38;
  --hg-border: #233A49;
  --hg-text: #EEF3F6;
  --hg-text-2: #C9D5DC;
  --hg-muted: #93A5B1;
  --hg-soft: #060F15;
}

/* ---------- Tokens da vitrine (só superfície e texto) ---------- */
html.dark {
  --papel: var(--hg-bg);
  --carta: var(--hg-surface);
  --linha: var(--hg-border);
  --texto: var(--hg-text-2);
  --suave: var(--hg-muted);
}

/* ---------- Usos de --tinta como cor de texto ---------- */
html.dark .topo__link { color: var(--hg-text); }
html.dark .placa__titulo { color: var(--hg-text); }
html.dark .cta { color: var(--hg-text); }          /* .placa:hover .cta continua laranja (--sinal) */

/* ---------- Placa em destaque: mesmo azul-petróleo, com contorno para não fundir ---------- */
html.dark .destaque { box-shadow: 0 0 0 1px var(--hg-border); }
html.dark .destaque:hover { box-shadow: 0 0 0 1px #2E4A5C, 0 18px 34px -20px rgba(0, 0, 0, .85); }

/* ---------- Placas da grade ---------- */
html.dark .placa:hover { border-color: #3A5466; box-shadow: 0 16px 28px -20px rgba(0, 0, 0, .8); }
html.dark .placa__capa { background: var(--hg-soft); }   /* fundo atrás da capa enquanto carrega */