:root {
    --primary-color: #1E40AF;  /* Deep Mediterranean Blue */
    --secondary-color: #4F46E5; /* AI-inspired Purple */
    --accent-color: #10B981;   /* Fresh Mint */
    --bg-color: #F8FAFC;       /* Light Background */
    --text-color: #1F2937;     /* Dark Text */
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
}

/* Navigation Styles */
.nav-link {
    @apply px-3 py-2 text-sm font-medium text-gray-700 hover:text-[#1B4965] transition-colors;
}

.mobile-nav-link {
    @apply block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#1B4965] hover:bg-[#CAE9FF];
}

/* Animations */
.fade-enter {
    opacity: 0;
    transform: translateY(20px);
}

.fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Custom Components */
.card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300 border border-[#CAE9FF];
}

.btn-primary {
    @apply bg-[#1B4965] text-white px-6 py-2 rounded-md hover:bg-[#62B6CB] transition-colors;
}

.section-title {
    @apply text-3xl font-bold text-[#1B4965] mb-6;
}

.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-[#1B4965] to-[#62B6CB];
}

/* Skill Tags */
.skill-tag {
    @apply inline-block bg-[#CAE9FF] text-[#1B4965] px-3 py-1 rounded-full text-sm font-medium mr-2 mb-2;
}

/* Project Cards */
.project-card {
    @apply bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 border border-[#CAE9FF];
}

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

/* Contact Form */
.form-input {
    @apply mt-1 block w-full rounded-md border-[#CAE9FF] shadow-sm focus:border-[#62B6CB] focus:ring-[#62B6CB];
}

/* Responsive Design */
@media (max-width: 640px) {
    .section-title {
        @apply text-2xl;
    }
}