/**
 * ============================================
 * PERFIL | PAINEL MÁGICO - THEME SYSTEM
 * ============================================
 * 
 * Sistema de temas personalizáveis para perfis
 * 5 temas prontos + suporte a customização
 * 
 * Temas disponíveis:
 * 1. Default (Purple Gradient) - Padrão da marca
 * 2. Professional (Blue) - Corporativo e confiável
 * 3. Creative (Rainbow Gradient) - Criativo e vibrante
 * 4. Minimal (Monochrome) - Minimalista e elegante
 * 5. Nature (Green) - Natural e sustentável
 * 
 * @version 0.4.0
 */

/* ============================================
   THEME 1: DEFAULT - Purple Gradient (Padrão)
   Base theme já definido em design-system.css
   ============================================ */

[data-theme="default"],
.theme-default {
    /* Cores já definidas no :root do design-system.css */
    /* Mantém o gradiente purple-to-pink */
}

/* ============================================
   THEME 2: PROFESSIONAL - Blue Corporate
   Para profissionais, empresas e corporativo
   ============================================ */

[data-theme="professional"],
.theme-professional {
    /* Primary - Blue */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    
    /* Secondary - Indigo */
    --color-secondary-50: #eef2ff;
    --color-secondary-100: #e0e7ff;
    --color-secondary-200: #c7d2fe;
    --color-secondary-300: #a5b4fc;
    --color-secondary-400: #818cf8;
    --color-secondary-500: #6366f1;
    --color-secondary-600: #4f46e5;
    --color-secondary-700: #4338ca;
    --color-secondary-800: #3730a3;
    --color-secondary-900: #312e81;
    
    /* Accent - Cyan */
    --color-accent-50: #ecfeff;
    --color-accent-100: #cffafe;
    --color-accent-200: #a5f3fc;
    --color-accent-300: #67e8f9;
    --color-accent-400: #22d3ee;
    --color-accent-500: #06b6d4;
    --color-accent-600: #0891b2;
    --color-accent-700: #0e7490;
    --color-accent-800: #155e75;
    --color-accent-900: #164e63;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    --gradient-hero: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #06b6d4 100%);
    
    /* Shadows */
    --shadow-primary: 0 10px 20px -5px rgba(59, 130, 246, 0.3);
    --shadow-primary-lg: 0 20px 25px -5px rgba(59, 130, 246, 0.4);
}

/* ============================================
   THEME 3: CREATIVE - Rainbow Gradient
   Para artistas, designers e criativos
   ============================================ */

[data-theme="creative"],
.theme-creative {
    /* Primary - Pink */
    --color-primary-50: #fdf2f8;
    --color-primary-100: #fce7f3;
    --color-primary-200: #fbcfe8;
    --color-primary-300: #f9a8d4;
    --color-primary-400: #f472b6;
    --color-primary-500: #ec4899;
    --color-primary-600: #db2777;
    --color-primary-700: #be185d;
    --color-primary-800: #9f1239;
    --color-primary-900: #831843;
    
    /* Secondary - Orange */
    --color-secondary-50: #fff7ed;
    --color-secondary-100: #ffedd5;
    --color-secondary-200: #fed7aa;
    --color-secondary-300: #fdba74;
    --color-secondary-400: #fb923c;
    --color-secondary-500: #f97316;
    --color-secondary-600: #ea580c;
    --color-secondary-700: #c2410c;
    --color-secondary-800: #9a3412;
    --color-secondary-900: #7c2d12;
    
    /* Accent - Fuchsia */
    --color-accent-50: #fdf4ff;
    --color-accent-100: #fae8ff;
    --color-accent-200: #f5d0fe;
    --color-accent-300: #f0abfc;
    --color-accent-400: #e879f9;
    --color-accent-500: #d946ef;
    --color-accent-600: #c026d3;
    --color-accent-700: #a21caf;
    --color-accent-800: #86198f;
    --color-accent-900: #701a75;
    
    /* Gradients - Multicolor */
    --gradient-primary: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
    --gradient-accent: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
    --gradient-hero: linear-gradient(135deg, 
        #ec4899 0%, 
        #f97316 25%, 
        #eab308 50%, 
        #22c55e 75%, 
        #3b82f6 100%
    );
    
    /* Mesh Gradient */
    --gradient-mesh: radial-gradient(at 20% 30%, rgba(236, 72, 153, 0.3) 0px, transparent 50%),
                     radial-gradient(at 80% 70%, rgba(249, 115, 22, 0.3) 0px, transparent 50%),
                     radial-gradient(at 50% 50%, rgba(217, 70, 239, 0.2) 0px, transparent 50%);
    
    /* Shadows */
    --shadow-primary: 0 10px 20px -5px rgba(236, 72, 153, 0.4);
    --shadow-primary-lg: 0 20px 25px -5px rgba(236, 72, 153, 0.5);
}

