/*
 * VedicAI Brand Theme - Light & Pastel Design System
 * Consistent light backgrounds with dark foregrounds throughout the application
 */

:root {
    /* === BRAND FOUNDATION === */
    /* Light pastel backgrounds with subtle warmth */
    --brand-bg-primary: #fefefe;           /* Pure white primary background */
    --brand-bg-secondary: #f8f9ff;        /* Very light blue-tinted secondary */
    --brand-bg-tertiary: #f5f8f5;         /* Very light sage green */
    --brand-bg-card: #ffffff;             /* Card backgrounds - pure white */
    --brand-bg-accent: #faf5ff;           /* Light lavender accent */
    
    /* Dark foregrounds with excellent contrast */
    --brand-text-primary: #2a2d47;        /* Deep navy for primary text */
    --brand-text-secondary: #4a4d6a;      /* Medium slate for secondary text */
    --brand-text-tertiary: #6b7280;       /* Light slate for tertiary text */
    --brand-text-muted: #9ca3af;          /* Muted gray for subtle text */
    
    /* Header text colors - White on dark purple */
    --header-text-primary: #ffffff;       /* White text for header */
    --header-text-secondary: #e0e7ff;     /* Light purple for header secondary text */
    --header-text-hover: #c7d2fe;         /* Lighter purple for hover states */
    
    /* Subtle borders and dividers */
    --brand-border-light: #e5e7eb;        /* Light gray borders */
    --brand-border-medium: #d1d5db;       /* Medium borders */
    --brand-divider: #f3f4f6;             /* Very light dividers */
    
    /* Soft shadows and overlays */
    --brand-shadow-light: rgba(0, 0, 0, 0.05);
    --brand-shadow-medium: rgba(0, 0, 0, 0.1);
    --brand-overlay: rgba(255, 255, 255, 0.85);
    /* === HEADER/NAVBAR STYLING === */
    /* Use consistent purple matching footer and Saturn */
    --header-bg: #5b21b6;         /* Deep purple - matching footer and Saturn */
    --header-bg-secondary: #4c1d95; /* Slightly darker purple for depth */
    --header-text: #ffffff;       /* Pure white for excellent contrast */
    --header-text-secondary: #e5e7eb; /* Light gray for secondary text */
    --header-border: #7c3aed;     /* Purple border */
    
    /* Navbar specific */
    --navbar-bg: var(--header-bg);
    --navbar-text: var(--header-text);
    --navbar-text-hover: #f3f4f6;
    --navbar-link-active: #ddd6fe; /* Light purple for active links */
    
    /* Header/Navigation gradients - Keep dark purple for header */
    --gradient-primary: linear-gradient(135deg, #5b21b6 0%, #4c1d95 100%);
    --gradient-secondary: linear-gradient(135deg, var(--brand-bg-primary) 0%, var(--brand-bg-secondary) 100%);

    /* === PLANETARY PALETTE === */
    /* Improved planetary colors with better readability */
    --mars-color: #dc2626;        /* Strong red - better contrast */
    --mars-bg: #fef2f2;           /* Very light red background */
    --mars-border: #fecaca;       /* Light red border */
    
    --jupiter-color: #d97706;     /* Rich amber/orange - instead of yellow */
    --jupiter-bg: #fffbeb;        /* Very light amber background */
    --jupiter-border: #fed7aa;    /* Light amber border */
    
    --saturn-color: #5b21b6;      /* Deep consistent purple - matching footer */
    --saturn-bg: #f3f4f6;         /* Very light neutral background */
    --saturn-border: #d8b4fe;     /* Light purple border */
    
    --mercury-color: #059669;     /* Forest green - better contrast */
    --mercury-bg: #f0fdf4;        /* Very light green background */
    --mercury-border: #bbf7d0;    /* Light green border */
    
    --venus-color: #ea580c;       /* Warm orange - better than amber */
    --venus-bg: #fff7ed;          /* Very light orange background */
    --venus-border: #fed7aa;      /* Light orange border */
    
    --sun-color: #f59e0b;         /* Golden yellow - refined */
    --sun-bg: #fffbeb;            /* Very light yellow background */
    --sun-border: #fde68a;        /* Light yellow border */
    
    --moon-color: #6b7280;        /* Neutral gray - better contrast */
    --moon-bg: #f9fafb;           /* Very light gray background */
    --moon-border: #e5e7eb;       /* Light gray border */
    
    --rahu-color: #7c3aed;        /* Vibrant purple - consistent with Saturn */
    --rahu-bg: #faf5ff;           /* Very light purple background */
    --rahu-border: #d8b4fe;       /* Light purple border */
    
    --ketu-color: #92400e;        /* Earthy brown - better contrast */
    --ketu-bg: #fffbeb;           /* Very light brown background */
    --ketu-border: #fde68a;       /* Light brown border */
    
    /* Current/Active state - refined green */
    --current-glow: #059669;      /* Forest green for active states */
    --current-bg: #f0fdf4;        /* Light green background */
    --current-border: #34d399;    /* Medium green border */

    /* Badge colors - no more yellow-purple */
    --badge-primary-bg: #dbeafe;   /* Light blue background */
    --badge-primary-color: #1e40af; /* Dark blue text */
    --badge-primary-border: #93c5fd; /* Medium blue border */
    
    --badge-secondary-bg: #f3f4f6; /* Light gray background */
    --badge-secondary-color: #374151; /* Dark gray text */
    --badge-secondary-border: #d1d5db; /* Medium gray border */
    
    --badge-success-bg: var(--current-bg); /* Light green */
    --badge-success-color: var(--current-glow); /* Dark green text */
    --badge-success-border: var(--current-border); /* Medium green border */

    /* === LEGACY COMPATIBILITY === */
    /* Maintain compatibility with existing variables */
    --bg-primary: var(--brand-bg-primary);
    --bg-secondary: var(--brand-bg-secondary);
    --text-primary: var(--brand-text-primary);
    --text-secondary: var(--brand-text-secondary);
}
    
    /* 📝 Text Hierarchy */
    --text-primary: #2D3748;            /* Deep blue-gray */
    --text-secondary: #718096;          /* Medium gray */
    --text-tertiary: #A0AEC0;           /* Light gray */
    --text-accent: #4A5568;             /* Accent text */
    --text-muted: #E2E8F0;              /* Very light */
    
    /* 🪐 Vedic Planetary Colors - Softened Pastels */
    --planet-sun: #FFE4B5;              /* Soft gold */
    --planet-moon: #F8F9FA;             /* Pearl white */
    --planet-mars: #FFD6CC;             /* Soft coral */
    --planet-mercury: #D4F4DD;          /* Gentle green */
    --planet-jupiter: #FFF2CC;          /* Warm cream */
    --planet-venus: #FFE4E1;            /* Rose quartz */
    --planet-saturn: #E6F3FF;           /* Sky blue */
    --planet-rahu: #EDE7F6;             /* Soft purple */
    --planet-ketu: #F3E5AB;             /* Warm sand */
    
    /* 🎯 Interactive States */
    --state-hover: #E2E8F0;             /* Light hover */
    --state-active: #CBD5E0;            /* Active state */
    --state-focus: #90CDF4;             /* Focus ring */
    --state-selected: #BEE3F8;          /* Selection */
    
    /* 🚨 Semantic Colors - Gentle */
    --semantic-success: #C6F6D5;        /* Soft green */
    --semantic-warning: #FEFCBF;        /* Gentle yellow */
    --semantic-error: #FED7D7;          /* Light red */
    --semantic-info: #BEE3F8;           /* Soft blue */
    
    /* 📊 Status Indicators */
    --status-current: #68D391;          /* Current active */
    --status-upcoming: #90CDF4;         /* Future */
    --status-past: #E2E8F0;             /* Historical */
    --status-premium: #D6BCFA;          /* Premium feature */
    
    /* 🎭 Energy Levels */
    --energy-high: #FBB6CE;             /* Energetic pink */
    --energy-medium: #FEEBC8;           /* Balanced orange */
    --energy-low: #C6F6D5;              /* Calm green */
    --energy-spiritual: #E9D8FD;        /* Mystical purple */
    
    /* 🔧 Utility Colors */
    --border-light: #E2E8F0;            /* Light borders */
    --border-medium: #CBD5E0;           /* Medium borders */
    --border-accent: #A0AEC0;           /* Accent borders */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-elevated: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 🌊 Gradients */
    --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    --gradient-warm: linear-gradient(135deg, var(--brand-warm) 0%, var(--brand-rose) 100%);
    --gradient-cosmic: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-accent) 100%);
    --gradient-glass: linear-gradient(135deg, var(--bg-glass) 0%, var(--bg-overlay) 100%);
    
    /* 📐 Spacing System */
    --space-xs: 0.25rem;                /* 4px */
    --space-sm: 0.5rem;                 /* 8px */
    --space-md: 1rem;                   /* 16px */
    --space-lg: 1.5rem;                 /* 24px */
    --space-xl: 2rem;                   /* 32px */
    --space-2xl: 3rem;                  /* 48px */
    --space-3xl: 4rem;                  /* 64px */
    
    /* 🔤 Typography Scale */
    --font-size-xs: 0.75rem;            /* 12px */
    --font-size-sm: 0.875rem;           /* 14px */
    --font-size-base: 1rem;             /* 16px */
    --font-size-lg: 1.125rem;           /* 18px */
    --font-size-xl: 1.25rem;            /* 20px */
    --font-size-2xl: 1.5rem;            /* 24px */
    --font-size-3xl: 1.875rem;          /* 30px */
    --font-size-4xl: 2.25rem;           /* 36px */
    
    /* 🎨 Border Radius */
    --radius-sm: 0.25rem;               /* 4px */
    --radius-md: 0.5rem;                /* 8px */
    --radius-lg: 0.75rem;               /* 12px */
    --radius-xl: 1rem;                  /* 16px */
    --radius-full: 9999px;              /* Full round */
}

