/* =========================================================================
   CHATFLOW WHATSAPP CRM - CORE DESIGN SYSTEM & VARIABLES
   ========================================================================= */

:root {
  /* Color Palette - Sleek Premium Dark Mode */
  --bg-primary: #080c16;
  --bg-secondary: rgba(15, 22, 42, 0.7);
  --bg-card: rgba(20, 29, 56, 0.55);
  --bg-card-hover: rgba(26, 38, 73, 0.75);
  --border-color: rgba(255, 255, 255, 0.06);
  --border-color-glow: rgba(0, 242, 254, 0.25);
  
  /* Text Hues */
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;
  
  /* Glowing Neon Accents */
  --theme-glow: #10b981;
  --theme-glow-end: #0284c7;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --accent-yellow: #f59e0b;
  --accent-violet: #8b5cf6;
  --accent-pink: #ec4899;

  /* Fonts Families */
  --font-primary: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Shadows */
  --glow-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --inset-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* Glassmorphism Preset Utilities */
.glass-panel {
  background: var(--bg-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow), var(--inset-shadow);
}

.glass-panel-interactive {
  composes: glass-panel;
  transition: var(--transition-smooth);
}

.glass-panel-interactive:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}