/* =====================================================================
   VISIOCASH — TOKENS DE DESIGN COMPARTILHADOS
   Terminal de mercado: preto-tinta + dourado, Space Grotesk / Inter /
   IBM Plex Mono. Ver RELATORIO_CORRECOES.md para o racional completo.
   ===================================================================== */

:root {
  --ink: #0B0C0E;
  --surface: #16171B;
  --surface-2: #1D1E23;
  --line: #26282E;
  --gold: #C89B3C;
  --up: #2FA66B;
  --down: #C1453D;
  --warn: #D9A441;
  --text: #EDEAE2;
  --text-dim: #8B8D93;

  /* aliases usados no código legado — mantidos para compatibilidade */
  --bg-dark: var(--ink);
  --card-bg: var(--surface);
  --accent-color: var(--gold);
  --accent: var(--gold);
  --green: var(--up);
  --red: var(--down);
  --border: var(--line);
  --card: var(--surface);
  --text-main: var(--text);
  --glass-border: var(--line);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --transition: all 0.15s ease;

  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, .font-display { font-family: var(--font-display); }
.mono, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Botões ── */
.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: #14140F; border: none;
  padding: 12px 22px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  text-decoration: none; cursor: pointer; transition: var(--transition);
}
.btn:hover, .btn-primary:hover { filter: brightness(1.08); }
.btn-outline {
  background: transparent; color: var(--text); border: 1px solid var(--line);
  padding: 11px 21px; border-radius: var(--radius-md); font-weight: 600; font-size: .88rem;
  text-decoration: none; cursor: pointer; transition: var(--transition);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-danger { background: var(--down); color: #fff; }

/* ── Cartões / painéis ── */
.card, .panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px;
}

/* ── Formulários ── */
input, select, textarea {
  font-family: var(--font-body); background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 14px;
  font-size: .88rem; transition: var(--transition);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
label { font-size: .78rem; font-weight: 600; color: var(--text-dim); }

/* ── Badges de status ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; }
.badge-up   { background: rgba(47,166,107,.1);  color: var(--up);   border: 1px solid rgba(47,166,107,.28); }
.badge-down { background: rgba(193,69,61,.1);   color: var(--down); border: 1px solid rgba(193,69,61,.28); }
.badge-warn { background: rgba(217,164,65,.1);  color: var(--warn); border: 1px solid rgba(217,164,65,.28); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }