/* ============================================
   🎨 MAM CONNECT - TEMA GLOBAL
   ============================================
   Arquivo centralizado de cores e estilos
   Para mudar o tema inteiro, edite apenas este arquivo!
   ============================================ */

:root {
    /* 🌈 Cores Principais - Baseadas na Logo MAM Connect */
    --primary: #007BFF;        /* Azul vibrante */
    --primary-light: #4DA3FF;  /* Azul claro */
    --primary-dark: #0056B3;   /* Azul escuro */
    
    --secondary: #20C997;      /* Verde/Turquesa */
    --secondary-light: #5FD4A9;
    --secondary-dark: #17A577;
    
    --accent: #FFC107;         /* Amarelo/Dourado */
    --accent-light: #FFD454;
    --accent-dark: #D9A406;
    
    --tertiary: #FD7E14;       /* Laranja */
    --quaternary: #E83E8C;     /* Rosa */
    --quinary: #6F42C1;        /* Roxo */
    
    /* 🎨 Gradientes - Inspirados na Logo */
    --gradient-primary: linear-gradient(135deg, #007BFF 0%, #20C997 100%);
    --gradient-secondary: linear-gradient(135deg, #FFC107 0%, #FD7E14 100%);
    --gradient-full: linear-gradient(135deg, 
        #007BFF 0%, 
        #20C997 20%, 
        #FFC107 40%, 
        #FD7E14 60%, 
        #E83E8C 80%, 
        #6F42C1 100%
    );
    --gradient-rainbow: linear-gradient(90deg,
        #007BFF,
        #20C997,
        #FFC107,
        #FD7E14,
        #E83E8C,
        #6F42C1
    );
    
    /* 🎯 Cores Funcionais */
    --success: #28A745;        /* Verde sucesso */
    --warning: #FFC107;        /* Amarelo aviso */
    --danger: #DC3545;         /* Vermelho erro */
    --info: #17A2B8;          /* Azul informação */
    
    /* 🌓 Cores Neutras */
    --dark: #1a1a2e;          /* Quase preto */
    --dark-medium: #2d3436;   /* Cinza escuro */
    --gray: #6c757d;          /* Cinza médio */
    --gray-light: #adb5bd;    /* Cinza claro */
    --light: #f5f7fa;         /* Quase branco */
    --white: #ffffff;         /* Branco puro */
    
    /* 🟢 WhatsApp */
    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;
    
    /* 📏 Espaçamentos */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    /* 🔤 Tipografia */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 32px;
    
    /* 🎭 Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    
    /* 📐 Border Radius */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* ⏱️ Transições */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   🌙 TEMA ESCURO (Opcional - para o futuro)
   ============================================ */
[data-theme="dark"] {
    --primary: #4DA3FF;
    --secondary: #5FD4A9;
    --accent: #FFD454;
    --dark: #ffffff;
    --light: #1a1a2e;
    --white: #2d3436;
}

/* ============================================
   🎨 CLASSES UTILITÁRIAS DE CORES
   ============================================ */

/* Backgrounds */
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-full { background: var(--gradient-full) !important; }

/* Textos */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-accent { color: var(--accent) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

/* Bordas */
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-accent { border-color: var(--accent) !important; }