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

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

@layer base {
    body {
        @apply bg-dark-bg text-gray-100 font-sans antialiased;
    }
}

@layer components {
    .card {
        @apply bg-dark-card rounded-xl border border-dark-border p-6 shadow-lg;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-semibold py-2.5 px-6 rounded-lg hover:opacity-90 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-primary/25;
    }

    .btn-secondary {
        @apply bg-dark-hover text-gray-200 font-medium py-2.5 px-6 rounded-lg border border-dark-border hover:bg-gray-600 transition-all duration-200;
    }

    .input-field {
        @apply w-full bg-dark-bg border border-dark-border rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-primary/50 focus:border-brand-primary placeholder-gray-500 transition-all duration-200;
    }

    .stat-card {
        @apply card flex flex-col items-center justify-center text-center min-h-[100px];
    }

    .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg text-gray-400 hover:text-white hover:bg-dark-hover transition-all duration-200;
    }

    .sidebar-link.active {
        @apply text-white bg-brand-primary/20 border-l-2 border-brand-primary;
    }
}

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

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }
}

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