/* Barracão 360 — tokens de identidade (Handoff v1 · 2026) */
:root{
  --bb-noite:#0B1020;  --bb-grafite:#17181C;  --bb-papel:#F5F3EC;  --bb-tinta:#14161C;
  --bb-batida:#E63A4E;  --bb-dourado:#D9A441;            /* acentos */
  --bb-azul-acinz:#7F889E;  --bb-linha:#243049;          /* apoio sobre escuro */
  --bb-raio:14px;  --bb-sombra:0 6px 24px rgba(0,0,0,.22);
  --bb-font-display:'Sora',sans-serif;
  --bb-font-texto:'Hanken Grotesk',sans-serif;
  --bb-font-mono:'JetBrains Mono',monospace;
}

/* movimento — pulso da batida (~72 bpm) */
@keyframes bb-beat{ 0%,100%{transform:scale(1)} 18%{transform:scale(1.24)} }
.bb-beat{ animation:bb-beat .84s cubic-bezier(.2,.7,.3,1) infinite; transform-origin:center }
@media (prefers-reduced-motion: reduce){ .bb-beat{animation:none} }

/* componentes base */
.bb-btn--batida{ background:var(--bb-batida); color:#fff;
  font-family:var(--bb-font-display); font-weight:600; border:0;
  border-radius:10px; padding:12px 22px }
.bb-btn--ghost{ background:transparent; color:var(--bb-papel);
  border:1px solid var(--bb-linha); border-radius:10px; padding:12px 22px }

.bb-card{ background:#fff; border:1px solid #E0DACB;
  border-radius:var(--bb-raio); box-shadow:var(--bb-sombra); padding:20px 22px }
.bb-kpi{ font-family:var(--bb-font-mono); font-size:28px }
.bb-kpi .up{ color:var(--bb-batida) }   /* a batida marca o dado-chave */