/**
 * Numerology Pro - Theme Variations
 * Multiple beautiful themes for customization
 * 
 * @package Numerology_Pro
 * @author Saysix - Fernando Camargo Candido
 */

/* =================================================================
   THEME: Mystic Purple (Default)
   ================================================================= */
.np-theme-mystic-purple {
    --np-primary: #7C3AED;
    --np-primary-dark: #5B21B6;
    --np-primary-light: #A78BFA;
    --np-primary-soft: rgba(124, 58, 237, 0.1);
    --np-primary-glow: rgba(124, 58, 237, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    --np-gradient-mystical: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4C1D95 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #0F0A1E 0%, #1A1428 50%, #2D1B4E 100%);
}

/* =================================================================
   THEME: Celestial Blue
   ================================================================= */
.np-theme-celestial-blue {
    --np-primary: #3B82F6;
    --np-primary-dark: #1D4ED8;
    --np-primary-light: #60A5FA;
    --np-primary-soft: rgba(59, 130, 246, 0.1);
    --np-primary-glow: rgba(59, 130, 246, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    --np-gradient-mystical: linear-gradient(135deg, #0C1929 0%, #1E3A5F 50%, #2563EB 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #0A1628 0%, #0F2847 50%, #1E3A5F 100%);
}

.np-theme-celestial-blue .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #60A5FA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(59, 130, 246, 0.5);
}

/* =================================================================
   THEME: Golden Zodiac
   ================================================================= */
.np-theme-golden-zodiac {
    --np-primary: #D97706;
    --np-primary-dark: #B45309;
    --np-primary-light: #FBBF24;
    --np-primary-soft: rgba(217, 119, 6, 0.1);
    --np-primary-glow: rgba(217, 119, 6, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
    --np-gradient-mystical: linear-gradient(135deg, #1C1209 0%, #422006 50%, #713F12 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #1C1209 0%, #2D1D10 50%, #422006 100%);
}

.np-theme-golden-zodiac .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBBF24 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(245, 158, 11, 0.5);
}

.np-theme-golden-zodiac .np-number-card .np-number-small {
    color: var(--np-primary);
}

/* =================================================================
   THEME: Emerald Mystical
   ================================================================= */
.np-theme-emerald-mystical {
    --np-primary: #10B981;
    --np-primary-dark: #059669;
    --np-primary-light: #34D399;
    --np-primary-soft: rgba(16, 185, 129, 0.1);
    --np-primary-glow: rgba(16, 185, 129, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --np-gradient-mystical: linear-gradient(135deg, #052E1C 0%, #064E3B 50%, #047857 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #052E1C 0%, #064E3B 50%, #065F46 100%);
}

.np-theme-emerald-mystical .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #34D399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(16, 185, 129, 0.5);
}

/* =================================================================
   THEME: Rose Quartz
   ================================================================= */
.np-theme-rose-quartz {
    --np-primary: #EC4899;
    --np-primary-dark: #DB2777;
    --np-primary-light: #F472B6;
    --np-primary-soft: rgba(236, 72, 153, 0.1);
    --np-primary-glow: rgba(236, 72, 153, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
    --np-gradient-mystical: linear-gradient(135deg, #2D0A1E 0%, #4A1942 50%, #831843 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #2D0A1E 0%, #3D1132 50%, #4A1942 100%);
}

.np-theme-rose-quartz .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #F472B6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(236, 72, 153, 0.5);
}

/* =================================================================
   THEME: Midnight Ocean
   ================================================================= */
.np-theme-midnight-ocean {
    --np-primary: #0EA5E9;
    --np-primary-dark: #0284C7;
    --np-primary-light: #38BDF8;
    --np-primary-soft: rgba(14, 165, 233, 0.1);
    --np-primary-glow: rgba(14, 165, 233, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    --np-gradient-mystical: linear-gradient(135deg, #0C1929 0%, #0C4A6E 50%, #075985 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #0A1628 0%, #0C4A6E 50%, #0C1929 100%);
}

.np-theme-midnight-ocean .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #38BDF8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(14, 165, 233, 0.5);
}

/* =================================================================
   THEME: Crimson Fire
   ================================================================= */
.np-theme-crimson-fire {
    --np-primary: #EF4444;
    --np-primary-dark: #DC2626;
    --np-primary-light: #F87171;
    --np-primary-soft: rgba(239, 68, 68, 0.1);
    --np-primary-glow: rgba(239, 68, 68, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    --np-gradient-mystical: linear-gradient(135deg, #2D0A0A 0%, #7F1D1D 50%, #991B1B 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #1F0A0A 0%, #450A0A 50%, #7F1D1D 100%);
}

.np-theme-crimson-fire .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCA5A5 50%, #EF4444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(239, 68, 68, 0.5);
}

/* =================================================================
   THEME: Cosmic Violet
   ================================================================= */
.np-theme-cosmic-violet {
    --np-primary: #8B5CF6;
    --np-primary-dark: #7C3AED;
    --np-primary-light: #A78BFA;
    --np-primary-soft: rgba(139, 92, 246, 0.1);
    --np-primary-glow: rgba(139, 92, 246, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --np-gradient-mystical: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 50%, #6D28D9 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #0F0D1E 0%, #1E1B4B 50%, #2E1065 100%);
}

.np-theme-cosmic-violet .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #C4B5FD 50%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(139, 92, 246, 0.5);
}

/* =================================================================
   THEME: Silver Moon
   ================================================================= */
.np-theme-silver-moon {
    --np-primary: #6B7280;
    --np-primary-dark: #4B5563;
    --np-primary-light: #9CA3AF;
    --np-primary-soft: rgba(107, 114, 128, 0.1);
    --np-primary-glow: rgba(107, 114, 128, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
    --np-gradient-mystical: linear-gradient(135deg, #111827 0%, #1F2937 50%, #374151 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #0F1419 0%, #1F2937 50%, #111827 100%);
}

.np-theme-silver-moon .np-number-value {
    background: linear-gradient(180deg, #FFFFFF 0%, #D1D5DB 50%, #9CA3AF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(156, 163, 175, 0.5);
}

/* =================================================================
   THEME: Ancient Bronze
   ================================================================= */
.np-theme-ancient-bronze {
    --np-primary: #92400E;
    --np-primary-dark: #78350F;
    --np-primary-light: #B45309;
    --np-primary-soft: rgba(146, 64, 14, 0.1);
    --np-primary-glow: rgba(146, 64, 14, 0.4);
    --np-gradient-primary: linear-gradient(135deg, #B45309 0%, #78350F 100%);
    --np-gradient-mystical: linear-gradient(135deg, #1C1209 0%, #422006 50%, #78350F 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #1C1209 0%, #2D1D10 50%, #3D2817 100%);
}

.np-theme-ancient-bronze .np-number-value {
    background: linear-gradient(180deg, #FEF3C7 0%, #D97706 50%, #92400E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(217, 119, 6, 0.5);
}

/* =================================================================
   LIGHT MODE THEMES
   ================================================================= */

/* THEME: Light Crystal */
.np-theme-light-crystal {
    --np-primary: #7C3AED;
    --np-primary-dark: #5B21B6;
    --np-primary-light: #A78BFA;
    --np-primary-soft: rgba(124, 58, 237, 0.08);
    --np-primary-glow: rgba(124, 58, 237, 0.2);
    --np-gradient-primary: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    --np-gradient-mystical: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 50%, #C4B5FD 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 50%, #DDD6FE 100%);
    
    /* Light mode specific */
    --np-dark: #F8FAFC;
    --np-dark-soft: #F1F5F9;
    --np-gray-900: #1E293B;
    --np-gray-800: #334155;
    --np-gray-700: #475569;
    --np-gray-600: #64748B;
    --np-gray-500: #94A3B8;
    --np-gray-400: #CBD5E1;
    --np-gray-300: #E2E8F0;
    --np-gray-200: #F1F5F9;
    --np-gray-100: #F8FAFC;
    --np-white: #FFFFFF;
}

.np-theme-light-crystal .np-card-header,
.np-theme-light-crystal .np-number-hero,
.np-theme-light-crystal .np-daily-widget {
    color: var(--np-gray-800);
}

.np-theme-light-crystal .np-number-value {
    background: linear-gradient(180deg, #5B21B6 0%, #7C3AED 50%, #A78BFA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
}

.np-theme-light-crystal .np-card-header h2,
.np-theme-light-crystal .np-number-title {
    color: var(--np-gray-900);
}

.np-theme-light-crystal .np-card-header p,
.np-theme-light-crystal .np-number-keywords {
    color: var(--np-gray-600);
}

/* THEME: Light Ocean */
.np-theme-light-ocean {
    --np-primary: #0EA5E9;
    --np-primary-dark: #0284C7;
    --np-primary-light: #38BDF8;
    --np-primary-soft: rgba(14, 165, 233, 0.08);
    --np-primary-glow: rgba(14, 165, 233, 0.2);
    --np-gradient-primary: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    --np-gradient-mystical: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 50%, #BAE6FD 100%);
}

.np-theme-light-ocean .np-card-header,
.np-theme-light-ocean .np-number-hero,
.np-theme-light-ocean .np-daily-widget {
    color: #0C4A6E;
}

.np-theme-light-ocean .np-number-value {
    background: linear-gradient(180deg, #0284C7 0%, #0EA5E9 50%, #38BDF8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
}

/* =================================================================
   Theme-Specific Component Overrides
   ================================================================= */

/* Gold theme specific styles for Master Numbers */
[class*="np-theme-golden"] .np-number-value.master,
[class*="np-theme-ancient"] .np-number-value.master {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCD34D 50%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Button adjustments for light themes */
.np-theme-light-crystal .np-btn-primary,
.np-theme-light-ocean .np-btn-primary {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* Card adjustments for dark themes */
[class*="np-theme-"]:not([class*="light"]) .np-number-card,
[class*="np-theme-"]:not([class*="light"]) .np-interpretation,
[class*="np-theme-"]:not([class*="light"]) .np-trait-card,
[class*="np-theme-"]:not([class*="light"]) .np-cycle-card {
    background: var(--np-white);
}

/* =================================================================
   Theme Transition
   ================================================================= */
[class*="np-theme-"] {
    transition: 
        --np-primary 0.3s ease,
        --np-primary-dark 0.3s ease,
        --np-primary-light 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

/* =================================================================
   Custom Theme Support (via CSS Custom Properties)
   ================================================================= */
.np-theme-custom {
    /* Users can override these via the customizer */
    --np-primary: var(--np-custom-primary, #7C3AED);
    --np-primary-dark: var(--np-custom-primary-dark, #5B21B6);
    --np-primary-light: var(--np-custom-primary-light, #A78BFA);
    --np-primary-soft: var(--np-custom-primary-soft, rgba(124, 58, 237, 0.1));
    --np-gradient-primary: linear-gradient(135deg, var(--np-primary) 0%, var(--np-primary-dark) 100%);
}