/* ================================
   APP GRADIENT - SOFT SUNSET SKY
   ================================
   
   Design Philosophy:
   -----------------
   Inspired by pink clouds at sunset with light blue sky peeking through.
   Subtle and low-key - close to white with gentle color hints.
   
   Color Palette:
   -------------
   Base:      Near-white (#FDFCFB) - Clean, minimal
   Sky:       Light Blue - Cool sky hints at top
   Primary:   Soft Coral - Gentle sunset warmth
   Secondary: Dusty Rose - Whisper of pink clouds
   Tertiary:  Soft Peach - Golden hour glow
   Accent:    Soft Lavender - Cool contrast
   
   ================================ */

/* CSS Custom Properties for Sunset Theme */
:root {
    /* Base Colors - Warm white */
    --app-gradient-base: #FDFBF9;
    --app-gradient-base-alt: #FBF8F5;
    
    /* Gradient Blob Colors - Stronger Sunset Palette */
    --app-blob-coral: hsla(16, 95%, 75%, 0.55);
    --app-blob-coral-soft: hsla(20, 85%, 80%, 0.38);
    --app-blob-rose: hsla(330, 60%, 78%, 0.52);
    --app-blob-rose-soft: hsla(335, 55%, 82%, 0.35);
    --app-blob-peach: hsla(28, 90%, 80%, 0.52);
    --app-blob-peach-soft: hsla(30, 80%, 84%, 0.35);
    --app-blob-lavender: hsla(260, 60%, 82%, 0.45);
    --app-blob-lavender-soft: hsla(265, 55%, 86%, 0.3);
    --app-blob-pink: hsla(345, 75%, 76%, 0.5);
    --app-blob-pink-soft: hsla(350, 65%, 80%, 0.34);
    --app-blob-salmon: hsla(10, 85%, 78%, 0.45);
    
    /* Sky blue tones - more visible */
    --app-blob-sky: hsla(200, 70%, 75%, 0.55);
    --app-blob-sky-soft: hsla(205, 65%, 80%, 0.4);
    
    /* Noise texture opacity */
    --app-noise-opacity: 0.025;
}

/* ================================
   MAIN BODY GRADIENT - SUNSET CLOUDS
   ================================ */

body {
    /* Warm cream base */
    background-color: var(--app-gradient-base) !important;
    
    /* 
     * Multi-layer sunset gradient stack (bottom to top):
     * Creates the effect of pink clouds against a warm sunset sky
     */
    background-image: 
        /* === SECTION 1: Hero/Top (0-25%) === */
        /* Light blue sky - top left, larger */
        radial-gradient(
            ellipse 80% 25% at -5% 3%,
            var(--app-blob-sky) 0%,
            var(--app-blob-sky-soft) 35%,
            transparent 70%
        ),
        /* Sky - top right, more visible */
        radial-gradient(
            ellipse 65% 18% at 90% 4%,
            var(--app-blob-sky) 0%,
            var(--app-blob-sky-soft) 35%,
            transparent 65%
        ),
        /* Peach - hero section */
        radial-gradient(
            ellipse 50% 18% at 70% 10%,
            var(--app-blob-peach) 0%,
            var(--app-blob-peach-soft) 35%,
            transparent 70%
        ),
        
        /* === SECTION 2: Upper-mid (25-50%) === */
        /* Rose bloom - left side */
        radial-gradient(
            ellipse 45% 15% at 5% 30%,
            var(--app-blob-rose-soft) 0%,
            transparent 70%
        ),
        /* Pink - right side */
        radial-gradient(
            ellipse 65% 22% at 88% 37%,
            var(--app-blob-pink) 0%,
            var(--app-blob-pink-soft) 40%,
            transparent 70%
        ),
        /* Coral accent - center */
        radial-gradient(
            ellipse 40% 12% at 25% 42%,
            var(--app-blob-coral-soft) 0%,
            transparent 65%
        ),
        
        /* === SECTION 3: Middle (50-70%) === */
        /* Large sky cloud - left */
        radial-gradient(
            ellipse 120% 40% at 10% 55%,
            var(--app-blob-sky-soft) 0%,
            transparent 55%
        ),
        /* Large salmon cloud - right */
        radial-gradient(
            ellipse 120% 40% at 90% 60%,
            var(--app-blob-salmon) 0%,
            transparent 55%
        ),
        
        /* === SECTION 4: Lower (70-90%) === */
        /* Huge pink cloud - left */
        radial-gradient(
            ellipse 160% 55% at 15% 76%,
            var(--app-blob-pink-soft) 0%,
            transparent 55%
        ),
        /* Huge sky cloud - right */
        radial-gradient(
            ellipse 160% 55% at 85% 82%,
            var(--app-blob-sky-soft) 0%,
            transparent 50%
        ),
        
        /* === SECTION 5-6: Bottom (90-100%) === */
        /* Massive sky wash - bottom */
        radial-gradient(
            ellipse 200% 55% at 50% 95%,
            var(--app-blob-sky-soft) 0%,
            transparent 55%
        ) !important;
    
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-size: 100% 300vh !important;
    
    /* Smooth rendering */
    -webkit-font-smoothing: antialiased;
}

