/**
 * Career Expert Institute - UI Component System
 * High-fidelity Tailwind extensions and custom component patterns.
 */

/* --- Advanced Button System --- */
.btn {
    @apply relative overflow-hidden inline-flex items-center justify-center font-bold px-8 py-4 rounded-radius-main transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
    border-radius: var(--radius-main);
}

.btn-primary {
    @apply bg-primary text-white shadow-lg shadow-primary/30 hover:shadow-xl hover:shadow-primary/40 hover:-translate-y-1;
    background-color: var(--color-primary);
}

.btn-secondary {
    @apply bg-secondary text-white shadow-lg shadow-secondary/30 hover:shadow-xl hover:shadow-secondary/40 hover:-translate-y-1;
    background-color: var(--color-secondary);
}

.btn-outline {
    @apply border-2 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-800;
}

.btn-glass {
    @apply glass text-slate-800 dark:text-white shadow-sm hover:bg-white/40 dark:hover:bg-slate-800/40;
}

/* --- High-End Card Architecture --- */
.card {
    @apply bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-radius-main shadow-sm transition-all hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-none;
    border-radius: var(--radius-main);
}

.card-interactive {
    @apply cursor-pointer hover:-translate-y-2;
}

/* --- Form Intelligence --- */
.input-field {
    @apply w-full bg-slate-50 dark:bg-slate-800 border-none rounded-radius-main px-6 py-4 text-sm font-medium focus:ring-2 focus:ring-primary/20 shadow-inner transition-all;
    border-radius: var(--radius-main);
}

.input-label {
    @apply text-[10px] font-black uppercase tracking-widest text-slate-400 block mb-3 pl-2;
}

/* --- Badge & Status Tokens --- */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest;
}

.badge-success {
    @apply bg-emerald-100 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400;
}

.badge-warning {
    @apply bg-amber-100 text-amber-600 dark:bg-amber-950/30 dark:text-amber-400;
}

.badge-error {
    @apply bg-rose-100 text-rose-600 dark:bg-rose-950/30 dark:text-rose-400;
}

/* --- Reveal Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-slow);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

/* --- Custom Scrollbar for Luxury Aesthetics --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Gold Shimmer Effect */
.shimmer-gold {
    position: relative;
    overflow: hidden;
}

.shimmer-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 215, 0, 0.2),
            transparent);
    transition: 0.5s;
}

.shimmer-gold:hover::before {
    left: 100%;
}