/* Explain: App-specific component classes (add as needed) */
.btn-primary {
    @apply inline-flex items-center justify-center rounded-lg bg-[var(--primary-color)] px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-[var(--primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] focus:ring-offset-2;
}
.btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg bg-white px-6 py-3 text-sm font-medium text-[var(--text-color)] border border-[var(--border-color)] shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] focus:ring-offset-2;
}
.card {
    @apply overflow-hidden rounded-xl bg-[var(--surface-color)] shadow-sm border border-[var(--border-color)] transition-shadow hover:shadow-md;
}