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

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Dark mode toggle transition */
html, body {
    transition: background-color 0.3s, color 0.3s;
}

/* Skill Card Styles */
.skill-card {
    @apply bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 text-center;
}

.skill-card h3 {
    @apply text-lg font-semibold mt-4 mb-2;
}

.skill-card p {
    @apply text-gray-600 dark:text-gray-400 text-sm;
}

.skill-card i {
    @apply w-12 h-12 p-3 bg-primary bg-opacity-10 rounded-full mx-auto;
}

/* Project Card Styles */
.project-card {
    @apply bg-white dark:bg-dark-800 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300;
}

.project-image {
    @apply w-full h-48 object-cover;
}

.tech-tag {
    @apply text-xs bg-gray-100 dark:bg-dark-700 px-3 py-1 rounded-full;
}

.project-link {
    @apply text-primary hover:text-opacity-80 transition flex items-center gap-1;
}

/* Social Icon Styles */
.social-icon {
    @apply w-10 h-10 flex items-center justify-center rounded-full bg-white dark:bg-dark-700 shadow hover:bg-primary hover:text-white transition;
}

/* Navbar active link */
.nav-link.active {
    @apply text-primary font-medium;
}

/* Smooth scroll offset for fixed navbar */
section {
    scroll-margin-top: 80px;
}

/* Animation classes */
.animate-in {
    animation: fadeIn 0.5s ease-in-out;
}

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

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

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-dark-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-opacity-80;
}