/* ========================================
   ASTRO GESTÃO — Variáveis CSS
   ======================================== */

:root {
  /* Brand Colors */
  --primary: #FFC400;
  --primary-light: rgba(255, 196, 0, 0.08);
  --primary-mid: rgba(255, 196, 0, 0.25);
  --primary-glow: rgba(255, 196, 0, 0.15);
  
  /* Neutrals */
  --black: #0A0A0A;
  --dark-1: #111113;
  --dark-2: #18181B;
  --dark-3: #1F1F23;
  --dark-4: #27272C;
  --dark-5: #32323A;
  --gray-5: #4A4A54;
  --gray-4: #6B6B78;
  --gray-3: #90909A;
  --gray-2: #B8B8C2;
  --gray-1: #E0E0E6;
  --white: #F5F5F7;
  --pure-white: #FFFFFF;
  
  /* Semantic Colors */
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.1);
  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --info: #3B82F6;
  --info-bg: rgba(59, 130, 246, 0.1);
  --purple: #8B5CF6;
  --purple-bg: rgba(139, 92, 246, 0.1);
  
  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(255, 196, 0, 0.2);
  
  /* Layout */
  --sidebar-width: 260px;
  --topbar-height: 60px;
  
  /* Transitions */
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme (optional) */
[data-theme="light"] {
  --black: #FFFFFF;
  --dark-1: #FAFAFA;
  --dark-2: #F5F5F5;
  --dark-3: #EEEEEE;
  --dark-4: #E0E0E0;
  --dark-5: #D0D0D0;
  --gray-5: #999999;
  --gray-4: #777777;
  --gray-3: #555555;
  --gray-2: #333333;
  --gray-1: #1A1A1A;
  --white: #0A0A0A;
}