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

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

:root {
    --light-bg: #f8f9fa; 
    --light-card: #ffffff;
    --light-text: #1f2937;
    --dark-bg: #000000;
    --dark-card: #111111;
    --dark-card-heavy: #181818;
    --dark-text: #f9fafb;
}

.bg-light-bg { background-color: var(--light-bg); }
.bg-light-card { background-color: var(--light-card); }
.text-light-text { color: var(--light-text); }

.dark .dark\:bg-dark-bg { background-color: var(--dark-bg); }
.dark .dark\:bg-dark-card { background-color: var(--dark-card); }
.dark .dark\:bg-dark-card-heavy { background-color: var(--dark-card-heavy); }
.dark .dark\:text-dark-text { color: var(--dark-text); }

body {
    font-family: 'Inter', sans-serif;
    background-image: radial-gradient(circle at top right, rgba(239, 68, 68, 0.05), transparent 40%), 
                      radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.05), transparent 50%);
}

.dark body {
    background-image: radial-gradient(circle at top right, rgba(239, 68, 68, 0.1), transparent 40%), 
                      radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.1), transparent 50%);
}

/* Hide scrollbar */
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.nav-link {
    @apply font-semibold text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-500 transition-colors duration-200 relative;
}

.nav-link.active {
    @apply text-red-500;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ef4444;
    transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dark .navbar-scrolled {
    background-color: rgba(17, 17, 17, 0.8);
}

.card {
    @apply bg-light-card dark:bg-dark-card rounded-2xl shadow-lg transition-all duration-300;
}

.code-block {
    @apply bg-gray-100 dark:bg-dark-card-heavy p-4 rounded-lg text-sm font-mono overflow-x-auto;
}