/**
 * Variáveis CSS - Tema Moderno Dark
 * Design System com cores escuras e elegantes
 */

:root {
  /* Cores principais - Dark Theme */
  --bg-primary: #0f1419;           /* Background principal (quase preto) */
  --bg-secondary: #1a1f2e;         /* Background secundário */
  --bg-tertiary: #242b3d;          /* Background terciário */
  
  --surface-primary: #1e2535;      /* Cards e superfícies */
  --surface-secondary: #2a3142;    /* Hover de cards */
  --surface-elevated: #323947;     /* Elementos elevados */
  
  /* Cores adicionais para menu mobile */
  --accent-primary-dark: #1e40af;  /* Azul mais escuro */
  
  /* Textos */
  --text-primary: #ffffff;         /* Texto principal (branco) */
  --text-secondary: #b8bcc8;       /* Texto secundário (cinza claro) */
  --text-tertiary: #7d8694;        /* Texto terciário (cinza médio) */
  --text-muted: #5e6673;           /* Texto discreto (cinza escuro) */
  
  /* Acentos modernos */
  --accent-primary: #3b82f6;       /* Azul moderno */
  --accent-primary-hover: #2563eb;
  --accent-primary-light: rgba(59, 130, 246, 0.1);
  
  --accent-success: #10b981;       /* Verde moderno */
  --accent-success-hover: #059669;
  --accent-success-light: rgba(16, 185, 129, 0.1);
  
  --accent-danger: #ef4444;        /* Vermelho moderno */
  --accent-danger-hover: #dc2626;
  --accent-danger-light: rgba(239, 68, 68, 0.1);
  
  --accent-warning: #f59e0b;       /* Amarelo/laranja */
  --accent-warning-light: rgba(245, 158, 11, 0.1);
  
  /* Cores financeiras */
  --color-ganho: #10b981;
  --color-despesa: #ef4444;
  
  /* Bordas */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.12);
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  
  /* Sombras modernas */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  
  /* Glow effects */
  --glow-primary: 0 0 20px rgba(59, 130, 246, 0.3);
  --glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
  --glow-danger: 0 0 20px rgba(239, 68, 68, 0.3);
  
  /* Espaçamentos */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  
  /* Tipografia */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  
  /* Transições */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Larguras */
  --max-width: 1400px;
  --max-width-narrow: 800px;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-tooltip: 1050;
}