@layer components {
    /* Global scrollbar styles */
    * {
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: rgba(87, 66, 41, 0.8) transparent; /* Transparent track, default scrollbar thumb */
    }

    /* Webkit Browsers (Chrome, Safari, Edge) */
    *::-webkit-scrollbar {
        width: 8px; /* Thin scrollbar */
    }

    *::-webkit-scrollbar-track {
        background: transparent; /* Fully transparent track */
    }

    *::-webkit-scrollbar-thumb {
        @apply bg-primary-500 dark:bg-primary-600 hover:bg-primary-600 dark:hover:bg-primary-800;;
        border-radius: 6px; /* Rounded scrollbar */
    }
}