@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* === BASE LIGHT THEME STYLES (Default) === */
body {
    background-color: #f0f4f8; 
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    padding: 0; 
    position: relative;
    color: theme('colors.primary-dark'); /* Default text color */
    transition: all 0.5s ease;
}

/* Lighter glass panel for header/footer */
.glass-panel-light {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for separation */
    transition: all 0.5s ease;
}

/* Glassmorphism Effect for the main container */
.glass-panel {
    background-color: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9); 
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.15), 
        0 0 30px rgba(20, 184, 166, 0.5); 
    transition: all 0.4s ease-in-out; 
    max-width: 90%;
}

.glass-input {
     background-color: rgba(240, 240, 240, 0.7); 
     border-color: rgba(0, 0, 0, 0.1);
     color: theme('colors.primary-dark'); 
}
.glass-input::placeholder {
    color: rgba(31, 41, 55, 0.6); 
}

/* === DARK THEME OVERRIDES === */
body.dark {
    /* DEEP, DARK GRADIENT BACKGROUND */
    background: linear-gradient(135deg, #0a0e19 0%, #1c1538 50%, #0a0e19 100%);
    color: theme('colors.primary-light'); /* White/Light text color */
}

body.dark .glass-panel-light {
    background-color: rgba(0, 0, 0, 0.3); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: theme('colors.primary-light');
}

body.dark .glass-panel {
    /* Darker, semi-transparent background */
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Strong glow with dark shadow */
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.5), 
        0 0 35px rgba(20, 184, 166, 0.9); 
}

body.dark .glass-panel:hover {
    transform: translateY(-5px); 
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.8), 
        0 0 50px rgba(20, 184, 166, 1); 
}

/* Explicit color overrides for text classes in dark mode */
body.dark .text-primary-dark {
     color: theme('colors.primary-light'); /* Ensures title text "Snap" is white */
}
body.dark .text-gray-700 {
     color: theme('colors.gray.300'); /* Ensures subtitle text is light */
}

body.dark .glass-input {
     background-color: rgba(255, 255, 255, 0.15); /* Lighter semi-transparent */
     border-color: rgba(255, 255, 255, 0.4);
     color: #FFFFFF; /* White text */
}
body.dark .glass-input:focus {
     background-color: rgba(255, 255, 255, 0.3);
     border-color: theme('colors.accent-teal');
}
body.dark .glass-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
/* === End Dark Theme Overrides === */


/* Shared Hover Effect for Glow */
.glass-panel:hover {
    transform: translateY(-5px); /* Slight lift */
}

/* Responsive styling for larger containers */
@media (min-width: 768px) {
    .glass-panel {
        max-width: 48rem; /* Medium size container */
    }
}

/* Button Glow Effect on Hover (Kept original logic) */
#generate-image-button {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#generate-image-button:hover {
    box-shadow: 
        0 0 15px rgba(20, 184, 166, 0.6), 
        0 6px 12px rgba(0, 0, 0, 0.2); 
}