/* ============================================================
   SINAPSE — tema claro/escuro
   Camada de PELE por cima do sistema de design em styles.css.
   Só reescreve tokens de superfície/cor — nunca a marca. O
   .brand-mark (quadrado azul + cérebro/rede da nav) usa cor
   fixa (não token), então atravessa o tema intocado, de
   propósito: a identidade não muda, só a casa ao redor dela.
   Tema padrão (sem [data-theme]) é exatamente o que já está no
   ar — zero mudança. Só duas opções, como YouTube/Google: claro
   e escuro — nada de tema decorativo extra pra escolher.
   ============================================================ */

[data-theme="escuro"] {
  --blue:        #5aa6ff;
  --blue-600:    #4d8fe0;
  --blue-800:    #a9cbff;
  --ink:         #eef3fc;
  --ink-soft:    #a9b7d1;
  --gold:        #e6c98a;
  --gold-soft:   #f2ddb0;

  --p-atencao:    #e0a24d;
  --p-memoria:    #dd7f9c;
  --p-executiva:  #9a85e0;
  --p-linguagem:  #3fb8c2;
  --p-matematica: #52bd85;
  --p-percepcao:  #dd7259;

  --bg:        #0b1424;
  --bg-2:      #101d33;
  --card:      #14213a;
  --line:      #223252;
  --line-2:    #2c3f63;

  --sh-sm: 0 2px 10px rgba(0,0,0,.35);
  --sh-md: 0 12px 32px rgba(0,0,0,.45);
  --sh-lg: 0 26px 64px rgba(0,0,0,.55);
  --sh-glow: 0 0 0 4px rgba(90,166,255,.22);

  color-scheme: dark;
}
[data-theme="escuro"] body { background: var(--bg); }
[data-theme="escuro"] .nav,
[data-theme="escuro"] .player-top { background: rgba(11,20,36,.9); }
[data-theme="escuro"] .hero-frame,
[data-theme="escuro"] .maker-photo img,
[data-theme="escuro"] .about-photo img { border-color: #1a2843; }
[data-theme="escuro"] img { filter: brightness(.94) saturate(1.04); }

/* Superfícies com gradiente/cor claros fixos no CSS-base (styles.css) —
   ficavam como manchas brancas ilegíveis por cima do fundo escuro. Reescreve
   só a superfície, mantendo a mesma linguagem (banner suave, pílula de
   destaque, cartão de dica) dentro da paleta do tema. */
[data-theme="escuro"] .app-guide { background: linear-gradient(135deg, var(--bg-2), var(--card)); }
[data-theme="escuro"] .app-guide .num { background: linear-gradient(135deg, var(--blue), var(--blue-600)); }
[data-theme="escuro"] .demo-pill { background: rgba(82,189,133,.16); color: #7fd6a4; border-color: rgba(82,189,133,.35); }
[data-theme="escuro"] .phase-help { background: linear-gradient(135deg, var(--bg-2), var(--card)); }
[data-theme="escuro"] .phase-step.locked .phase-dot { background: var(--bg-2); color: var(--ink-soft); }
[data-theme="escuro"] .field input,
[data-theme="escuro"] .pro-field input,
[data-theme="escuro"] .puzzle-tray,
[data-theme="escuro"] .puzzle-board { background: var(--bg-2); }
[data-theme="escuro"] .pro-field select,
[data-theme="escuro"] .pro-select {
  background-color: var(--bg-2);
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22m6 9 6 6 6-6%22 stroke=%22%23a9b7d1%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E');
}

/* ============================================================
   Seletor de tema — vive dentro de Configurações (js/app.js
   renderConfigSection), não mais flutuando sobre a tela. Botões
   planos: cor sólida do tema como marcador pequeno + rótulo em
   texto, sem gradiente nem drop-shadow no ícone — minimalista e
   óbvio, não decorativo.
   ============================================================ */
.theme-switch { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-switch button {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer;
  font: inherit; font-weight: 700; font-size: .85rem;
  transition: border-color .15s, background .15s;
}
.theme-switch button:hover { border-color: var(--line-2); }
.theme-switch button.on { border-color: var(--ink); background: var(--bg-2); }
.theme-switch button svg { width: 18px; height: 18px; flex: none; }
.theme-switch button[data-t="claro"] svg { color: #c8973f; }
.theme-switch button[data-t="escuro"] svg { color: #5aa6ff; }

@media (max-width: 560px) {
  .theme-switch button { padding: 9px 12px; font-size: .8rem; }
}

/* Variante flutuante — só na landing pública e no site institucional, que
   não têm uma tela de Configurações pra abrigar o seletor. Some assim que
   a área logada ou o player abrem (specs: o toggle mora em Configurações
   lá dentro, não solto sobre a tela). Ícone sozinho, sem rótulo. */
.theme-switch--floating {
  position: fixed; left: 18px; bottom: 18px; z-index: 60;
  gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.theme-switch--floating button {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center;
}
.theme-switch--floating button svg { width: 17px; height: 17px; }
@media (max-width: 560px) {
  .theme-switch--floating { left: 10px; bottom: 10px; }
  .theme-switch--floating button { width: 32px; height: 32px; }
}
#app:not(.hidden) ~ .theme-switch--floating,
#player-root:not(:empty) ~ .theme-switch--floating { display: none; }