@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
body {
    @apply antialiased text-gray-900;
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
    font-family: 'Hanken Grotesk', sans-serif;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Custom components */
.btn {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200;
}

.btn-outline {
    @apply border-red-600 text-red-600 bg-transparent hover:bg-red-50;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Custom form styles */
input[type="text"],
input[type="email"],
textarea {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm;
}

/* Responsive typography */
@screen sm {
    html {
        font-size: 16px;
    }
}

@screen lg {
    html {
        font-size: 17px;
    }
}

/* Custom animations */
.hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
}

/* Gradient text */
.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-pink-600;
}

/* Custom section padding */n.section-padding {
    @apply py-16 sm:py-20 lg:py-28;
}

/* Custom container */n.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Custom transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}