/**
 * Shadcn/UI-inspired Components using Tailwind CSS
 * Premium, accessible components without React
 */

/* Shadcn Button Styles */
.shadcn-btn {
    @apply inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50;
    @apply px-4 py-2;
}

.shadcn-btn-primary {
    @apply bg-primary-500 text-white hover:bg-primary-600;
    @apply focus-visible:ring-primary-500;
}

.shadcn-btn-secondary {
    @apply bg-secondary-500 text-white hover:bg-secondary-600;
    @apply focus-visible:ring-secondary-500;
}

.shadcn-btn-outline {
    @apply border-2 border-gray-300 bg-transparent hover:bg-gray-100;
    @apply focus-visible:ring-gray-500;
}

/* Shadcn Card Styles */
.shadcn-card {
    @apply rounded-xl border border-gray-200 bg-white shadow-lg;
}

.shadcn-card-header {
    @apply flex flex-col space-y-1.5 p-6;
}

.shadcn-card-title {
    @apply text-2xl font-semibold leading-none tracking-tight text-black;
}

.shadcn-card-content {
    @apply p-6 pt-0;
}

.shadcn-card-footer {
    @apply flex items-center p-6 pt-0;
}

/* Shadcn Input Styles */
.shadcn-input {
    @apply flex h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2;
    @apply text-sm text-black placeholder:text-gray-500;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
}

/* Shadcn Badge Styles */
.shadcn-badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
    @apply transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.shadcn-badge-primary {
    @apply bg-primary-100 text-primary-800 border border-primary-200;
}

.shadcn-badge-secondary {
    @apply bg-secondary-100 text-secondary-800 border border-secondary-200;
}