/* ==========================================================================
   TEMA — PFX Gaming
   Carregar SEMPRE depois de site.css.

   Como funciona: em vez de reescrever cada seção, este arquivo troca o valor
   dos tokens de cor que a site.css já usa. As seções continuam pedindo
   var(--paper), var(--white), var(--ink)… e recebem valores diferentes
   conforme o tema.

     • padrão (sem classe no <html>)  → site inteiro ESCURO
     • <html class="tema-claro">      → site inteiro CLARO

   Hero, menu, painel mobile, faixa de números e o bloco roxo de contato
   ficam escuros nos dois temas — são as âncoras da marca.
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────
   1. ESCURO (padrão)
   As seções antes claras — intro, mercados, rodapé e a tarja de logos —
   pedem --paper e --white. Aqui esses dois tokens viram preto.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#08080a;
  --white:#111114;
  --ink:#f5f5f7;
  --muted:#9c9ca6;
  --line:rgba(245,245,247,.1);
  --shadow:0 40px 80px -40px rgba(0,0,0,.8);
}

/* Detalhes que a troca de token não alcança sozinha. */
.markets{background:var(--black);}
footer{background:var(--black);}

/* A imagem do slogan no rodapé: 10%, como pedido. */
.slogan-band .bg-img{opacity:.10;}

/* Logo do rodapé: mesmo lockup nos dois temas, só muda a cor do lettering
   (a versão colorida usa #0f0f2d e desapareceria no escuro).
   Mesma altura e mesma posição — é o mesmo desenho. */
.foot-logo-color{display:none;}
.foot-logo-claro{display:block;}
html.tema-claro .foot-logo-color{display:block;}
html.tema-claro .foot-logo-claro{display:none;}

/* O tracinho do rótulo (Licenças & Mercados etc.) usava --navy, quase
   preto: sumia no fundo escuro. Passa para o azul claro da marca. */