/* ================================
   NOISE TEXTURE OVERLAY
   ================================
   Adds dreamy cloud texture feel
*/

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    
    /* SVG noise pattern */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    
    opacity: var(--app-noise-opacity);
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Ensure content is above noise layer */
body > * {
    position: relative;
    z-index: 1;
}

/* ================================
   SKELETON LOADER MATCH
   ================================ */

.skeleton-loader {
    background: var(--app-gradient-base) !important;
}

/* ================================
   MOBILE OPTIMIZATIONS
   ================================ */

@media (max-width: 768px) {
    body {
        /* Wider gradient for mobile, fixed height */
        background-size: 180vw 300vh !important;
        background-position: center top !important;
    }
    
    /* Keep noise subtle on mobile */
    body::before {
        opacity: 0.025;
    }
}

/* ================================
   LARGE DESKTOP ENHANCEMENTS
   ================================ */

@media (min-width: 1440px) {
    body {
        background-image: 
            /* === SECTION 1: Hero/Top === */
            radial-gradient(
                ellipse 80% 25% at -5% 3%,
                var(--app-blob-sky) 0%,
                var(--app-blob-sky-soft) 35%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 65% 18% at 90% 4%,
                var(--app-blob-sky) 0%,
                var(--app-blob-sky-soft) 35%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 50% 18% at 70% 10%,
                var(--app-blob-peach) 0%,
                var(--app-blob-peach-soft) 35%,
                transparent 70%
            ),
            /* Extra: Far right sky for wide screens */
            radial-gradient(
                ellipse 40% 16% at 100% 12%,
                var(--app-blob-sky) 0%,
                transparent 60%
            ),
            
            /* === SECTION 2: Upper-mid === */
            radial-gradient(
                ellipse 45% 15% at 5% 30%,
                var(--app-blob-rose-soft) 0%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 65% 22% at 88% 37%,
                var(--app-blob-pink) 0%,
                var(--app-blob-pink-soft) 40%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 40% 12% at 25% 42%,
                var(--app-blob-coral-soft) 0%,
                transparent 65%
            ),
            
            /* === SECTION 3: Middle === */
            radial-gradient(
                ellipse 120% 40% at 10% 55%,
                var(--app-blob-sky-soft) 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 120% 40% at 90% 60%,
                var(--app-blob-salmon) 0%,
                transparent 55%
            ),
            
            /* === SECTION 4: Lower === */
            radial-gradient(
                ellipse 160% 55% at 15% 76%,
                var(--app-blob-pink-soft) 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 160% 55% at 85% 82%,
                var(--app-blob-sky-soft) 0%,
                transparent 50%
            ),
            
            /* === SECTION 5-6: Bottom === */
            radial-gradient(
                ellipse 200% 55% at 50% 95%,
                var(--app-blob-sky-soft) 0%,
                transparent 55%
            ) !important;
        
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-size: 100% 300vh !important;
    }
}

/* ================================
   REDUCED MOTION PREFERENCE
   ================================ */

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}