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

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

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
}

.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border-color: #334155;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
    }
    
    .btn-secondary {
        @apply px-6 py-3 bg-white dark:bg-slate-800 text-indigo-600 dark:text-indigo-400 font-semibold rounded-xl border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300;
    }
    
    .card {
        @apply bg-white dark:bg-slate-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200 dark:border-slate-700;
    }
    
    .input-field {
        @apply w-full px-4 py-3 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-transparent transition-all duration-300 outline-none;
    }
    
    .section-title {
        @apply text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4;
    }
    
    .section-subtitle {
        @apply text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto;
    }
    
    .gradient-text {
        @apply bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent;
    }
    
    .glass-card {
        @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg rounded-2xl border border-white/20 dark:border-slate-700/50 shadow-xl;
    }
    
    .nav-link {
        @apply text-slate-600 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200;
    }
    
    .feature-icon {
        @apply w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center text-white text-xl mb-4;
    }
}

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

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

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

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.6);
    }
}

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

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

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

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

/* Progress Bar */
.progress-bar {
    @apply h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden;
}

.progress-fill {
    @apply h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-500;
}

/* AI Score Display */
.ai-score {
    @apply relative w-40 h-40 mx-auto;
}

.ai-score-circle {
    @apply transform -rotate-90;
}

.ai-score-circle-bg {
    @apply stroke-slate-200 dark:stroke-slate-700;
}

.ai-score-circle-fill {
    @apply stroke-indigo-500 transition-all duration-1000;
}

/* Highlighted Text */
.ai-highlight {
    @apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 px-1 rounded;
}

.human-highlight {
    @apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-1 rounded;
}

/* Cookie Banner */
.cookie-banner {
    @apply fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 shadow-2xl border-t border-slate-200 dark:border-slate-700 p-6 z-50 transform translate-y-full transition-transform duration-500;
}

.cookie-banner.show {
    @apply translate-y-0;
}

/* Toast Notifications */
.toast {
    @apply fixed top-4 right-4 bg-white dark:bg-slate-800 shadow-xl rounded-xl p-4 flex items-center gap-3 transform translate-x-full transition-transform duration-300 z-50;
}

.toast.show {
    @apply translate-x-0;
}

.toast-success {
    @apply border-l-4 border-green-500;
}

.toast-error {
    @apply border-l-4 border-red-500;
}

/* Mobile Menu */
.mobile-menu {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40 transform translate-x-full transition-transform duration-300;
}

.mobile-menu.show {
    @apply translate-x-0;
}

/* FAQ Accordion */
.faq-item {
    @apply border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden mb-4;
}

.faq-question {
    @apply w-full px-6 py-4 bg-white dark:bg-slate-800 text-left font-semibold text-slate-900 dark:text-white flex items-center justify-between hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors;
}

.faq-answer {
    @apply px-6 py-4 bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-400 hidden;
}

.faq-item.active .faq-answer {
    @apply block;
}

/* File Upload */
.file-upload {
    @apply border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-2xl p-8 text-center cursor-pointer hover:border-indigo-500 dark:hover:border-indigo-400 transition-colors;
}

.file-upload.dragover {
    @apply border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20;
}

/* Testimonial Card */
.testimonial-card {
    @apply bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg border border-slate-200 dark:border-slate-700;
}

/* Blog Article Styles */
.prose-ai h1 {
    @apply text-3xl font-bold text-slate-900 dark:text-white mb-6 mt-8;
}

.prose-ai h2 {
    @apply text-2xl font-bold text-slate-900 dark:text-white mb-4 mt-8;
}

.prose-ai h3 {
    @apply text-xl font-semibold text-slate-900 dark:text-white mb-3 mt-6;
}

.prose-ai p {
    @apply text-slate-600 dark:text-slate-300 mb-4 leading-relaxed;
}

.prose-ai ul {
    @apply list-disc list-inside text-slate-600 dark:text-slate-300 mb-4 space-y-2;
}

.prose-ai ol {
    @apply list-decimal list-inside text-slate-600 dark:text-slate-300 mb-4 space-y-2;
}

.prose-ai blockquote {
    @apply border-l-4 border-indigo-500 pl-4 italic text-slate-500 dark:text-slate-400 my-6;
}

.prose-ai a {
    @apply text-indigo-600 dark:text-indigo-400 hover:underline;
}

/* Focus States */
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
    @apply outline-none ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-slate-900;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
}