/* Temas da loja.
   ============================================================================
   ⚠️ ARQUIVO COMPARTILHADO PELAS DUAS PONTAS: a vitrine pública (`pagina()` em
   `functions/_vitrine.js`) e a PRÉVIA dentro do app do lojista (`/app/`). É de
   propósito, e é o ponto todo — prévia com paleta própria é prévia que mente, e o
   lojista só descobre a diferença depois de divulgar o link.

   O tema é um SLUG no banco (`lojas.tema`), nunca cores. Deixar o lojista escolher
   cor livre acabaria em texto cinza sobre fundo cinza: ninguém faz isso por má fé,
   faz por azar de combinação — e o anúncio simplesmente para de ser lido.

   ---------------------------------------------------------------------------
   COMO ESCOLHI ESTAS SEIS

   Fundo NEUTRO, não azulado. A primeira leva tinha `--bg: #120a0e` (vinho) e
   `#14100c` (laranja): fundo colorido some com a cor do carro. Lataria vermelha
   sobre fundo vinho, prata sobre grafite — o produto é foto de veículo, e o fundo
   existe para o carro aparecer, não para ter personalidade própria.

   ACENTOS DE MATIZ SEPARADA. `--acento` é o PREÇO (`.preco` no vitrine.css), o
   botão e o link. Se ele encostar em `--txt`, o preço deixa de saltar — foi o
   defeito do tema "escuro" antigo, que tinha acento branco: o número mais
   importante da página ficava com a mesma cor do resto.

   SEIS E NÃO OITO. Tirei "vinho" (rosa-neon sobre quase-preto, ilegível) e
   "dourado" (encostava no champanhe do grafite). Menos opção com mais diferença
   entre elas decide mais rápido que um leque que se confunde.

   ---------------------------------------------------------------------------
   A REVISÃO DE 09/08/2026, E OS TRÊS NÚMEROS QUE ELA ACHOU

   O relato foi "os temas não estão agradáveis", e o defeito não estava nas matizes.
   As seis continuam as mesmas. Estava aqui:

   1. `--bg` e `--bg-2` estavam a 2,6–5,6 pontos de L* um do outro — menos que um
      degrau perceptível. O card só existia porque tinha borda de 1px, e a página
      inteira lia como planilha. Agora o degrau é de 9,4 a 10,3 pontos, e a matiz do
      tema vive na SUPERFÍCIE (o card), nunca no fundo atrás da foto: a regra do
      "fundo neutro" acima continua valendo e é ela que manda no `--bg`.

   2. No tema Claro o preço dava 3,25:1 sobre o card, e o mínimo para texto é 4,5:1.
      É o número mais importante da página, e o primeiro a sumir com sol na tela —
      que é a condição normal de quem escaneia o QR no pátio. O acento do Claro
      fechou para `#06855F`: 4,64:1.

   3. ⚠️ O AVISO QUE VIVIA NO `vitrine.css` ESTAVA INVERTIDO. Ele dizia "nunca texto
      escuro sobre `--acento`; o par só fecha contraste no verde — no amarelo e no
      coral ele some". Medidos os seis, é o contrário: tinta escura sobre o acento
      passa em TODOS, de 5,50 a 11,79. Quem reprova é o texto BRANCO, entre 1,62 e
      3,46. O `style.css` já contrariava a regra desde sempre — `.btn` é acento
      sólido com texto escuro por cima, e é o controle mais legível da página.

      A consequência do aviso errado era visível: com "escuro sobre acento"
      proibido, todo controle tingido caía em `--acento-fraco` + `--txt`, e o botão
      "Aplicar" da barra de filtros virava um retângulo marrom no coral, oliva no
      escuro e roxo-sujo no violeta — com cara de desabilitado.

   ---------------------------------------------------------------------------
   ONZE VARIÁVEIS, E NÃO NOVE — `scripts/verificar_pagina_anuncio.mjs` cobra a lista

   `--vidro` É O FUNDO DA BARRA FIXA, e existe porque a barra tinha
   `rgba(11,15,23,.86)` cravado no `style.css`: no tema Claro, o nome da loja (que usa
   `--txt`, quase preto) ficava sobre uma barra ESCURA e sumia. O bug apareceu no
   único tema de fundo claro, que é como se descobre que uma cor foi escrita à mão.

   `--acento-tinta` É A TINTA QUE FECHA CONTRASTE SOBRE O ACENTO DAQUELE TEMA — e a
   falta dela é que produziu o aviso invertido de cima. Sem um lugar onde cada tema
   declare a sua, a única saída era proibir o par inteiro. Com ela, acento sólido é
   legal nos seis, e é o que o `.btn` e o `.f-aplicar` usam.

   `--sup` É A SOMBRA DO CARD. A vitrine não tinha nenhuma, e é por isso que nada na
   página tinha altura. Não é enfeite: junto com o degrau de L* é o que separa
   "conteúdo apoiado na página" de "conteúdo recortado nela" — e é o que a borda de
   1px estava tentando fazer sozinha.

   Cada bloco redefine as MESMAS onze variáveis, para que um tema novo seja onze
   linhas e não uma revisão de layout. */

