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

@layer base {
    body {
        @apply bg-parchment text-ink antialiased;
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center gap-2 rounded-md bg-forest-700 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-forest-800 focus:outline-none focus:ring-2 focus:ring-mustard-400 focus:ring-offset-2;
    }
    .btn-secondary {
        @apply inline-flex items-center gap-2 rounded-md border border-forest-200 bg-white px-4 py-2 text-sm font-semibold text-forest-700 shadow-sm transition hover:bg-forest-50 focus:outline-none focus:ring-2 focus:ring-mustard-400 focus:ring-offset-2;
    }
    .card {
        @apply rounded-xl border border-forest-100 bg-white shadow-sm;
    }
    .field-label {
        @apply block text-sm font-medium text-soil-500 mb-1;
    }
    .field-input {
        @apply block w-full rounded-md border-forest-200 shadow-sm focus:border-forest-500 focus:ring-forest-500 sm:text-sm;
    }
    .badge {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
    }
}

/* Signature growth animation used on the landing page hero */
@keyframes sprout-grow {
    0% { stroke-dashoffset: 340; opacity: 0; }
    15% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
.sprout-path {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: sprout-grow 2.6s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
    .sprout-path { animation: none; stroke-dashoffset: 0; }
}