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

:root {
    --primary-color: #2563eb;
    --secondary-color: #7c3aed;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
}

.section-card {
    @apply bg-gray-50 p-6 rounded-lg border border-gray-200;
}

.section-header {
    @apply flex items-center text-xl font-semibold mb-6 text-gray-800;
}

.section-header i {
    @apply text-blue-600;
}

label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

textarea {
    @apply min-h-[100px];
}

.btn-primary {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

.alert-success {
    @apply p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg;
}

.alert-error {
    @apply p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-card {
        @apply p-4;
    }
}