/* =============================================
   V2 MÍDIA — HUB DE GESTÃO
   base.css — Variáveis, Reset, Tipografia
   ============================================= */

/* ─── VARIÁVEIS ─────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #0e0f14;
  --bg-surface:    #14161e;
  --bg-card:       #1a1d28;
  --bg-card-hover: #1f2333;

  /* Bordas */
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.14);

  /* Texto */
  --text-primary:   #f0f1f6;
  --text-secondary: #8b8fa8;
  --text-muted:     #555870;

  /* Cor de destaque principal — Laranja */
  --accent:       #f97316;
  --accent-light: #fb923c;
  --accent-dim:   rgba(249, 115, 22, 0.14);
  --accent-glow:  rgba(249, 115, 22, 0.10);

  /* Cores secundárias */
  --accent-green:  #22c55e;
  --accent-blue:   #38bdf8;
  --accent-amber:  #facc15;
  --accent-purple: #a78bfa;
  --accent-red:    #f87171;

  /* Dimensões estruturais */
  --sidebar-w: 240px;
  --topbar-h:  64px;
  --footer-h:  48px;

  /* Bordas arredondadas */
  --radius:    14px;
  --radius-sm: 8px;

  /* Tipografia */
  --font-display: 'IBM Plex Sans', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Sombras */
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-glow-orange: 0 0 40px rgba(249, 115, 22, 0.15);
}

/* ─── RESET ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── BASE ───────────────────────────────────── */
html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 99px; }