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

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    ::selection {
        background-color: rgba(99, 102, 241, 0.2);
        color: inherit;
    }
}

@layer components {
    .gradient-btn {
        @apply inline-flex items-center px-6 py-3 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 text-white font-semibold rounded-2xl hover:from-indigo-700 hover:via-purple-700 hover:to-pink-600 transition-all duration-300 shadow-xl shadow-indigo-500/25 hover:shadow-2xl hover:shadow-indigo-500/30 hover:-translate-y-0.5 active:translate-y-0;
    }
    .gradient-btn-sm {
        @apply inline-flex items-center px-4 py-2 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 text-white text-sm font-semibold rounded-xl hover:from-indigo-700 hover:via-purple-700 hover:to-pink-600 transition-all duration-300 shadow-lg shadow-indigo-500/20 hover:shadow-xl hover:-translate-y-0.5;
    }
    .card {
        @apply bg-white dark:bg-gray-800/80 rounded-2xl border border-gray-100 dark:border-gray-700/50 shadow-sm backdrop-blur-sm;
    }
    .card-hover {
        @apply card hover:shadow-xl dark:hover:shadow-gray-900/50 hover:border-gray-200 dark:hover:border-gray-600 hover:-translate-y-1 transition-all duration-300;
    }
    .input-field {
        @apply w-full rounded-xl border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-gray-100 shadow-sm focus:border-indigo-400 dark:focus:border-indigo-500 focus:ring focus:ring-indigo-200/50 dark:focus:ring-indigo-800/50 focus:ring-opacity-50 transition-all duration-200;
    }
    .badge-green {
        @apply text-xs font-semibold text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 px-3 py-1 rounded-full border border-green-100 dark:border-green-800/50;
    }
    .badge-gray {
        @apply text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700/50 px-3 py-1 rounded-full border border-gray-200 dark:border-gray-600/50;
    }
    .badge-amber {
        @apply text-xs font-semibold text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/50 px-3 py-1 rounded-full border border-amber-100 dark:border-amber-800/50;
    }
    .glass {
        @apply bg-white/70 dark:bg-gray-800/70 backdrop-blur-xl border border-white/20 dark:border-gray-700/30;
    }
    .glass-card {
        @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl rounded-2xl border border-white/30 dark:border-gray-700/40 shadow-xl shadow-gray-900/5;
    }
    .glow-indigo {
        box-shadow: 0 0 40px -10px rgba(99, 102, 241, 0.3);
    }
    .glow-purple {
        box-shadow: 0 0 40px -10px rgba(168, 85, 247, 0.3);
    }
    .section-gradient {
        @apply bg-gradient-to-br from-indigo-50/80 via-white to-purple-50/80 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900;
    }
}

@layer 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;
    }
    .text-gradient {
        @apply bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 bg-clip-text text-transparent;
    }
    .bg-mesh {
        background-image: radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
                          radial-gradient(at 80% 0%, rgba(168, 85, 247, 0.08) 0px, transparent 50%),
                          radial-gradient(at 0% 50%, rgba(236, 72, 153, 0.05) 0px, transparent 50%);
    }
    .dark .bg-mesh {
        background-image: radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
                          radial-gradient(at 80% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
                          radial-gradient(at 0% 50%, rgba(236, 72, 153, 0.1) 0px, transparent 50%);
    }
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    .animate-float-delayed {
        animation: float 6s ease-in-out 2s infinite;
    }
    .animate-glow {
        animation: glow 3s ease-in-out infinite alternate;
    }
}

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

@keyframes glow {
    from { box-shadow: 0 0 20px -5px rgba(99, 102, 241, 0.2); }
    to { box-shadow: 0 0 40px -5px rgba(168, 85, 247, 0.3); }
}

/* Tailwind config additions via inline */
@layer utilities {
    .animate-fade-in {
        animation: fadeIn 0.6s ease-out both;
    }
    .animate-slide-up {
        animation: slideUp 0.6s ease-out both;
    }
    .animate-slide-down {
        animation: slideDown 0.4s ease-out both;
    }
    .animate-scale-in {
        animation: scaleIn 0.3s ease-out both;
    }
}

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

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}
.dark ::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(75, 85, 99, 0.7);
}

/* Prose enhancements for blog posts */
.prose {
    --tw-prose-links: theme('colors.indigo.600');
}
.dark .prose {
    --tw-prose-links: theme('colors.indigo.400');
}
.prose img {
    @apply rounded-xl shadow-lg my-8;
}
.prose blockquote {
    @apply border-l-4 border-indigo-400 bg-indigo-50/50 dark:bg-indigo-900/20 rounded-r-xl py-1 px-6 my-6;
}
.prose code {
    @apply bg-gray-100 dark:bg-gray-700/50 text-indigo-600 dark:text-indigo-400 px-1.5 py-0.5 rounded-lg text-sm font-medium;
}
.prose pre code {
    @apply bg-transparent text-inherit px-0 py-0 rounded-none;
}
.prose pre {
    @apply bg-gray-900 dark:bg-gray-950 rounded-2xl p-6 my-8 overflow-x-auto shadow-xl border border-gray-800;
}
.prose a {
    @apply no-underline font-medium;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
    @apply font-extrabold tracking-tight;
}
.prose p {
    @apply leading-relaxed;
}
.prose ul, .prose ol {
    @apply leading-relaxed;
}
.prose li {
    @apply my-1;
}

/* Trix editor */
trix-toolbar {
    @apply rounded-t-2xl border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-3;
}
trix-toolbar .trix-button-group {
    @apply border-gray-200 dark:border-gray-600;
}
trix-toolbar .trix-button {
    @apply border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors;
}
trix-editor {
    @apply rounded-b-2xl border border-t-0 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-[300px] p-6;
}
trix-editor:focus {
    @apply border-indigo-300 dark:border-indigo-500 ring-2 ring-indigo-100 dark:ring-indigo-900/50;
}