/* Esmeralda — o padrão, e a paleta do produto */
[data-tema="verde"] {
  --bg: #050A09; --bg-2: #192321; --linha: #2F3B39;
  --txt: #EDF4F1; --txt-2: #94A9A3; --acento: #2EE6A8;
  --acento-fraco: rgba(46, 230, 168, .14); --acento-linha: #1E5643;
  --acento-tinta: #03130D;
  --vidro: rgba(5, 10, 9, .88);
  --sup: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 12px 28px rgba(0, 0, 0, .45);
}

/* Claro — o único de fundo claro, e o que mais parece "site sério" para quem
   compara com portal grande. Acento mais fechado de propósito: verde-neon sobre
   branco vibra e cansa; sobre escuro, não.

   Aqui o degrau é INVERTIDO em relação aos outros cinco: a superfície é o branco
   puro e quem recua é o fundo. Com `--bg` branco, como era antes, o card de
   `#f5f8fb` não tinha onde aparecer. */
[data-tema="claro"] {
  --bg: #ECF1EE; --bg-2: #FFFFFF; --linha: #DAE2DE;
  --txt: #0B1412; --txt-2: #55655F; --acento: #06855F;
  --acento-fraco: rgba(6, 133, 95, .12); --acento-linha: #A9D8C6;
  --acento-tinta: #FFFFFF;
  --vidro: rgba(255, 255, 255, .90);
  --sup: 0 1px 2px rgba(11, 20, 18, .06), 0 10px 26px rgba(11, 20, 18, .09);
}

/* Grafite — preto de verdade, para lataria escura e foto noturna não sumirem no
   fundo. Acento champanhe: dá ar de seminovo premium e, principalmente, faz o
   preço saltar num tema que de resto é monocromático. */
[data-tema="escuro"] {
  --bg: #070707; --bg-2: #1E1E20; --linha: #343438;
  --txt: #F5F5F7; --txt-2: #9C9CA6; --acento: #F0C14B;
  --acento-fraco: rgba(240, 193, 75, .14); --acento-linha: #6B5521;
  --acento-tinta: #1C1503;
  --vidro: rgba(7, 7, 7, .90);
  --sup: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 28px rgba(0, 0, 0, .5);
}

/* Azul */
[data-tema="azul"] {
  --bg: #050810; --bg-2: #1D2028; --linha: #343842;
  --txt: #EAF0FA; --txt-2: #94A5C0; --acento: #5B9BFF;
  --acento-fraco: rgba(91, 155, 255, .14); --acento-linha: #1C3F76;
  --acento-tinta: #04101F;
  --vidro: rgba(5, 8, 16, .88);
  --sup: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 12px 28px rgba(0, 0, 0, .45);
}

/* Violeta — entrou no lugar do vinho. Mesma família de "cor quente escura", sem o
   rosa-neon que brigava com tudo. */
[data-tema="violeta"] {
  --bg: #08060E; --bg-2: #211E29; --linha: #393543;
  --txt: #F1EDF9; --txt-2: #A79CBD; --acento: #A97DFF;
  --acento-fraco: rgba(169, 125, 255, .14); --acento-linha: #401E81;
  --acento-tinta: #0F0822;
  --vidro: rgba(8, 6, 14, .88);
  --sup: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 12px 28px rgba(0, 0, 0, .45);
}

/* Coral — o antigo "laranja", puxado para terracota. Laranja puro sobre escuro
   pisca; terracota fica quente sem gritar. */
[data-tema="coral"] {
  --bg: #0B0806; --bg-2: #261F1B; --linha: #3F3732;
  --txt: #F8F0EC; --txt-2: #B4A29B; --acento: #FF7A52;
  --acento-fraco: rgba(255, 122, 82, .14); --acento-linha: #732F1B;
  --acento-tinta: #1F0A02;
  --vidro: rgba(11, 8, 6, .88);
  --sup: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 12px 28px rgba(0, 0, 0, .45);
}

/* ===================================================== cabeçalho com marca */
/* Capa e logo aparecem no catálogo E no anúncio. A regra é a mesma dos perfis de
   rede social, e é a que o lojista já entende sem explicação: faixa larga atrás,
   logo à frente, nome ao lado. */
.marca-capa { position: relative; height: clamp(110px, 24vw, 210px); overflow: hidden;
              background: var(--bg-2); }
.marca-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Véu por cima da capa: foto de pátio ensolarada apaga texto claro, e a loja não
   controla a foto que subiu. */
.marca-capa::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.5)); }

.marca-linha { display: flex; gap: 14px; align-items: center; min-width: 0; }
.marca-logo { flex: none; width: 54px; height: 54px; border-radius: 15px;
              object-fit: cover; background: var(--bg-2);
              border: 2px solid var(--bg); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
/* Com capa, a logo sobe e encosta na borda dela — é o encaixe que faz o conjunto
   parecer um perfil, e não duas imagens soltas. */
.marca-capa + .topo .marca-logo { margin-top: -30px; }