/* 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) - Deep Space
 */
:root,
[data-theme="night"] {
    /* A darker, more subtle sky */
    --gradient-background: linear-gradient(
        180deg,
        #01020d 0%,
        #05081c 25%,
        #0b0f2a 50%,
        #05081c 75%,
        #01020d 100%
    );
    
    /* A very subtle nebula effect */
    --gradient-overlay: radial-gradient(
        ellipse at 50% 30%,
        rgba(30, 41, 99, 0.15) 0%,
        transparent 70%
    );
    
    /* Softer text colors */
    --text-primary: #e0e2f0;
    --text-secondary: rgba(224, 226, 240, 0.8);
    --text-tertiary: rgba(224, 226, 240, 0.5);
    --text-muted: rgba(224, 226, 240, 0.3);
    
    /* Darker glass with a hint of blue */
    --glass-background: rgba(10, 14, 40, 0.4);
    --glass-background-solid: rgba(10, 14, 40, 0.8);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Buttons with better contrast */
    --button-primary-bg: #c7d2fe;
    --button-primary-text: #1e293b;
    --button-secondary-bg: rgba(255, 255, 255, 0.05);
    --button-secondary-text: #e0e2f0;
    
    /* More subtle accent colors */
    --accent-primary: #818cf8;
    --accent-secondary: #a78bfa;
    --accent-tertiary: #f472b6;
    
    /* Star colors for animation */
    --star-color-1: #ffffff;
    --star-color-2: #e2e8f0;
    --star-color-3: #a7c0fA;
    --star-color-4: #d1d5db;
    
    /* Status colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

/* 
 * SUNRISE THEME - First Light
 */
[data-theme="sunrise"] {
    /* Soft pastel gradient */
    --gradient-background: linear-gradient(
        180deg,
        #fbcfe8 0%, /* Light Pink */
        #f5d0fe 20%, /* Light Purple */
        #c4b5fd 40%, /* Light Indigo */
        #a5b4fc 60%, /* Light Blue */
        #93c5fd 80%, /* Sky Blue */
        #fde68a 100% /* Pale Yellow */
    );
    
    /* A gentle sun glow */
    --gradient-overlay: radial-gradient(
        circle at 50% 80%,
        rgba(253, 230, 138, 0.2) 0%,
        transparent 50%
    );
    
    /* Dark, warm text colors */
    --text-primary: #2d1a36;
    --text-secondary: rgba(45, 26, 54, 0.85);
    --text-tertiary: rgba(45, 26, 54, 0.6);
    --text-muted: rgba(45, 26, 54, 0.4);
    
    /* Frosted glass effect */
    --glass-background: rgba(255, 255, 255, 0.4);
    --glass-background-solid: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(45, 26, 54, 0.1);
    --glass-shadow: 0 8px 32px rgba(45, 26, 54, 0.1);
    
    /* Soft-toned buttons */
    --button-primary-bg: #2d1a36;
    --button-primary-text: #fbcfe8;
    --button-secondary-bg: rgba(45, 26, 54, 0.05);
    --button-secondary-text: #2d1a36;
    
    /* Pastel accent colors */
    --accent-primary: #a5b4fc;
    --accent-secondary: #f5d0fe;
    --accent-tertiary: #fbcfe8;
}

/* 
 * DAY THEME - Overcast Sky
 */
[data-theme="day"] {
    /* A much lighter, calmer sky */
    --gradient-background: linear-gradient(
        180deg,
        #f0f9ff 0%,  /* Almost white blue */
        #e0f2fe 30%, /* Lighter sky blue */
        #bae6fd 60%, /* Light sky blue */
        #7dd3fc 100% /* Soft blue */
    );
    
    /* A hint of a sun behind clouds */
    --gradient-overlay: radial-gradient(
        circle at 70% 30%,
        rgba(253, 244, 212, 0.3) 0%,
        transparent 40%
    );
    
    /* Softer, slate-gray text */
    --text-primary: #334155;
    --text-secondary: rgba(51, 65, 85, 0.85);
    --text-tertiary: rgba(51, 65, 85, 0.6);
    --text-muted: rgba(51, 65, 85, 0.4);
    
    /* Clean glass effect */
    --glass-background: rgba(255, 255, 255, 0.6);
    --glass-background-solid: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(51, 65, 85, 0.1);
    --glass-shadow: 0 8px 32px rgba(51, 65, 85, 0.1);
    
    /* Contrasting buttons */
    --button-primary-bg: #334155;
    --button-primary-text: #f0f9ff;
    --button-secondary-bg: rgba(51, 65, 85, 0.05);
    --button-secondary-text: #334155;
    
    /* Desaturated accent colors */
    --accent-primary: #38bdf8;
    --accent-secondary: #67e8f9;
    --accent-tertiary: #a78bfa;
}

/* 
 * SUNSET THEME - Dusk
 */
[data-theme="sunset"] {
    /* A warmer, more blended gradient */
    --gradient-background: linear-gradient(
        180deg,
        #fdba74 0%, /* Orange */
        #f472b6 30%, /* Pink */
        #c084fc 50%, /* Purple */
        #5b21b6 80%, /* Deep Indigo */
        #312e81 100% /* Midnight Blue */
    );
    
    /* Subtle glow from the setting sun */
    --gradient-overlay: radial-gradient(
        ellipse at 10% 20%,
        rgba(253, 186, 116, 0.2) 0%,
        transparent 60%
    );
    
    /* Warm, off-white text */
    --text-primary: #fff7ed;
    --text-secondary: rgba(255, 247, 237, 0.85);
    --text-tertiary: rgba(255, 247, 237, 0.6);
    --text-muted: rgba(255, 247, 237, 0.4);
    
    /* Deep purple glass */
    --glass-background: rgba(49, 46, 129, 0.4);
    --glass-background-solid: rgba(49, 46, 129, 0.8);
    --glass-border: rgba(255, 247, 237, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* Contrasting buttons */
    --button-primary-bg: #fff7ed;
    --button-primary-text: #312e81;
    --button-secondary-bg: rgba(255, 247, 237, 0.1);
    --button-secondary-text: #fff7ed;
    
    /* Warm accent colors */
    --accent-primary: #fdba74;
    --accent-secondary: #f472b6;
    --accent-tertiary: #c084fc;
}

/* 
 * THEME APPLICATION
 */
body {
    background-color: #01020d; /* Fallback for night theme */
    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-text);
    opacity: 0.3;
}

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

/* STARRY NIGHT ANIMATION (Night theme only) - More performant version */

@keyframes twinkle {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes shooting-star {
    0% {
        transform: translateX(-100vw) translateY(-50vh) rotate(215deg);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(50vh) rotate(215deg);
        opacity: 0;
    }
}

[data-theme="night"] body {
    position: relative;
}

/* Create a single starfield layer */
[data-theme="night"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%; /* Make it taller to animate vertically */
    pointer-events: none;
    z-index: -1;
    background-image:
        /* Small stars */
        radial-gradient(1px 1px at 10% 30%, var(--star-color-1), transparent 100%),
        radial-gradient(1px 1px at 80% 20%, var(--star-color-2), transparent 100%),
        radial-gradient(1px 1px at 40% 70%, var(--star-color-3), transparent 100%),
        radial-gradient(1px 1px at 90% 90%, var(--star-color-4), transparent 100%),
        radial-gradient(1px 1px at 25% 85%, var(--star-color-1), transparent 100%),
        /* Medium stars */
        radial-gradient(1.5px 1.5px at 20% 60%, var(--star-color-1), transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 10%, var(--star-color-2), transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 95%, var(--star-color-3), transparent 100%),
        radial-gradient(1.5px 1.5px at 95% 40%, var(--star-color-4), transparent 100%);
    background-size: 500px 500px, 800px 800px;
    background-position: 0 0;
    animation: twinkle 200s linear infinite;
}

/* Add a subtle shooting star */
[data-theme="night"] body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 1px;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(to right, var(--accent-primary), transparent);
    opacity: 0;
    animation: shooting-star 15s linear infinite;
    animation-delay: 5s; /* Stagger the animation */
}