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

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

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

.font-display {
    font-family: 'Archivo Black', sans-serif;
}

@layer components {
    .nav-container {
        @apply bg-sky-950 text-white;
    }

    .card {
        @apply bg-white rounded-3xl shadow-lg border-2 border-sky-800 p-6;
    }

    .button-primary {
        @apply bg-sky-800 text-white font-bold py-3 px-6 rounded-2xl hover:bg-sky-700 cursor-pointer transition-colors border-4 border-sky-950;
    }

    .button-secondary {
        @apply bg-white text-sky-950 border-2 border-sky-800 font-bold py-3 px-6 rounded-2xl hover:bg-gray-50 transition-colors;
    }

    .form-label {
        @apply block text-sm font-medium text-sky-950 mb-2
    }

    .input-field {
        @apply w-full px-4 py-3 border-2 border-sky-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent;
    }
}