:root {
    --navy-900: #0a192f;
    --navy-800: #112240;
    --navy-700: #233554;
    --cyan-400: #64ffda;
    --cyan-500: #52d1b2;
    --slate-300: #ccd6f6;
    --slate-400: #a8b2d1;
    --slate-600: #8892b0;
}

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

/* Base Styles */
body {
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

/* Buttons */
.btn-primary {
    @apply bg-cyan-400 text-navy-900 px-6 py-3 rounded-md font-medium transition-all duration-300 hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-400/30;
}

.btn-secondary {
    @apply border-2 border-cyan-400 text-cyan-400 px-6 py-3 rounded-md font-medium transition-all duration-300 hover:bg-navy-700 hover:bg-opacity-50 hover:shadow-lg hover:shadow-cyan-400/20;
}

/* Cards */
.about-card {
    @apply bg-navy-800 bg-opacity-50 p-8 rounded-lg backdrop-blur-sm border border-navy-700 hover:border-cyan-400 transition-all duration-300;
}

.skill-card {
    @apply bg-navy-800 bg-opacity-50 p-4 rounded-lg border border-navy-700 flex flex-col items-center gap-3 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-400/20 transition-all duration-300;
}

.skill-bar {
    @apply w-full h-2 bg-navy-700 rounded-full overflow-hidden;
}

.skill-level {
    @apply h-full bg-cyan-400 rounded-full;
}

.project-card {
    @apply bg-navy-800 bg-opacity-50 rounded-lg overflow-hidden border border-navy-700 transition-all duration-300 hover:border-cyan-400 hover:translate-y-[-5px] hover:shadow-lg hover:shadow-cyan-400/10;
}

.project-image {
    @apply h-48 overflow-hidden;
}

.project-image img {
    @apply w-full h-full object-cover transition-transform duration-500 hover:scale-110;
}

.project-content {
    @apply p-6;
}

.project-content h3 {
    @apply text-xl font-semibold mb-2;
}

.project-content p {
    @apply text-slate-400 mb-4;
}

.project-tech {
    @apply flex gap-2 flex-wrap;
}

.project-tech span {
    @apply text-xs bg-navy-700 px-2 py-1 rounded;
}

/* Form Styles */
.form-group {
    @apply space-y-2;
}

.form-group label {
    @apply block text-slate-300;
}

.form-group input,
.form-group textarea {
    @apply w-full bg-navy-700 bg-opacity-50 border border-navy-600 rounded p-3 text-white focus:outline-none focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400 transition;
}

/* Social Icons */
.social-icon {
    @apply w-12 h-12 rounded-full border border-slate-600 flex items-center justify-center text-slate-300 hover:text-cyan-400 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-400/20 transition;
}

/* Timeline Items */
.timeline-item {
    @apply relative pl-6 before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:rounded-full before:bg-cyan-400;
}

/* Modal */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
}

.modal.show {
    @apply opacity-100 pointer-events-auto;
}

.modal-content {
    @apply bg-navy-800 rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto relative;
}

.modal-close {
    @apply absolute top-4 right-4 text-2xl cursor-pointer hover:text-cyan-400;
}

/* Animations */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(100, 255, 218, 0.8);
    }
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-content {
        @apply text-center;
    }
    
    .hero-content .flex {
        @apply justify-center;
    }
}