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

* {
    font-family: 'Inter', sans-serif;
}

/* Skill Cards */
.skill-card {
    @apply bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col items-center text-center;
}

.skill-card i {
    @apply w-12 h-12 mb-4 p-3 rounded-full bg-primary-50 dark:bg-gray-600;
}

.skill-card h3 {
    @apply text-lg font-semibold text-gray-800 dark:text-white mb-1;
}

/* Experience Cards */
.experience-card {
    @apply bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm;
}

.experience-header {
    @apply flex flex-col md:flex-row md:justify-between md:items-center mb-4;
}

.experience-header h3 {
    @apply text-xl font-semibold text-gray-800 dark:text-white;
}

.experience-details {
    @apply space-y-2;
}

.experience-details li {
    @apply text-gray-600 dark:text-gray-300 flex items-start;
}

.experience-details li::before {
    content: "•";
    @apply text-secondary-500 mr-2;
}

/* Project Cards */
.project-card {
    @apply bg-white dark:bg-gray-700 rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-all;
}

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

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

.project-content h3 {
    @apply text-xl font-semibold text-gray-800 dark:text-white mb-2;
}

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

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

.project-link {
    @apply text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium flex items-center gap-1 transition-colors;
}

/* Contact Cards */
.contact-card {
    @apply bg-white dark:bg-gray-700 p-4 rounded-lg shadow-sm flex items-center gap-4 hover:shadow-md transition-all;
}

.contact-card i {
    @apply w-10 h-10 p-2 rounded-full bg-primary-50 dark:bg-gray-600;
}

.contact-card span {
    @apply text-gray-700 dark:text-gray-300;
}

/* Form Inputs */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition;
}

/* Dark mode transitions */
html {
    @apply transition-colors duration-300;
}

/* Accessibility focus styles */
a:focus, button:focus, input:focus, textarea:focus {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
}