/* ══════════════════════════════════════════════════════════════════
   tema-bf.css — padrão visual de brunofuzetto.com.br.
   A página fica clara (papel, tinta, laranja) e cada palco onde uma
   animação roda vira um painel azul-marinho, como os painéis de
   interface do site. As animações foram feitas para fundo escuro e
   continuam no escuro: só o palco redefine as variáveis.
   Carregar sempre por último.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Instrument Sans';src:url(../fontes/instrument-sans.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fontes/jetbrains-mono.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

/* ── página: papel, tinta, laranja ─────────────────────────────── */
html,body{background:#F3F2EE;color:#101010}
::selection{background:#FF5A1F;color:#fff}

.capa,.vcss-root,.vjs-root{
  --canvas:#F3F2EE;   /* papel                               */
  --lift:#E3E1DA;     /* hairline e superfície um passo acima */
  --stroke:#CDCAC1;
  --graphite:#9A978E;
  --granite:#5F5E59;  /* texto secundário                     */
  --stone:#6B6A65;    /* rótulos                              */
  --bone:#101010;     /* tinta                                */
  --chalk:#FF5A1F;    /* preenchimento de ênfase: laranja     */
  --signal:#FF5A1F;
  --metric:#56623F;   /* oliva                                */
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --bg:var(--canvas);--card:var(--lift);--card2:var(--lift);--border:var(--stroke);
  --fg:var(--bone);--fg-muted:var(--granite);--fg-dim:var(--stone);--accent:var(--signal);
  --display:var(--sans);--ui:var(--sans);
  background:var(--canvas);color:var(--bone);
}

/* botões e abas em laranja levam texto branco */
.capa .btn.claro,.capa .nav .links a.forte,.vcss-root .abas a.on,.vjs-root .abas a.on,
.vcss-root .copiar,.vjs-root .copiar{color:#fff}
.capa .btn.claro:hover,.capa .nav .links a.forte:hover,.vcss-root .copiar:hover,.vjs-root .copiar:hover{background:#E84A12;color:#fff}

/* títulos mais firmes, como no site */
.capa h1,.vcss-root h1,.vjs-root h1{font-weight:500;letter-spacing:-.035em}
.capa h2,.capa h3,.vcss-root h2,.vcss-root h3,.vjs-root h2,.vjs-root h3{font-weight:500}

/* ── topo: curvas de nível do site ─────────────────────────────── */
.capa .hero,.vcss-root .hero,.vjs-root .hero{
  background:
    linear-gradient(90deg,#F3F2EE 0%,rgba(243,242,238,.92) 38%,rgba(243,242,238,.45) 72%,rgba(243,242,238,.15) 100%),
    url(../img/relevo.svg) center/cover no-repeat;
  border-bottom:1px solid var(--lift);
}
.capa .nav{background:rgba(243,242,238,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ── cartões: brancos sobre o papel ────────────────────────────── */
html .vcss-root .card,html .vjs-root .card{background:#fff !important;border-color:var(--lift) !important;box-shadow:0 18px 40px -30px rgba(12,35,64,.45)}
html .capa .porta{background:#fff;border-color:var(--lift)}
html .capa .porta:hover{border-color:var(--signal)}
.capa .cartao{background:#0C2340;color:#F3F2EE}
.capa .cartao h2,.capa .cartao .eyebrow{color:#F3F2EE}
.capa .cartao p{color:#C5D1E0}
.capa .cartao .btn.escuro{background:#FF5A1F;color:#fff}
.capa .cartao .btn.escuro:hover{background:#E84A12}

/* ── palcos: azul-marinho, onde as animações rodam ─────────────── */
.vcss-root .palco,.vjs-root .palco,.capa .painel{
  --canvas:#0C2340;
  --lift:#173052;
  --stroke:#2B4A72;
  --graphite:#3E5D85;
  --granite:#9DB0C8;
  --stone:#C5D1E0;
  --bone:#F3F2EE;
  --chalk:#FFFFFF;
  --signal:#FF5A1F;
  --metric:#D6F35B;   /* limão */
  --bg:#0C2340;--card:#173052;--card2:#173052;--border:#2B4A72;
  --fg:#F3F2EE;--fg-muted:#9DB0C8;--fg-dim:#C5D1E0;--accent:#FF5A1F;
  color:#F3F2EE;
}
.vcss-root .palco,.vjs-root .palco{background:#0C2340 !important}
.capa .painel{background:#0C2340;border-color:#0C2340}
.capa .painel .barra{background:#173052;border-bottom-color:#0C2340}
.capa .palco .amostra{background:#173052;border-color:#2B4A72}