/* ============================================
   ALURE HOST - Tema Visual
   Design moderno com gradientes e cores vibrantes
   ============================================ */

:root {
    /* Cores Primárias Alure */
    --alure-primary: #8b5cf6;
    --alure-primary-dark: #7c3aed;
    --alure-primary-light: #a78bfa;
    
    /* Cores Secundárias */
    --alure-secondary: #06b6d4;
    --alure-secondary-dark: #0891b2;
    --alure-secondary-light: #22d3ee;
    
    /* Cor de Destaque */
    --alure-accent: #f59e0b;
    --alure-accent-dark: #d97706;
    
    /* Gradientes */
    --alure-gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
    --alure-gradient-dark: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
    --alure-gradient-light: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
    --alure-gradient-reverse: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    
    /* Cores de Fundo */
    --alure-bg-light: #f8f7ff;
    --alure-bg-secondary: #e0f7fa;
    --alure-bg-dark: #1a1a2e;
    --alure-bg-dark-alt: #16213e;
    
    /* Cores de Texto */
    --alure-text-primary: #1a1a2e;
    --alure-text-secondary: #64748b;
    --alure-text-light: #94a3b8;
    --alure-text-white: #ffffff;
    
    /* Cores de Status */
    --alure-success: #10b981;
    --alure-warning: #f59e0b;
    --alure-error: #ef4444;
    --alure-info: #3b82f6;
    
    /* Sombras */
    --alure-shadow-sm: 0 2px 8px rgba(139, 92, 246, 0.1);
    --alure-shadow-md: 0 4px 20px rgba(139, 92, 246, 0.2);
    --alure-shadow-lg: 0 8px 30px rgba(139, 92, 246, 0.3);
    --alure-shadow-xl: 0 12px 40px rgba(139, 92, 246, 0.4);
    
    /* Border Radius */
    --alure-radius-sm: 8px;
    --alure-radius-md: 12px;
    --alure-radius-lg: 16px;
    --alure-radius-xl: 24px;
    --alure-radius-full: 9999px;
    
    /* Transições */
    --alure-transition-fast: 0.15s ease;
    --alure-transition-base: 0.3s ease;
    --alure-transition-slow: 0.5s ease;
}

/* ============================================
   UTILITÁRIOS DE CORES
   ============================================ */

.bg-alure-primary { background: var(--alure-primary) !important; }
.bg-alure-gradient { background: var(--alure-gradient) !important; }
.text-alure-primary { color: var(--alure-primary) !important; }
.text-alure-gradient {
    background: var(--alure-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BOTÕES ALURE
   ============================================ */

.btn-alure-primary {
    background: var(--alure-gradient) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--alure-radius-md);
    transition: all var(--alure-transition-base);
    box-shadow: var(--alure-shadow-md);
}

.btn-alure-primary:hover {
    background: var(--alure-gradient-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--alure-shadow-lg);
}

.btn-alure-outline {
    background: transparent !important;
    border: 2px solid var(--alure-primary) !important;
    color: var(--alure-primary) !important;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--alure-radius-md);
    transition: all var(--alure-transition-base);
}

.btn-alure-outline:hover {
    background: var(--alure-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ============================================
   CARDS E CONTAINERS
   ============================================ */

.card-alure {
    background: #fff;
    border-radius: var(--alure-radius-lg);
    box-shadow: var(--alure-shadow-sm);
    transition: all var(--alure-transition-base);
}

.card-alure:hover {
    box-shadow: var(--alure-shadow-md);
    transform: translateY(-4px);
}

.card-alure-gradient {
    background: var(--alure-gradient);
    color: #fff;
    border-radius: var(--alure-radius-lg);
    box-shadow: var(--alure-shadow-md);
}

/* ============================================
   BADGES E TAGS
   ============================================ */

.badge-alure {
    background: var(--alure-gradient);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--alure-radius-full);
    font-size: 12px;
    font-weight: 600;
}

.badge-alure-outline {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--alure-primary);
    padding: 6px 12px;
    border-radius: var(--alure-radius-full);
    font-size: 12px;
    font-weight: 600;
}

/* ============================================
   ANIMAÇÕES
   ============================================ */

@keyframes alure-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes alure-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes alure-shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.alure-pulse { animation: alure-pulse 2s ease-in-out infinite; }
.alure-bounce { animation: alure-bounce 2s ease-in-out infinite; }

/* ============================================
   EFEITOS HOVER
   ============================================ */

.alure-hover-lift {
    transition: all var(--alure-transition-base);
}

.alure-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--alure-shadow-md);
}

.alure-hover-glow {
    transition: all var(--alure-transition-base);
}

.alure-hover-glow:hover {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

/* ============================================
   RESPONSIVO
   ============================================ */

@media (max-width: 768px) {
    :root {
        --alure-radius-sm: 6px;
        --alure-radius-md: 10px;
        --alure-radius-lg: 14px;
        --alure-radius-xl: 20px;
    }
}