@layer base, components, utilities;

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

@layer base {
    html {
        @apply font-sans text-gray-900 bg-white;
    }
    body {
        @apply min-h-screen font-sans;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-bold;
    }
    a {
        @apply text-blue-600 hover:underline;
    }
}

@layer components {
    .card {
        @apply p-6 bg-white/80 hover:bg-white backdrop-blur-lg rounded-xl shadow-lg border border-gray-100 transition-all;
    }
    .button-primary {
        @apply px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300;
    }
}

@layer utilities {
    .bg-clip-text {
        background-clip: text;
    }
}