:root {
  /* ===== CORES BASE ===== */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ===== CORES PRINCIPAIS ===== */
  --primary-color: #1835b3;          /* Azul principal do sistema */
  --primary-dark: #142a8f;           /* Azul escuro */

  /* ===== CORES SEMÂNTICAS ===== */
  --success-color: #21c044;          /* Verde - sucesso/positivo */
  --warning-color: #ff8b2d;          /* Laranja - aviso */
  --danger-color: #d30030;           /* Vermelho - erro/perigo */
  --info-color: #1698e9;            /* Azul claro - informação */

  /* ===== CORES DE APOIO ===== */
  --gray-color: #6d6c6c;            /* Cinza padrão */
  --gray-light: #9ca3af;            /* Cinza claro */
  --gray-lighter: #e0e0e0;          /* Cinza muito claro */
  --purple-color: #8b5cf6;          /* Roxo */

  /* ===== CORES ESPECÍFICAS (Charts/Componentes) ===== */
  --chart-blue-light: #00a1d6;      /* Azul claro específico para charts */
  --chart-blue-cyan: #02c1ff;       /* Azul ciano para charts */
  --chart-orange: #ff6b35;          /* Laranja específico para charts */
  --chart-yellow: #ffd23e;          /* Amarelo claro para charts */
  --chart-yellow-gold: #ffd700;     /* Amarelo ouro para charts */
  --chart-yellow-support: #fddb43;  /* Amarelo de apoio para charts */
  --chart-red: #c80a2d;            /* Vermelho escuro para charts */
  --support-red-dark: #520312;      /* Vermelho muito escuro */
  --support-blue-bg: #f4faff;       /* Fundo azul claro */
  --support-blue-border: #c0d8f1;   /* Borda azul claro */
  --background-red-light: #ffebee;  /* Fundo vermelho claro */
  --color-gray-50: #f9fafb;         /* Cinza 50 */
  --color-gray-100: #f3f4f6;        /* Cinza 100 */
  --color-blue-600: #2563eb;        /* Azul 600 */

  /* ===== CORES DE TEXTO ===== */
  --text-primary: #333333;          /* Texto principal */
  --text-secondary: #666666;        /* Texto secundário */
  --text-muted: #999999;            /* Texto esmaecido */

  /* ===== CORES DE FUNDO ===== */
  --background-primary: #ffffff;     /* Fundo principal branco */
  --background-secondary: #f5f5f5;   /* Fundo secundário cinza claro */
  --background-hover: #f5f5f5;       /* Fundo de hover (mesmo que secondary) */
  --sidebar-bg: #ffffff;             /* Fundo da sidebar */

  /* ===== CORES DE FUNDO PARA MODAIS ===== */
  --modal-background: #ffffff;       /* Fundo dos modais */
  --modal-overlay: rgba(0, 0, 0, 0.5); /* Overlay escuro dos modais */

  /* ===== CORES DE BORDA ===== */
  --border-color: #e0e0e0;
  
  /* ===== TIPOGRAFIA ===== */
  --font-primary: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* ===== ESPAÇAMENTOS ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 30px;
  --spacing-4xl: 40px;
  
  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
  
  /* ===== ICONS ===== */
  --icon-filter-secondary: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.9) contrast(0.9);
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.3s ease-in-out;

  /* ===== Z-INDEX ===== */
  --z-modal-overlay: 9999;
  --z-modal-content: 10000;
  
  /* ===== BREAKPOINTS ===== */
  --breakpoint-xs: 360px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 576px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 992px;
  --breakpoint-2xl: 1024px;
  --breakpoint-3xl: 1200px;
}