/* ============================================
   THEME 4: MINIMAL - Monochrome Elegance
   Para minimalistas e profissionais discretos
   ============================================ */

[data-theme="minimal"],
.theme-minimal {
    /* Primary - Gray Dark */
    --color-primary-50: #f9fafb;
    --color-primary-100: #f3f4f6;
    --color-primary-200: #e5e7eb;
    --color-primary-300: #d1d5db;
    --color-primary-400: #9ca3af;
    --color-primary-500: #6b7280;
    --color-primary-600: #4b5563;
    --color-primary-700: #374151;
    --color-primary-800: #1f2937;
    --color-primary-900: #111827;
    
    /* Secondary - Slate */
    --color-secondary-50: #f8fafc;
    --color-secondary-100: #f1f5f9;
    --color-secondary-200: #e2e8f0;
    --color-secondary-300: #cbd5e1;
    --color-secondary-400: #94a3b8;
    --color-secondary-500: #64748b;
    --color-secondary-600: #475569;
    --color-secondary-700: #334155;
    --color-secondary-800: #1e293b;
    --color-secondary-900: #0f172a;
    
    /* Accent - Zinc (subtle highlight) */
    --color-accent-50: #fafafa;
    --color-accent-100: #f4f4f5;
    --color-accent-200: #e4e4e7;
    --color-accent-300: #d4d4d8;
    --color-accent-400: #a1a1aa;
    --color-accent-500: #71717a;
    --color-accent-600: #52525b;
    --color-accent-700: #3f3f46;
    --color-accent-800: #27272a;
    --color-accent-900: #18181b;
    
    /* Gradients - Subtle grayscale */
    --gradient-primary: linear-gradient(135deg, #6b7280 0%, #374151 100%);
    --gradient-accent: linear-gradient(135deg, #64748b 0%, #475569 100%);
    --gradient-hero: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 50%, #d1d5db 100%);
    
    /* Subtle mesh */
    --gradient-mesh: radial-gradient(at 20% 30%, rgba(107, 114, 128, 0.1) 0px, transparent 50%),
                     radial-gradient(at 80% 70%, rgba(100, 116, 139, 0.1) 0px, transparent 50%);
    
    /* Minimal shadows */
    --shadow-primary: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    --shadow-primary-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    
    /* Text adjustments for better contrast */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
}

/* ============================================
   THEME 5: NATURE - Green Eco
   Para marcas sustentáveis e naturais
   ============================================ */

[data-theme="nature"],
.theme-nature {
    /* Primary - Green */
    --color-primary-50: #f0fdf4;
    --color-primary-100: #dcfce7;
    --color-primary-200: #bbf7d0;
    --color-primary-300: #86efac;
    --color-primary-400: #4ade80;
    --color-primary-500: #22c55e;
    --color-primary-600: #16a34a;
    --color-primary-700: #15803d;
    --color-primary-800: #166534;
    --color-primary-900: #14532d;
    
    /* Secondary - Teal */
    --color-secondary-50: #f0fdfa;
    --color-secondary-100: #ccfbf1;
    --color-secondary-200: #99f6e4;
    --color-secondary-300: #5eead4;
    --color-secondary-400: #2dd4bf;
    --color-secondary-500: #14b8a6;
    --color-secondary-600: #0d9488;
    --color-secondary-700: #0f766e;
    --color-secondary-800: #115e59;
    --color-secondary-900: #134e4a;
    
    /* Accent - Lime */
    --color-accent-50: #f7fee7;
    --color-accent-100: #ecfccb;
    --color-accent-200: #d9f99d;
    --color-accent-300: #bef264;
    --color-accent-400: #a3e635;
    --color-accent-500: #84cc16;
    --color-accent-600: #65a30d;
    --color-accent-700: #4d7c0f;
    --color-accent-800: #3f6212;
    --color-accent-900: #365314;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
    --gradient-accent: linear-gradient(135deg, #22c55e 0%, #84cc16 100%);
    --gradient-hero: linear-gradient(135deg, #22c55e 0%, #14b8a6 50%, #84cc16 100%);
    
    /* Nature mesh */
    --gradient-mesh: radial-gradient(at 20% 30%, rgba(34, 197, 94, 0.2) 0px, transparent 50%),
                     radial-gradient(at 80% 70%, rgba(20, 184, 166, 0.2) 0px, transparent 50%),
                     radial-gradient(at 50% 50%, rgba(132, 204, 22, 0.15) 0px, transparent 50%);
    
    /* Shadows */
    --shadow-primary: 0 10px 20px -5px rgba(34, 197, 94, 0.3);
    --shadow-primary-lg: 0 20px 25px -5px rgba(34, 197, 94, 0.4);
}

/* ============================================
   THEME UTILITIES - Helper Classes
   ============================================ */

/* Background Gradients */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-accent {
    background: var(--gradient-accent);
}

.bg-gradient-hero {
    background: var(--gradient-hero);
}

.bg-gradient-mesh {
    background: var(--gradient-mesh);
}

/* Text Gradients */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme Preview Cards - Para seletor de temas */
.theme-preview-card {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
    border: 2px solid var(--color-border-light);
}

.theme-preview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.theme-preview-card.active {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-primary-lg);
}

/* Theme Preview - Default */
.theme-preview-default {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #d946ef 100%);
}

/* Theme Preview - Professional */
.theme-preview-professional {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #06b6d4 100%);
}

/* Theme Preview - Creative */
.theme-preview-creative {
    background: linear-gradient(135deg, #ec4899 0%, #f97316 25%, #eab308 50%, #22c55e 75%, #3b82f6 100%);
}

/* Theme Preview - Minimal */
.theme-preview-minimal {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 50%, #d1d5db 100%);
}

/* Theme Preview - Nature */
.theme-preview-nature {
    background: linear-gradient(135deg, #22c55e 0%, #14b8a6 50%, #84cc16 100%);
}

/* ============================================
   CUSTOM THEME SUPPORT
   Permite usuários criarem temas próprios
   ============================================ */

[data-theme="custom"] {
    /* Cores serão injetadas via JavaScript */
    /* Baseado em escolha do usuário no dashboard */
    
    /* Exemplo de override:
    --color-primary-500: #FF6B6B;
    --color-secondary-500: #4ECDC4;
    --color-accent-500: #FFE66D;
    */
}

/* ============================================
   ACCESSIBILITY - Alto Contraste
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-text-secondary: #1f2937;
        --color-border-medium: #374151;
    }
    
    [data-theme="dark"] {
        --color-text-primary: #ffffff;
        --color-text-secondary: #f3f4f6;
    }
}

/* ============================================
   PRINT MODE - Remove gradients
   ============================================ */

@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .bg-gradient-primary,
    .bg-gradient-accent,
    .bg-gradient-hero {
        background: white !important;
    }
}