/* =====================================================================
 * design-tokens.css · M275 Sprint 3.5 Vaga B1.5 · 2026-06-27
 *
 * Sistema de tokens da identidade FF/BT/W7 · paleta institucional
 * dark + gold derivada do mockup do drawer Venda Cérebro.
 *
 * Como usar:
 *   1. <link rel="stylesheet" href="/design-tokens.css"> no index.html
 *   2. Usar var(--cb-bg), var(--cb-gold), etc. em CSS novo
 *   3. NÃO altera o look atual da app · só disponibiliza variáveis
 *      para componentes novos (Cérebro · Vista Admin · 3 caixas drawer
 *      Venda). Migração da app antiga será incremental por macro.
 *
 * Prefixo "cb" = "Cérebro". Quando todos os componentes usarem cb-*
 * ficamos prontos para tirar o prefixo e dar override global.
 * ===================================================================== */

:root {
  /* --- PALETA · superfícies dark --- */
  --cb-bg:        #0f172a;  /* navy escuro · fundo principal */
  --cb-panel:    #1e293b;  /* navy médio · cards / drawers */
  --cb-panel-2:  #2a3a52;  /* hover / activo */
  --cb-border:   #334155;  /* divisórias */

  /* --- TEXTO --- */
  --cb-txt:      #e2e8f0;  /* corpo · gris claro */
  --cb-txt-2:   #94a3b8;  /* muted · descrições, labels */
  --cb-txt-h:   #f8fafc;  /* high contrast · numerais hero */

  /* --- ACENTOS · brand --- */
  --cb-navy:    #1e3a8a;  /* navy histórico FF */
  --cb-gold:    #d4a843;  /* dourado · CTA · títulos serif */
  --cb-gold-d:  #b8902f;  /* dourado escuro · hover */

  /* --- ESTADOS · 5 cores semânticas --- */
  --cb-green:   #10b981;  /* OK · sucesso · gate completo */
  --cb-amber:   #f59e0b;  /* pendente · atenção */
  --cb-red:     #ef4444;  /* erro · em falta crítica */
  --cb-indigo:  #6366f1;  /* informacional · eventos · cérebro */
  --cb-muted:   #64748b;  /* n/a · neutro */

  /* --- TIPOGRAFIA --- */
  --cb-font-serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cb-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cb-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace;

  /* --- ESCALA TIPOGRÁFICA --- */
  --cb-fs-hero:   36px;   /* numeral hero · KPI */
  --cb-fs-h1:     28px;   /* serif · título de vista */
  --cb-fs-h2:     16px;   /* uppercase · card heading */
  --cb-fs-body:   14px;
  --cb-fs-sm:     13px;
  --cb-fs-xs:     11px;
  --cb-fw-h2:     600;
  --cb-fw-body:   400;
  --cb-fw-strong: 600;
  --cb-tracking-h2: 0.5px;
  --cb-tracking-uppercase: 1px;

  /* --- ESPAÇOS --- */
  --cb-space-1:   4px;
  --cb-space-2:   8px;
  --cb-space-3:   12px;
  --cb-space-4:   16px;
  --cb-space-5:   20px;
  --cb-space-6:   24px;
  --cb-space-8:   32px;

  /* --- RAIO + SOMBRA --- */
  --cb-radius-sm:  6px;
  --cb-radius:     12px;
  --cb-radius-lg:  16px;
  --cb-shadow-sm:  0 1px 2px rgba(0,0,0,.20);
  --cb-shadow:     0 4px 12px rgba(0,0,0,.30);
  --cb-shadow-lg:  0 12px 40px rgba(0,0,0,.45);

  /* --- TRANSIÇÕES --- */
  --cb-trans-fast: 0.15s ease;
  --cb-trans:      0.25s ease;
}

/* ---------------------------------------------------------------------
 * UTILITY · usa estas classes em HTML novo · prefixo cb-
 * --------------------------------------------------------------------- */

.cb-card {
  background: var(--cb-panel);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: var(--cb-space-5);
  color: var(--cb-txt);
}
.cb-card h2 {
  margin: 0 0 var(--cb-space-2);
  font-family: var(--cb-font-sans);
  font-size: var(--cb-fs-h2);
  font-weight: var(--cb-fw-h2);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-h2);
  color: var(--cb-gold);
}
.cb-card .cb-sub {
  color: var(--cb-txt-2);
  font-size: var(--cb-fs-sm);
  margin-bottom: var(--cb-space-3);
}

