@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

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

@theme {
    --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Custom scrollbar and smooth transitions */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar to match Centsible's minimalist zinc + rose theme */
:root {
    --scrollbar-thumb: #d4d4d8; /* zinc-300 */
    --scrollbar-thumb-hover: #f43f5e; /* rose-500 */
    --scrollbar-track: transparent;
}

@media (prefers-color-scheme: dark) {
    :root {
        --scrollbar-thumb: #3f3f46; /* zinc-700 */
        --scrollbar-thumb-hover: #fb7185; /* rose-400 */
        --scrollbar-track: transparent;
    }
}

.dark {
    --scrollbar-thumb: #3f3f46;
    --scrollbar-thumb-hover: #fb7185;
    --scrollbar-track: transparent;
}

/* Global scrollbar styling for standard and webkit browsers */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
}

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

::-webkit-scrollbar-corner {
    background: transparent;
}

[x-cloak] {
    display: none !important;
}