/* ═══════════════════════════════════════════════════════════════
   260822 — MODOS DE COR do portfólio (claro · roxo · escuro)
   Tokens: 260822_modos-cor_tokens.md (fonte da verdade)

   COMO APLICAR (quando o /sync-portfoliohs ou o Henrique levar pro site):
   1. Copiar este arquivo para o child theme henriquespina-child.
   2. Enfileirar DEPOIS do style.css no functions.php.
   3. O seletor de modo é mecânica (sem equivalente Kadence — ver
      KADENCE.md): JS grava data-modo="claro|roxo|escuro" no <html>
      e persiste em localStorage 'hs-modo'. Trecho pronto no fim.
   Não altera nenhum conteúdo editável — só a pele (variáveis).
   ═══════════════════════════════════════════════════════════════ */

/* Padrão a partir de 260827: sem data-modo = CLARO (prioritário, pedido do
   Henrique). Roxo e escuro viram modos explícitos via data-modo. Sites com a
   versão antiga deste arquivo (sem este bloco) seguem roxo — zero regressão
   pra quem não atualizar. */

/* ── 1 · CLARO (PADRÃO desde 260827; pedido original 260819) ────── */
html[data-modo="claro"],
html:not([data-modo]){
  --bg:      #EEF0F6;  /* base branco-gelo                       */
  --bg2:     #D4D4DE;  /* variação / linha                       */
  --purple:  #5A18C4;  /* banda CTA SEGUE roxa (identidade)      */
  --purple2: #7A35E0;
  --magenta: #EC0F7C;  /* constante nos 3 modos                  */
  --navy:    #140A2D;  /* vira tinta (texto/menus escuros)       */
  --ice:     #140A2D;  /* texto principal SOBRE a base clara     */
  --ink:     #EEF0F6;  /* invertido: texto sobre blocos escuros  */
  --line:    rgba(20,10,45,.16);
}
/* Hero segue escuro (o vídeo hero.mp4 é footage escura). */
html[data-modo="claro"] .hs-hero-blk,
html:not([data-modo]) .hs-hero-blk{color:#EEF0F6}

/* ── 2 · ROXO (explícito; igual ao padrão, pra constar) ───────── */
html[data-modo="roxo"]{
  --bg:#5B14D2; --bg2:#3C0B97; --purple:#5A18C4; --purple2:#7A35E0;
  --magenta:#EC0F7C; --navy:#1C0B43; --ice:#EEF0F6; --ink:#0E0820;
  --line:rgba(255,255,255,.16);
}

/* ── 3 · ESCURO ───────────────────────────────────────────────── */
html[data-modo="escuro"]{
  --bg:      #140A2D;  /* base roxo-profundo (frame 476:3)       */
  --bg2:     #0E0820;
  --purple:  #5A18C4;  /* CTA continua roxo                      */
  --purple2: #7A35E0;
  --magenta: #EC0F7C;
  --navy:    #1C0B43;
  --ice:     #EEF0F6;
  --ink:     #0E0820;
  --line:    rgba(255,255,255,.16);
}
/* 260829: a intro saiu dos modos — e sempre roxa (--intro-fundo no style.css).
   Decisao do Henrique: a diferenca de modos na intro nao foi planejada. */
/* html[data-modo="escuro"] #hs-loader{background:#0C0720} */

/* ── LIMITAÇÕES MAPEADAS (dívida consciente, não surpresa) ──────
   1. Há rgba(20,10,45,…) e cores fixas hardcoded no style.css
      (menu HS fast-travel, popup, loader). A pele por variável não
      os alcança — migrar pros tokens quando cada trecho for tocado.
   2. Páginas internas (body sem .home) seguem claras por ora —
      o modo vale pra home/Sobre até o design das internas existir.
   3. Imagens com texto queimado (cards, marquee) não mudam de pele
      — dependem de export novo do Henrique (regra de ouro 5).      */

/* ── SELETOR (referência — vai pro app.js quando aplicar) ───────
   (function(){
     var modos=["roxo","claro","escuro"], k="hs-modo",
         h=document.documentElement,
         salvo=localStorage.getItem(k);
     if(salvo) h.setAttribute("data-modo",salvo);
     window.hsModo=function(m){
       if(modos.indexOf(m)<0) return;
       h.setAttribute("data-modo",m); localStorage.setItem(k,m);
     };
   })();
   ═══════════════════════════════════════════════════════════════ */