/* 
 * Paleta de Cores - Anicuns Online
 * Design System baseado em cores vibrantes e modernas
 */

:root {
    /* Roxo Vibrante - Logo, Ícones Principais, Destaques */
    --purple-primary: #667eea;
    --purple-secondary: #764ba2;
    --purple-light: rgba(102, 126, 234, 0.1);
    --purple-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --purple-shadow: rgba(102, 126, 234, 0.4);
    
    /* Rosa Neon - Botões de Interação (Curtir, Seguir, Enviar) */
    --pink-primary: #ff3b30;
    --pink-neon: #ff1744;
    --pink-light: rgba(255, 59, 48, 0.1);
    --pink-gradient: linear-gradient(135deg, #ff3b30 0%, #ff1744 100%);
    --pink-shadow: rgba(255, 59, 48, 0.5);
    
    /* Amarelo Vivo - CTAs Fortes (Publicar, Cadastrar) */
    --yellow-primary: #ffc107;
    --yellow-secondary: #ff9800;
    --yellow-light: rgba(255, 193, 7, 0.1);
    --yellow-gradient: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    --yellow-shadow: rgba(255, 193, 7, 0.4);
    
    /* Azul Escuro - Cabeçalhos, Menus, Contraste */
    --blue-dark-primary: #1a202c;
    --blue-dark-secondary: #2d3748;
    --blue-dark-light: rgba(26, 32, 44, 0.8);
    
    /* Cinza Grafite - Fundos, Texto Secundário */
    --gray-primary: #4a5568;
    --gray-secondary: #718096;
    --gray-light: #a0aec0;
    --gray-lighter: #cbd5e0;
    --gray-lightest: #e2e8f0;
    
    /* Cores de Suporte */
    --white: #ffffff;
    --black: #000000;
    --success: #48bb78;
    --warning: #ed8936;
    --danger: #f56565;
    --info: #4299e1;
    
    /* Gradientes Especiais */
    --gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-pink: linear-gradient(135deg, #ff3b30 0%, #ff1744 100%);
    --gradient-yellow: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    --gradient-dark: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 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);
    
    /* Sombras Coloridas */
    --shadow-purple: 0 8px 20px var(--purple-shadow);
    --shadow-pink: 0 8px 20px var(--pink-shadow);
    --shadow-yellow: 0 8px 20px var(--yellow-shadow);
    
    /* Opacidades */
    --opacity-overlay: 0.8;
    --opacity-hover: 0.9;
    --opacity-disabled: 0.5;
    
    /* Transições */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}

/* Aplicações da Paleta */

/* Roxo Vibrante - Logo e Ícones Principais */
.logo,
.brand,
.icon-primary {
    color: var(--purple-primary);
}

.btn-purple {
    background: var(--gradient-main);
    color: var(--white);
    box-shadow: var(--shadow-purple);
}

/* Rosa Neon - Interações */
.btn-like,
.btn-follow,
.btn-send {
    background: var(--gradient-pink);
    color: var(--white);
    box-shadow: var(--shadow-pink);
}

/* Amarelo Vivo - CTAs */
.btn-cta,
.btn-publish,
.btn-register {
    background: var(--gradient-yellow);
    color: var(--blue-dark-primary);
    box-shadow: var(--shadow-yellow);
    font-weight: 700;
}

/* Azul Escuro - Headers e Menus */
.navbar,
.header,
.sidebar {
    background: var(--blue-dark-primary);
    color: var(--white);
}

/* Cinza Grafite - Fundos e Texto Secundário */
.text-secondary {
    color: var(--gray-secondary);
}

.bg-secondary {
    background: var(--gray-lightest);
}