@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Plus Jakarta Sans', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    
    /* Sleek e-commerce color palettes matching vibrant & luxury branding */
    --color-brand-indigo: #4f46e5;
    --color-brand-violet: #7c3aed;
    --color-brand-accent: #f43f5e;
}

/* Custom Scrollbars - Desktop Only */
@media (min-width: 1024px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(156, 163, 175, 0.4);
        border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(156, 163, 175, 0.6);
    }
}

/* Glassmorphism utility classes */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass-nav {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Toast Animations */
.toast-enter {
    animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-leave {
    animation: toast-slide-out 0.2s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes toast-slide-in {
    from {
        transform: translateY(1rem) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateY(0.5rem) scale(0.95);
        opacity: 0;
    }
}

/* Skeleton Loading Helpers */
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.dark .skeleton {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Prevent layout shifts with x-cloak */
[x-cloak] {
    display: none !important;
}

/* Restore global cursor-pointer for active buttons */
button:not([disabled]),
[role="button"]:not([disabled]) {
    cursor: pointer;
}