style.css

/* Shared styles across all pages */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.font-space {
    font-family: 'Space Grotesk', sans-serif;
}

/* Custom gradients */
.bg-gradient-hero {
    background: linear-gradient(135deg, #10b981 0%, #f59e0b 100%);
}

/* Responsive textarea */
#prompt {
    min-height: 150px;
}

/* Animation for interactive elements */
.hover\:scale-105 {
    transition: transform 0.2s ease-in-out;
}

/* Custom shadow depths */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Focus states */
.focus\:ring-4:focus {
    outline: none;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .text-5xl {
        font-size: 2.5rem;
    }
    
    .text-7xl {
        font-size: 3rem;
    }
    
    .text-4xl {
        font-size: 2rem;
    }
    
    .text-2xl {
        font-size: 1.5rem;
    }
}