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

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply bg-neutral-50 text-neutral-900;
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center rounded-md bg-verde-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-verde-700 focus:outline-none focus:ring-2 focus:ring-verde-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center rounded-md border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-verde-500 focus:ring-offset-2;
    }

    .form-input {
        @apply block w-full rounded-md border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 shadow-sm transition placeholder:text-neutral-400 focus:border-verde-500 focus:outline-none focus:ring-1 focus:ring-verde-500;
    }

    .form-label {
        @apply mb-1.5 block text-sm font-medium text-neutral-700;
    }
}