.cb-h1 {
  font-family: var(--cb-font-serif);
  font-weight: 600;
  font-size: var(--cb-fs-h1);
  color: var(--cb-gold);
  margin: 0 0 var(--cb-space-1);
}

.cb-row {
  display: flex;
  justify-content: space-between;
  padding: var(--cb-space-2) 0;
  border-bottom: 1px solid var(--cb-border);
  font-size: var(--cb-fs-sm);
}
.cb-row:last-child { border-bottom: none; }
.cb-row .cb-k { color: var(--cb-txt-2); }
.cb-row .cb-v { color: var(--cb-txt); font-weight: 500; }
.cb-v-mono   { font-family: var(--cb-font-mono); }

.cb-bullet {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: var(--cb-space-2);
  vertical-align: middle;
}
.cb-b-ok   { background: var(--cb-green); }
.cb-b-pend { background: var(--cb-amber); }
.cb-b-na   { background: var(--cb-muted); }
.cb-b-no   { background: var(--cb-red); opacity: 0.7; }

.cb-gate {
  display: flex; align-items: center;
  padding: var(--cb-space-2) var(--cb-space-3);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  margin-bottom: var(--cb-space-1);
  cursor: pointer;
  transition: background var(--cb-trans-fast), border-color var(--cb-trans-fast);
}
.cb-gate:hover {
  background: rgba(212, 168, 67, 0.08);
  border-color: var(--cb-gold);
}
.cb-gate .cb-label { flex: 1; font-size: var(--cb-fs-sm); }
.cb-gate .cb-val   { font-size: var(--cb-fs-xs); color: var(--cb-txt-2); }
.cb-gate-ok   { border-color: rgba(16, 185, 129, 0.30); }
.cb-gate-pend { border-color: rgba(245, 158, 11, 0.30); }

.cb-btn {
  display: inline-flex; align-items: center; gap: var(--cb-space-1);
  padding: var(--cb-space-2) var(--cb-space-4);
  border-radius: var(--cb-radius-sm);
  border: 1px solid var(--cb-border);
  background: transparent;
  color: var(--cb-txt);
  cursor: pointer;
  font-family: var(--cb-font-sans);
  font-size: var(--cb-fs-sm);
  font-weight: 500;
  transition: background var(--cb-trans-fast);
}
.cb-btn:hover           { background: var(--cb-panel-2); }
.cb-btn:disabled        { opacity: 0.4; cursor: not-allowed; }
.cb-btn-primary         { background: var(--cb-gold);  color: #1a1410; border-color: var(--cb-gold); }
.cb-btn-primary:hover   { background: var(--cb-gold-d); }
.cb-btn-success         { background: var(--cb-green); color: white; border-color: var(--cb-green); }
.cb-btn-danger          { background: var(--cb-red);   color: white; border-color: var(--cb-red); opacity: 0.85; }

.cb-timeline-item {
  display: flex; gap: var(--cb-space-3);
  padding: var(--cb-space-3);
  border-left: 2px solid var(--cb-indigo);
  margin-left: var(--cb-space-1);
  margin-bottom: var(--cb-space-1);
  background: rgba(99, 102, 241, 0.06);
  border-radius: 0 var(--cb-radius-sm) var(--cb-radius-sm) 0;
}
.cb-tl-time {
  color: var(--cb-txt-2);
  font-size: var(--cb-fs-xs);
  font-family: var(--cb-font-mono);
  flex-shrink: 0;
  min-width: 110px;
}
.cb-tl-body  { font-size: var(--cb-fs-sm); }
.cb-tl-tipo  { font-weight: 600; color: var(--cb-gold); }
.cb-tl-meta  { color: var(--cb-txt-2); font-size: var(--cb-fs-xs); margin-top: 2px; }

.cb-note {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid var(--cb-indigo);
  padding: var(--cb-space-3) var(--cb-space-4);
  font-size: var(--cb-fs-sm);
  color: var(--cb-txt-2);
  margin-top: var(--cb-space-4);
  border-radius: 0 var(--cb-radius-sm) var(--cb-radius-sm) 0;
}

/* ---------------------------------------------------------------------
 * SCOPE wrapper · usar para limitar dark mode a uma vista
 * Adicionar class="cb-scope" no contenedor da vista nova.
 * --------------------------------------------------------------------- */
.cb-scope {
  background: var(--cb-bg);
  color: var(--cb-txt);
  font-family: var(--cb-font-sans);
}
.cb-scope a { color: var(--cb-gold); }