/*
 * colors.css - Sistema de Cores para ZapNat
 * Arquivo CSS que estava faltando causando erro MIME type
 */

/* ========================================================================
   🎨 CORES PRINCIPAIS DO SISTEMA
   ======================================================================== */

:root {
    /* Cores Primárias */
    --primary-color: #007bff;
    --primary-dark: #0056b3;
    --primary-light: #6fb3ff;
    
    /* Cores de Status */
    --success-color: #28a745;
    --success-dark: #1e7e34;
    --success-light: #71dd8a;
    
    --danger-color: #dc3545;
    --danger-dark: #c82333;
    --danger-light: #f1919c;
    
    --warning-color: #fd7e14;
    --warning-dark: #e55a00;
    --warning-light: #ffab6b;
    
    --info-color: #17a2b8;
    --info-dark: #117a8b;
    --info-light: #6cc4d0;
    
    /* Cores Neutras */
    --secondary-color: #6c757d;
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    
    /* Cores de Fundo */
    --bg-primary: #f8fbff;
    --bg-success: #f8fff9;
    --bg-danger: #fff8f8;
    --bg-warning: #fffbf7;
    --bg-info: #f7fcfd;
}

/* ========================================================================
   📊 CLASSES DE COR PARA CARDS
   ======================================================================== */

/* Backgrounds Sólidos */
.bg-primary-custom {
    background: var(--primary-color) !important;
    color: white !important;
}

.bg-success-custom {
    background: var(--success-color) !important;
    color: white !important;
}

.bg-warning-custom {
    background: var(--warning-color) !important;
    color: white !important;
}

.bg-info-custom {
    background: var(--info-color) !important;
    color: white !important;
}

.bg-danger-custom {
    background: var(--danger-color) !important;
    color: white !important;
}

/* Backgrounds com Gradiente */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark)) !important;
    color: white !important;
}

.bg-gradient-warning {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-dark)) !important;
    color: white !important;
}

.bg-gradient-info {
    background: linear-gradient(135deg, var(--info-color), var(--info-dark)) !important;
    color: white !important;
}

.bg-gradient-danger {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark)) !important;
    color: white !important;
}

/* ========================================================================
   🎯 CLASSES DE TEXTO
   ======================================================================== */

.text-primary-custom { color: var(--primary-color) !important; }
.text-success-custom { color: var(--success-color) !important; }
.text-warning-custom { color: var(--warning-color) !important; }
.text-info-custom { color: var(--info-color) !important; }
.text-danger-custom { color: var(--danger-color) !important; }

/* Texto com melhor contraste */
.text-white-shadow {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========================================================================
   🔲 CLASSES DE BORDA
   ======================================================================== */

.border-primary-custom { border-color: var(--primary-color) !important; }
.border-success-custom { border-color: var(--success-color) !important; }
.border-warning-custom { border-color: var(--warning-color) !important; }
.border-info-custom { border-color: var(--info-color) !important; }
.border-danger-custom { border-color: var(--danger-color) !important; }

/* Bordas mais grossas para destaque */
.border-thick {
    border-width: 3px !important;
}

.border-extra-thick {
    border-width: 4px !important;
}

/* ========================================================================
   🔘 CLASSES DE BADGE/LABEL
   ======================================================================== */

.badge-primary-custom {
    background: var(--primary-color);
    color: white;
}

.badge-success-custom {
    background: var(--success-color);
    color: white;
}

.badge-warning-custom {
    background: var(--warning-color);
    color: white;
}

.badge-info-custom {
    background: var(--info-color);
    color: white;
}

.badge-danger-custom {
    background: var(--danger-color);
    color: white;
}

/* ========================================================================
   🎨 UTILIDADES DE COR
   ======================================================================== */

/* Opacidades */
.opacity-75 { opacity: 0.75; }
.opacity-50 { opacity: 0.50; }
.opacity-25 { opacity: 0.25; }

/* Sombras coloridas */
.shadow-primary {
    box-shadow: 0 0.5rem 1rem rgba(0, 123, 255, 0.15) !important;
}

.shadow-success {
    box-shadow: 0 0.5rem 1rem rgba(40, 167, 69, 0.15) !important;
}

.shadow-warning {
    box-shadow: 0 0.5rem 1rem rgba(253, 126, 20, 0.15) !important;
}

.shadow-info {
    box-shadow: 0 0.5rem 1rem rgba(23, 162, 184, 0.15) !important;
}

.shadow-danger {
    box-shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.15) !important;
}

/* ========================================================================
   📱 RESPONSIVIDADE
   ======================================================================== */

@media (max-width: 768px) {
    :root {
        /* Ajustar cores para mobile se necessário */
        --primary-color: #007bff;
    }
}

/* ========================================================================
   🌙 MODO ESCURO (SE NECESSÁRIO)
   ======================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #6fb3ff;
        --success-color: #71dd8a;
        --danger-color: #f1919c;
        --warning-color: #ffab6b;
        --info-color: #6cc4d0;
        
        --bg-primary: #1a1d23;
        --bg-success: #1a2320;
        --bg-danger: #231a1a;
        --bg-warning: #23201a;
        --bg-info: #1a2023;
    }
}

/* ========================================================================
   ✨ ANIMAÇÕES DE COR
   ======================================================================== */

.color-transition {
    transition: all 0.3s ease;
}

.hover-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.hover-success:hover {
    background-color: var(--success-color) !important;
    color: white !important;
}

.hover-warning:hover {
    background-color: var(--warning-color) !important;
    color: white !important;
}

.hover-info:hover {
    background-color: var(--info-color) !important;
    color: white !important;
}

.hover-danger:hover {
    background-color: var(--danger-color) !important;
    color: white !important;
}