/* ============================================================================
   PALETA DE CORES CENTRALIZADA - Viva Higienizado
   Arquivo: variables.css
   Propósito: Centralizar todas as variáveis de cores do projeto
   ============================================================================ */

:root {
    /* ========== CORES PRIMÁRIAS ========== */
    --color-primary-dark: #1D4F73;      /* Azul escuro principal */
    --color-primary: #206A8D;            /* Azul médio (cor marca) */
    --color-primary-light: #2E7BA8;      /* Azul médio claro */
    --color-primary-lighter: #A7E3FA;    /* Azul claro hover */
    
    /* ========== CORES DE FUNDO ========== */
    --color-bg-light: #f5f7fa;           /* Fundo claro principal */
    --color-bg-lighter: #c3cfe2;         /* Fundo claro secundário */
    --color-bg-white: #ffffff;           /* Branco puro */
    --color-bg-card: #f9f9f9;            /* Fundo de cards */
    --color-bg-grey: #D9D9D9;            /* Cinza (footer) */
    --color-bg-overlay: rgba(0, 0, 0, 0.3);  /* Overlay escuro */
    
    /* ========== CORES DE TEXTO ========== */
    --color-text-dark: #1D4F73;          /* Texto escuro (títulos) */
    --color-text-primary: #333;          /* Texto principal */
    --color-text-secondary: #666;        /* Texto secundário */
    --color-text-tertiary: #888;         /* Texto terciário */
    --color-text-light: #ccc;            /* Texto claro */
    --color-text-white: #ffffff;         /* Texto branco */
    
    /* ========== CORES DE ESTADO ========== */
    --color-success: #28a745;            /* Verde sucesso */
    --color-danger: #dc3545;             /* Vermelho erro/perigo */
    --color-warning: #ffc107;            /* Amarelo aviso */
    --color-info: #007bff;               /* Azul informação */
    
    /* ========== SOMBRAS ========== */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(29, 79, 115, 0.25);
    
    /* ========== SOMBRAS COM CORES ========== */
    --shadow-primary: 0 5px 20px rgba(32, 106, 141, 0.15);
    --shadow-primary-hover: 0 8px 30px rgba(29, 79, 115, 0.3);
    --shadow-neon-primary: 0 0 10px rgba(32, 106, 141, 0.5);
    --shadow-neon-light: 0 0 20px rgba(167, 227, 250, 0.8);
    
    /* ========== GRADIENTES ========== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    --gradient-bg: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-lighter) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);
    
    /* ========== TRANSPARÊNCIAS ========== */
    --alpha-light: rgba(255, 255, 255, 0.2);
    --alpha-dark: rgba(0, 0, 0, 0.1);
    --alpha-success: rgba(40, 167, 69, 0.3);
    --alpha-danger: rgba(220, 53, 69, 0.3);
    
    /* ========== TRANSIÇÕES ========== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========== ESPAÇAMENTOS ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;
}

/* ========== MODO ESCURO (Futuro) ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Descomente quando implementar modo escuro */
        /* --color-bg-white: #1a1a1a; */
        /* --color-text-primary: #e0e0e0; */
    }
}