.eyebrow::before,
.eyebrow-center::after{background:#7d94ff;}
.eyebrow-accent::before,
.eyebrow-center.eyebrow-accent::after{background:var(--purple-1);}
html.tema-claro .eyebrow::before,
html.tema-claro .eyebrow-center::after{background:var(--navy);}
html.tema-claro .eyebrow.on-dark::before,
html.tema-claro .eyebrow-center.on-dark::after{background:#7d94ff;}
html.tema-claro .eyebrow-accent::before,
html.tema-claro .eyebrow-center.eyebrow-accent::after{background:var(--purple-1);}

/* Chip de país: o hover fixava branco, que estoura no escuro. */
.country-chip:hover{background:var(--black-3);}
html.tema-claro .country-chip:hover{background:#fff;}

/* Divisórias e bordas internas do rodapé seguem a linha clara. */
footer .foot-col a,
footer .foot-col li{color:var(--muted);}
footer .foot-col a:hover{color:var(--ink);}


/* ─────────────────────────────────────────────────────────────────────────
   2. CLARO
   Devolve os tokens de superfície clara e, ao mesmo tempo, clareia os
   tokens --black*, que são o fundo das seções escuras (pilares, serviços).
   ───────────────────────────────────────────────────────────────────────── */
html.tema-claro{
  --paper:#f4f3f1;
  --white:#ffffff;
  --ink:#131317;
  --muted:#63636b;
  --line:rgba(19,19,23,.1);
  --shadow:0 40px 80px -40px rgba(0,0,0,.45);

  /* as seções escuras viram claras */
  --black:#f4f3f1;
  --black-2:#ffffff;
  --black-3:#f0efec;
  --line-dark:rgba(19,19,23,.1);
}

html.tema-claro body{background:var(--paper);}
html.tema-claro .markets{background:var(--white);}
html.tema-claro footer{background:var(--white);}

/* Textos que a site.css fixou em branco e agora estão sobre fundo claro. */
html.tema-claro .why{color:var(--ink);}
html.tema-claro .why-item h3,
html.tema-claro .why-item:hover p,
html.tema-claro .why-item.is-tocado p,
html.tema-claro .pillar h3,
html.tema-claro .pillar:hover p,
html.tema-claro .pillar:hover .p-more,
html.tema-claro .section-head.on-dark h2{color:var(--ink);}

/* Os mesmos cartões, no estado de DESCANSO (sem hover, sem toque): o texto
   ficava em rgba(245,245,247,.55) — branco translúcido — porque em cima do
   fundo escuro original isso lia bem. No claro o fundo do cartão (--black-2/
   --black-3) vira quase branco e esse texto quase desaparece. Achamos esse
   com a régua de contraste, não porque alguém reportou "não enxergo": o
   .pillar:hover e o .why-item:hover/is-tocado já tinham sido corrigidos —
   faltava exatamente o estado sem toque, que é o padrão no celular. */
html.tema-claro .pillar p,
html.tema-claro .why-item p,
html.tema-claro .section-head.on-dark p{color:var(--muted);}

/* Mesmo problema no rótulo "Serviços" (eyebrow em cima do fundo escuro de
   .why): translúcido branco, apagado quando a seção vira clara. */
html.tema-claro .eyebrow.on-dark{color:var(--muted);}

/* Cartões claros precisam de contorno para não sumirem no fundo. */
html.tema-claro .pillar,
html.tema-claro .why-item{border:1px solid var(--line);}

/* Botão fantasma: no claro, contorno escuro. */
html.tema-claro .btn-ghost-dark{
  background:rgba(19,19,23,.04);
  color:var(--ink);
  border-color:var(--line);
}
html.tema-claro .btn-ghost-dark:hover{
  background:rgba(19,19,23,.07);
  border-color:rgba(19,19,23,.3);
}

/* No claro a imagem do rodapé sobre fundo branco precisa de um pouco mais
   de presença que os 10% do escuro para não sumir de vez. */
html.tema-claro .slogan-band .bg-img{opacity:.14;}


/* ─────────────────────────────────────────────────────────────────────────
   3. ÂNCORAS — escuras nos dois temas
   Valores literais, fora do sistema de tokens, para não serem arrastados
   pela troca acima.
   ───────────────────────────────────────────────────────────────────────── */
html.tema-claro .hero{background:#08080a;color:#fff;}
html.tema-claro h1.hero-title{color:#fff;}
html.tema-claro .hero-sub{color:rgba(245,245,247,.72);}
html.tema-claro .hero .btn-ghost-dark{
  background:rgba(245,245,247,.05);color:#fff;border-color:rgba(245,245,247,.1);
}
html.tema-claro .hero .btn-ghost-dark:hover{
  background:rgba(245,245,247,.09);border-color:rgba(255,255,255,.35);
}
html.tema-claro .mobile-panel{background:#08080a;}
html.tema-claro .mobile-panel a{color:#fff;}

/* MENU — nos dois temas o texto e o logotipo são claros, então a pílula
   precisa continuar escura quando o menu sai de cima da hero. Sem isso,
   no tema claro o menu fica branco sobre branco e some da tela.

   Trocar o menu inteiro para claro depende de um logotipo escuro em SVG,
   que ainda não existe na pasta: só há a versão clara e o lockup colorido
   (lettering #0f0f2d, proporção diferente da do menu). */
html.tema-claro .nav.scrolled .nav-inner{
  background:rgba(23,24,29,.82);
  border-color:rgba(245,245,247,.12);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.35);
}
html.tema-claro .nav-links a{color:rgba(245,245,247,.78);}
html.tema-claro .nav-links a:hover{color:#fff;}
html.tema-claro .nav .tema-btn{
  background:rgba(245,245,247,.06);
  border-color:rgba(245,245,247,.12);
  color:#fff;
}
html.tema-claro .nav .btn-ghost-dark{
  background:rgba(245,245,247,.05);color:#fff;border-color:rgba(245,245,247,.1);
}


/* ─────────────────────────────────────────────────────────────────────────
   4. BOTÃO DE TEMA
   ───────────────────────────────────────────────────────────────────────── */
.tema-btn{
  width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  background:rgba(245,245,247,.06);
  border:1px solid rgba(245,245,247,.12);
  color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.tema-btn:hover{background:rgba(245,245,247,.12);border-color:rgba(255,255,255,.3);}
.tema-btn svg{width:16px;height:16px;display:block;}


/* Troca de ícone: sol no escuro (clique = clarear), lua no claro. */
.tema-btn .ico-lua{display:none;}
html.tema-claro .tema-btn .ico-sol{display:none;}
html.tema-claro .tema-btn .ico-lua{display:block;}

@media (max-width:760px){
  .tema-btn{width:32px;height:32px;flex-basis:32px;}
}