/* theme.css - Theme system with beautiful starry night */

/* 
 * CSS CUSTOM PROPERTIES
 * All theme variables in one place
 */

 :root {
    /* Transition timing */
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout measurements */
    --header-height: 80px;
    --container-max: 1140px;
    --container-sm: 768px;
    --container-lg: 1400px;
    --content-padding: 20px;
    
    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Border radius scale */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;
    
    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-max: 9999;
}

/* 
 * NIGHT THEME (Default) - Starry Night
 */
:root,
[data-theme="night"] {
    /* Sky gradient with depth */
    --gradient-background: linear-gradient(
        180deg,
        #020515 0%,
        #0a0d2e 20%,
        #0f1642 40%,
        #141852 60%,
        #0a0d2e 80%,
        #020515 100%
    );
    
    /* Additional sky layers for depth */
    --gradient-overlay: radial-gradient(
        ellipse at top,
        rgba(30, 41, 99, 0.3) 0%,
        transparent 70%
    );
    
    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(229, 231, 235, 0.85);
    --text-tertiary: rgba(229, 231, 235, 0.6);
    --text-muted: rgba(229, 231, 235, 0.4);
    
    /* Glass morphism */
    --glass-background: rgba(15, 22, 66, 0.4);
    --glass-background-solid: rgba(15, 22, 66, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* Interactive elements */
    --button-primary-bg: #ffffff;
    --button-primary-text: #0a0d2e;
    --button-secondary-bg: rgba(255, 255, 255, 0.1);
    --button-secondary-text: #ffffff;
    
    /* Accent colors */
    --accent-primary: #60a5fa;
    --accent-secondary: #a78bfa;
    --accent-tertiary: #f472b6;
    
    /* Star colors for animation */
    --star-color-1: #ffffff;
    --star-color-2: #fbbf24;
    --star-color-3: #60a5fa;
    --star-color-4: #a78bfa;
    
    /* Status colors */
    --success: #34d399;
    --warning: #fbbf24;
    --error: #f87171;
    --info: #60a5fa;
}

/* 
 * SUNRISE THEME - Dawn Sky
 */
[data-theme="sunrise"] {
    --gradient-background: linear-gradient(
        180deg,
        #fef3c7 0%,
        #fde68a 15%,
        #fbbf24 30%,
        #f59e0b 45%,
        #f472b6 70%,
        #ec4899 85%,
        #be185d 100%
    );
    
    --gradient-overlay: radial-gradient(
        circle at 30% 80%,
        rgba(251, 191, 36, 0.3) 0%,
        transparent 50%
    );
    
    --text-primary: #451a03;
    --text-secondary: rgba(69, 26, 3, 0.85);
    --text-tertiary: rgba(69, 26, 3, 0.6);
    --text-muted: rgba(69, 26, 3, 0.4);
    
    --glass-background: rgba(254, 243, 199, 0.5);
    --glass-background-solid: rgba(254, 243, 199, 0.9);
    --glass-border: rgba(245, 158, 11, 0.2);
    --glass-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
    
    --button-primary-bg: #451a03;
    --button-primary-text: #fef3c7;
    --button-secondary-bg: rgba(245, 158, 11, 0.2);
    --button-secondary-text: #451a03;
    
    --accent-primary: #f59e0b;
    --accent-secondary: #ec4899;
    --accent-tertiary: #be185d;
}

/* 
 * DAY THEME - Clear Sky
 */
[data-theme="day"] {
    --gradient-background: linear-gradient(
        180deg,
        #dbeafe 0%,
        #bfdbfe 20%,
        #93c5fd 40%,
        #60a5fa 60%,
        #3b82f6 80%,
        #2563eb 100%
    );
    
    --gradient-overlay: radial-gradient(
        circle at 70% 30%,
        rgba(251, 191, 36, 0.15) 0%,
        transparent 40%
    );
    
    --text-primary: #1e293b;
    --text-secondary: rgba(30, 41, 59, 0.85);
    --text-tertiary: rgba(30, 41, 59, 0.6);
    --text-muted: rgba(30, 41, 59, 0.4);
    
    --glass-background: rgba(255, 255, 255, 0.5);
    --glass-background-solid: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(59, 130, 246, 0.2);
    --glass-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
    
    --button-primary-bg: #1e293b;
    --button-primary-text: #ffffff;
    --button-secondary-bg: rgba(59, 130, 246, 0.2);
    --button-secondary-text: #1e293b;
    
    --accent-primary: #3b82f6;
    --accent-secondary: #0ea5e9;
    --accent-tertiary: #06b6d4;
}

/* 
 * SUNSET THEME - Twilight
 */
[data-theme="sunset"] {
    --gradient-background: linear-gradient(
        180deg,
        #fbbf24 0%,
        #f59e0b 15%,
        #ef4444 30%,
        #dc2626 45%,
        #7c3aed 60%,
        #6d28d9 75%,
        #4c1d95 90%,
        #2e1065 100%
    );
    
    --gradient-overlay: radial-gradient(
        ellipse at bottom,
        rgba(239, 68, 68, 0.2) 0%,
        transparent 60%
    );
    
    --text-primary: #fef3c7;
    --text-secondary: rgba(254, 243, 199, 0.85);
    --text-tertiary: rgba(254, 243, 199, 0.6);
    --text-muted: rgba(254, 243, 199, 0.4);
    
    --glass-background: rgba(76, 29, 149, 0.4);
    --glass-background-solid: rgba(76, 29, 149, 0.8);
    --glass-border: rgba(254, 243, 199, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    --button-primary-bg: #fef3c7;
    --button-primary-text: #4c1d95;
    --button-secondary-bg: rgba(254, 243, 199, 0.15);
    --button-secondary-text: #fef3c7;
    
    --accent-primary: #fbbf24;
    --accent-secondary: #ef4444;
    --accent-tertiary: #7c3aed;
}

/* 
 * THEME APPLICATION
 */
body {
    background-color: #020515;
    background-image: 
        var(--gradient-overlay),
        var(--gradient-background);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: var(--text-secondary);
    transition: 
        background-image var(--transition-slow),
        color var(--transition-base);
}

/* Apply theme colors to elements */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

a {
    color: var(--text-primary);
}

/* Selection colors */
::selection {
    background-color: var(--accent-primary);
    color: var(--button-primary-bg);
    opacity: 0.3;
}

/* Focus ring color */
:focus-visible {
    outline-color: var(--accent-primary);
}

/* 
 * STARRY NIGHT ANIMATION (Night theme only)
 */
@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes shootingstar {
    0% { 
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 1;
    }
    70% { opacity: 1; }
    100% { 
        transform: translateX(300px) translateY(300px) rotate(45deg);
        opacity: 0;
    }
}

/* Stars container */
[data-theme="night"] body::before,
[data-theme="night"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Small twinkling stars */
[data-theme="night"] body::before {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--star-color-1), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--star-color-2), transparent),
        radial-gradient(1px 1px at 50px 160px, var(--star-color-3), transparent),
        radial-gradient(1px 1px at 130px 40px, var(--star-color-1), transparent),
        radial-gradient(2px 2px at 80px 10px, var(--star-color-4), transparent),
        radial-gradient(1px 1px at 140px 120px, var(--star-color-2), transparent),
        radial-gradient(1px 1px at 175px 60px, var(--star-color-1), transparent),
        radial-gradient(2px 2px at 90px 90px, var(--star-color-3), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 4s ease-in-out infinite;
}

/* Larger stars */
[data-theme="night"] body::after {
    background-image: 
        radial-gradient(3px 3px at 75px 125px, var(--star-color-4), transparent),
        radial-gradient(3px 3px at 150px 50px, var(--star-color-1), transparent),
        radial-gradient(2px 2px at 45px 175px, var(--star-color-2), transparent);
    background-repeat: repeat;
    background-size: 250px 250px;
    animation: twinkle 6s ease-in-out infinite;
    animation-delay: 1s;
}

/* Shooting star (occasional) */
@media (min-width: 768px) {
    [data-theme="night"] main::before {
        content: '';
        position: fixed;
        top: 10%;
        left: -100px;
        width: 4px;
        height: 4px;
        background: linear-gradient(45deg, transparent, var(--star-color-1), transparent);
        border-radius: 50%;
        opacity: 0;
        animation: shootingstar 8s linear infinite;
        animation-delay: 5s;
        z-index: 1;
        pointer-events: none;
    }
}

/* Ensure content stays above stars */
main, header, footer {
    position: relative;
    z-index: 2;
}