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

@layer base {
    html {
        font-family: 'Inter', -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body {
        @apply bg-white text-slate-900;
        margin: 0;
    }
}

@layer components {
    .container-x {
        @apply mx-auto px-6 md:px-8 lg:px-12 max-w-6xl;
    }

    .btn-primary {
        @apply inline-flex items-center gap-2 bg-brand-800 hover:bg-brand-700
               text-white font-medium px-6 py-3 rounded-xl transition-colors;
    }

    .btn-secondary {
        @apply inline-flex items-center gap-2 bg-white border border-slate-200
               hover:border-slate-300 text-brand-900 font-medium px-6 py-3 rounded-xl
               transition-colors;
    }
}