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

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

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply antialiased;
    }

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

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

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

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

@layer components {
    /* Button Base Styles */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm hover:shadow-md;
    }

    .btn-secondary {
        @apply btn bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500;
    }

    .btn-success {
        @apply btn bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
    }

    .btn-danger {
        @apply btn bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
    }

    .btn-outline {
        @apply btn border-2 border-secondary-300 text-secondary-700 hover:bg-secondary-50 focus:ring-secondary-500;
    }

    /* Card Styles */
    .card {
        @apply bg-white rounded-xl shadow-soft border border-secondary-100 p-6;
    }

    .card-hover {
        @apply card transition-all duration-300 hover:shadow-medium hover:-translate-y-1;
    }

    /* Input Styles */
    .input {
        @apply block w-full rounded-lg border-secondary-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-colors duration-200;
    }

    .input-error {
        @apply input border-danger-500 focus:border-danger-500 focus:ring-danger-500;
    }

    /* Badge Styles */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
    }

    .badge-primary {
        @apply badge bg-primary-100 text-primary-800;
    }

    .badge-success {
        @apply badge bg-success-100 text-success-800;
    }

    .badge-warning {
        @apply badge bg-warning-100 text-warning-800;
    }

    .badge-danger {
        @apply badge bg-danger-100 text-danger-800;
    }

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

    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
    }

    /* Section Spacing */
    .section {
        @apply py-16 md:py-24;
    }
}

@layer utilities {
    /* Animation utilities */
    .animate-on-scroll {
        @apply opacity-0 translate-y-4 transition-all duration-700;
    }

    .animate-on-scroll.is-visible {
        @apply opacity-100 translate-y-0;
    }

    /* Text utilities */
    .text-balance {
        text-wrap: balance;
    }

    /* Backdrop blur utilities */
    .glass {
        @apply bg-white/80 backdrop-blur-md;
    }

    .glass-dark {
        @apply bg-secondary-900/80 backdrop-blur-md;
    }

    /* Custom animations */
    @keyframes blob {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        25% {
            transform: translate(20px, -50px) scale(1.1);
        }
        50% {
            transform: translate(-20px, 20px) scale(0.9);
        }
        75% {
            transform: translate(50px, 50px) scale(1.05);
        }
    }

    @keyframes slow-bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    .animate-blob {
        animation: blob 20s infinite;
    }

    .animate-blob-slow {
        animation: blob 25s infinite;
    }

    .animate-slow-bounce {
        animation: slow-bounce 3s ease-in-out infinite;
    }

    .animation-delay-2000 {
        animation-delay: 2s;
    }

    .animation-delay-4000 {
        animation-delay: 4s;
    }
}