/* ══════════════════════════════════════════════════════════════════════
   MB Finance Intelligence Hub — Design System
   Gerado a partir da skill UI-UX-Pro-Max (estilo: Dark Mode / OLED,
   produto: fintech / dashboard analitico). Fonte unica de tokens + polimento
   global (tipografia, foco, movimento, scrollbar). NAO define layout de
   pagina — apenas os fundamentos que deixam o sistema coeso.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Superficies (slate / OLED) */
  --bg:            #020617;   /* fundo base da pagina         */
  --surface:       #0f172a;   /* cartoes / paineis            */
  --surface-2:     #1e293b;   /* elevado / trilhos            */
  --surface-3:     #24314a;
  --border:        #24314a;   /* bordas sutis                 */
  --border-strong: #334155;

  /* Texto */
  --text:          #f8fafc;   /* primario                     */
  --text-muted:    #94a3b8;   /* secundario                   */
  --text-dim:      #64748b;   /* terciario / legendas         */

  /* Marca + estados semanticos (paleta de status reservada) */
  --brand:         #4f8cff;   /* azul de marca / links / dados */
  --brand-2:       #38bdf8;   /* ciano — magnitude em graficos */
  --accent:        #22c55e;   /* verde — CTA / conversao / ok  */
  --accent-soft:   #4ade80;   /* verde claro p/ texto em dark  */
  --danger:        #ef4444;   /* inapto / erro                 */
  --warning:       #fbbf24;   /* perdido / atencao            */

  /* Raios, sombras, transicoes */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 8px 24px rgba(2,6,23,.55);
  --ring: 0 0 0 3px rgba(34,197,94,.45);   /* foco = verde acento */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t: 220ms cubic-bezier(.4,0,.2,1);

  /* Tipografia (mesma familia do painel principal: sans no corpo, mono tabular nos numeros) */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body{ font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3{ letter-spacing:-.01em; }

/* Numeros com fonte tabular mono (KPIs, tabelas, valores) — a "assinatura" de dashboard */
.val,.num,.kpi .val,.bar-val,.tabular,td.num,.stat-num{
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;
}

/* ── Movimento e interacao (checklist da skill) ───────────────────────── */
a, button, .btn, [role="button"], input, select, textarea,
.sb-item, .kpi, .chart, .card, tbody tr, th[data-k]{
  transition: background-color var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform var(--t-fast), opacity var(--t);
}
button, .btn, [role="button"], a[href], summary, th[data-k], input[type=checkbox], label[for]{
  cursor: pointer;
}
button:disabled, .btn:disabled{ cursor: not-allowed; }

/* Foco visivel para navegacao por teclado (acento verde) */
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  box-shadow: var(--ring);
}

/* ── Scrollbar slate ──────────────────────────────────────────────────── */
*{ scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--border-strong); background-clip: content-box; }

/* Selecao de texto */
::selection{ background: rgba(79,140,255,.35); color: #fff; }

/* ── Respeita reducao de movimento ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}