/* 🌟 Global Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
}

/* 🎯 Component Base Classes */
.brand-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    transition: all 0.3s ease;
}

.brand-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.brand-button {
    background: var(--brand-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.brand-button:hover {
    background: var(--state-hover);
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

.brand-button.primary {
    background: var(--brand-secondary);
    color: var(--text-primary);
}

.brand-button.accent {
    background: var(--brand-accent);
    color: var(--text-primary);
}

/* 🎨 Text Styles */
.text-brand-primary { color: var(--text-primary); }
.text-brand-secondary { color: var(--text-secondary); }
.text-brand-tertiary { color: var(--text-tertiary); }
.text-brand-accent { color: var(--text-accent); }

/* 🌈 Background Utilities */
.bg-brand-primary { background: var(--brand-primary); }
.bg-brand-secondary { background: var(--brand-secondary); }
.bg-brand-accent { background: var(--brand-accent); }
.bg-brand-warm { background: var(--brand-warm); }
.bg-brand-rose { background: var(--brand-rose); }

/* 🪐 Planetary Theme Classes */
.planet-sun { 
    background: var(--planet-sun); 
    color: var(--text-primary);
    border-left: 4px solid #F59E0B;
}

.planet-moon { 
    background: var(--planet-moon); 
    color: var(--text-primary);
    border-left: 4px solid #9CA3AF;
}

.planet-mars { 
    background: var(--planet-mars); 
    color: var(--text-primary);
    border-left: 4px solid #EF4444;
}

.planet-mercury { 
    background: var(--planet-mercury); 
    color: var(--text-primary);
    border-left: 4px solid #10B981;
}

.planet-jupiter { 
    background: var(--planet-jupiter); 
    color: var(--text-primary);
    border-left: 4px solid #F59E0B;
}

.planet-venus { 
    background: var(--planet-venus); 
    color: var(--text-primary);
    border-left: 4px solid #EC4899;
}

.planet-saturn { 
    background: var(--planet-saturn); 
    color: var(--text-primary);
    border-left: 4px solid #3B82F6;
}

.planet-rahu { 
    background: var(--planet-rahu); 
    color: var(--text-primary);
    border-left: 4px solid #8B5CF6;
}

.planet-ketu { 
    background: var(--planet-ketu); 
    color: var(--text-primary);
    border-left: 4px solid #92400E;
}

/* 🎯 Status Classes */
.status-current {
    background: var(--status-current);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    font-weight: 500;
}

.status-upcoming {
    background: var(--status-upcoming);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
}

.status-past {
    background: var(--status-past);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
}

/* ⚡ Energy Level Indicators */
.energy-high {
    background: var(--energy-high);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.energy-medium {
    background: var(--energy-medium);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.energy-low {
    background: var(--energy-low);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.energy-spiritual {
    background: var(--energy-spiritual);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* 🌊 Gradient Classes */
.gradient-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
}

.gradient-warm {
    background: var(--gradient-warm);
    color: var(--text-primary);
}

.gradient-cosmic {
    background: var(--gradient-cosmic);
    color: var(--text-primary);
}

.gradient-glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
}

/* 🎭 Animation Classes */
.brand-fade-in {
    animation: brandFadeIn 0.6s ease-out;
}

.brand-slide-up {
    animation: brandSlideUp 0.8s ease-out;
}

.brand-pulse {
    animation: brandPulse 2s ease-in-out infinite;
}

@keyframes brandFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes brandSlideUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes brandPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.05); 
        opacity: 0.8; 
    }
}

/* 📱 Responsive Utilities */
@media (max-width: 768px) {
    :root {
        --space-lg: 1rem;
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --font-size-3xl: 1.5rem;
        --font-size-4xl: 1.875rem;
    }
}

/* 🎨 Premium Styling */
.premium-feature {
    position: relative;
    background: var(--gradient-cosmic);
    border: 1px solid var(--status-premium);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.premium-feature::before {
    content: '✨';
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: var(--font-size-lg);
    z-index: 1;
}

/* 🌟 Special Effects */
.mystical-glow {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
    border: 1px solid var(--planet-rahu);
}

.cosmic-border {
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box,
                var(--gradient-cosmic) border-box;
    border-radius: var(--radius-lg);
}

.glass-effect {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
}