/* ============================================
   ClinicProIA - Temas Alternativos
   Paletas de cores para personalização
   ============================================ */

/* ============================================
   TEMA PADRÃO (Laranja/Rosa) - já definido em style.css
   Variáveis adicionais para bordas e elementos
   ============================================ */
body {
    --border-color: rgba(255, 140, 0, 0.3);
    --border-color-strong: rgba(255, 140, 0, 0.5);
}

/* ============================================
   TEMA AZUL CLÍNICO
   ============================================ */
body.theme-blue {
    --primary-orange: #2196F3;
    --primary-pink: #00BCD4;
    --primary-red: #03A9F4;
    --gradient-primary: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);
    --gradient-secondary: linear-gradient(135deg, #2196F3 0%, #00BCD4 50%, #03A9F4 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(33,150,243,0.1) 0%, rgba(0,188,212,0.1) 100%);
    
    --shadow-glow: 0 0 20px rgba(33, 150, 243, 0.3);
    --shadow-glow-pink: 0 0 30px rgba(0, 188, 212, 0.4);
    
    --border-color: rgba(33, 150, 243, 0.3);
    --border-color-strong: rgba(33, 150, 243, 0.5);
}

/* ============================================
   TEMA LARANJA VIBRANTE
   ============================================ */
body.theme-orange {
    --primary-orange: #FF6B35;
    --primary-pink: #FF9F1C;
    --primary-red: #F7931E;
    --gradient-primary: linear-gradient(135deg, #FF6B35 0%, #FF9F1C 100%);
    --gradient-secondary: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FF9F1C 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(255,107,53,0.1) 0%, rgba(255,159,28,0.1) 100%);
    
    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.3);
    --shadow-glow-pink: 0 0 30px rgba(255, 159, 28, 0.4);
    
    --border-color: rgba(255, 107, 53, 0.3);
    --border-color-strong: rgba(255, 107, 53, 0.5);
}

/* ============================================
   TEMA VERDE SAÚDE
   ============================================ */
body.theme-green {
    --primary-orange: #10B981;
    --primary-pink: #34D399;
    --primary-red: #059669;
    --gradient-primary: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    --gradient-secondary: linear-gradient(135deg, #10B981 0%, #059669 50%, #34D399 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(52,211,153,0.1) 100%);
    
    --border-color: rgba(16, 185, 129, 0.3);
    --border-color-strong: rgba(16, 185, 129, 0.5);
    
    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
    --shadow-glow-pink: 0 0 30px rgba(52, 211, 153, 0.4);
}

/* ============================================
   TEMA ROXO MODERNO
   ============================================ */
body.theme-purple {
    --primary-orange: #8B5CF6;
    --primary-pink: #A78BFA;
    --primary-red: #7C3AED;
    --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    --gradient-secondary: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #A78BFA 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(167,139,250,0.1) 100%);
    
    --border-color: rgba(139, 92, 246, 0.3);
    --border-color-strong: rgba(139, 92, 246, 0.5);
    
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
    --shadow-glow-pink: 0 0 30px rgba(167, 139, 250, 0.4);
}

/* ============================================
   Transições suaves entre temas
   ============================================ */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Elementos que devem ter transição de cor */
.btn,
.nav-link,
.gradient-text,
.btn-gradient,
.feature-icon,
.benefit-icon,
.pricing-card,
.tab-btn,
.gradient-orb {
    transition: all 0.3s ease;
}