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

:root {
    --bg-light: #f3f4f6;
    /* gray-100 */
    --bg-dark: #030712;
    /* gray-950 */
    --text-light: #111827;
    /* gray-900 */
    --text-dark: #f9fafb;
    /* gray-50 */
    --accent-color: #06b6d4;
    /* cyan-500 */
    --accent-hover: #0891b2;
    /* cyan-600 */
    --card-bg-light: #ffffff;
    --card-bg-dark: #1f2937;
    /* gray-800 */
    --border-light: #e5e7eb;
    /* gray-200 */
    --border-dark: #374151;
    /* gray-700 */
}

html.dark {
    color-scheme: dark;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nav-link {
    @apply font-medium text-gray-600 dark:text-gray-300 transition-colors duration-200;
}

.nav-link:hover {
    @apply text-cyan-500 dark:text-cyan-400;
}

.nav-link-active {
    @apply font-semibold text-cyan-500 dark:text-cyan-400;
}

.btn {
    @apply px-5 py-3 rounded-lg font-bold text-sm tracking-wide transition-all duration-300 transform focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900;
}

.btn-primary {
    @apply bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-500 shadow-lg shadow-cyan-500/20 hover:shadow-xl hover:shadow-cyan-500/30 hover:-translate-y-0.5;
}

.btn-secondary {
    @apply bg-gray-600/20 text-white hover:bg-gray-500/30 focus:ring-gray-400;
}

.section-title {
    @apply text-3xl md:text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white;
}

.section-subtitle {
    @apply mt-4 max-w-2xl mx-auto text-lg text-gray-500 dark:text-gray-400;
}

.card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 border border-transparent dark:border-gray-700/50 hover:border-cyan-500/50;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.form-input {
    @apply block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm;
}

.filter-btn {
    @apply px-4 py-2 text-sm font-semibold rounded-full transition-colors duration-200 border-2 border-transparent;
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200;
}

.filter-btn:hover {
    @apply bg-gray-300 dark:bg-gray-600;
}

.filter-btn.active {
    @apply bg-cyan-500 text-white border-cyan-600 dark:border-cyan-400;
}

.filter-btn.active:hover {
    @apply bg-cyan-600;
}

.skill-item {
    @apply flex items-center text-gray-700 dark:text-gray-300;
}

.skill-item::before {
    content: '';
    @apply h-2 w-2 mr-3 rounded-full bg-cyan-500;
}

.timeline-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up 0.6s ease-out forwards;
}

.timeline-item:nth-child(1) {
    animation-delay: 0.1s;
}

.timeline-item:nth-child(2) {
    animation-delay: 0.2s;
}

.timeline-item:nth-child(3) {
    animation-delay: 0.3s;
}

.timeline-item:nth-child(4) {
    animation-delay: 0.4s;
}


@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.card-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up 0.5s ease-out forwards;
}

.feature-card {
    @apply p-6 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:border-cyan-500/30 group;
}

.feature-card-icon {
    @apply p-3 rounded-lg bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 mb-4 inline-block group-hover:scale-110 transition-transform duration-300;
}

.feature-card-title {
    @apply font-bold text-gray-900 dark:text-white mb-1;
}

.feature-card-desc {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

/* New Project Card Styles */
.project-card-new {
    @apply relative rounded-xl overflow-hidden shadow-lg group h-64;
}

.project-card-bg {
    @apply absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110;
}

.project-card-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-80 transition-opacity duration-300;
}

.project-card-content {
    @apply absolute bottom-0 left-0 w-full p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300;
}

.project-card-tags {
    @apply flex flex-wrap gap-2 mb-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100;
}

.project-card-actions {
    @apply flex gap-3 mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200;
}

/* Contact Page Styles */
.glass-panel {
    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200 dark:border-gray-800 rounded-2xl shadow-xl;
}

.contact-icon-box {
    @apply flex items-center justify-center w-12 h-12 rounded-lg bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400 mb-4;
}

.contact-link {
    @apply flex items-center p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 hover:border-cyan-500/50 hover:shadow-md transition-all duration-300 group;
}