/* ==========================================================================
   THEUZINHOTV - CSS VARIABLES & DESIGN SYSTEM (DARK MODE)
   ========================================================================== */

:root {
  /* Paleta Base Dark Mode */
  --bg-app: #080b11;
  --bg-sidebar: #0d121c;
  --bg-header: rgba(13, 18, 28, 0.85);
  --bg-card: #121824;
  --bg-card-hover: #172030;
  --bg-input: #0a0e17;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(37, 99, 235, 0.15);
  --bg-modal: #101622;
  --bg-modal-overlay: rgba(0, 0, 0, 0.75);

  /* Bordas e Divisores */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-card-hover: rgba(59, 130, 246, 0.4);
  --border-focus: #3b82f6;

  /* Cores de Destaque / Brand */
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-blue-vibrant: #0084ff;
  --accent-blue-neon: #38bdf8;
  --accent-blue-glow: rgba(0, 132, 255, 0.35);
  --accent-gradient: linear-gradient(135deg, #0084ff 0%, #00d2ff 100%);

  /* Textos */
  --text-main: #f8fafc;
  --text-primary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dimmed: #64748b;
  --text-inverse: #0b0f19;

  /* Badges & Status Semânticos */
  --status-active: #10b981;
  --status-active-bg: rgba(16, 185, 129, 0.15);
  --status-active-border: rgba(16, 185, 129, 0.3);

  --status-inactive: #64748b;
  --status-inactive-bg: rgba(100, 116, 139, 0.15);
  --status-inactive-border: rgba(100, 116, 139, 0.3);

  --status-warning: #f59e0b;
  --status-warning-bg: rgba(245, 158, 11, 0.15);
  --status-warning-border: rgba(245, 158, 11, 0.35);

  --status-danger: #ef4444;
  --status-danger-hover: #dc2626;
  --status-danger-bg: rgba(239, 68, 68, 0.15);
  --status-danger-border: rgba(239, 68, 68, 0.3);

  --status-info: #06b6d4;
  --status-info-bg: rgba(6, 182, 212, 0.15);
  --status-info-border: rgba(6, 182, 212, 0.3);

  /* Sombras & Glow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(0, 132, 255, 0.25);
  --shadow-warning-glow: 0 0 20px rgba(245, 158, 11, 0.25);

  /* Dimensões */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 70px;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 18px;

  /* Transições */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-header: 100;
  --z-sidebar: 110;
  --z-overlay: 105;
  --z-modal: 200;
  --z-toast: 300;
}