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

@layer base {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Custom focus styles */
    *:focus-visible {
        outline: 2px solid theme('colors.primary.500');
        outline-offset: 2px;
    }
}

@layer components {
    /* Prose custom styles for better text rendering */
    .prose {
        @apply text-slate-700 leading-relaxed;
    }

    /* Line clamp utilities */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@layer utilities {
    /* Custom animations */
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in;
    }

    .animate-slide-up {
        animation: slideUp 0.5s ease-out;
    }

    .animate-slide-down {
        animation: slideDown 0.5s ease-out;
    }

    /* Custom scroll snap */
    .snap-x {
        scroll-snap-type: x mandatory;
    }

    .snap-start {
        scroll-snap-align: start;
    }

    /* Custom gradients */
    .gradient-primary {
        background: linear-gradient(135deg, theme('colors.primary.600') 0%, theme('colors.primary.800') 100%);
    }

    .gradient-overlay {
        background: linear-gradient(to right, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.7));
    }
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}