@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
    font-family: 'Rubik', sans-serif;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 20px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.1s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

[v-cloak] {
    display: none;
}

/* Theme Colors */
.text-theme-primary {
    color: #4f46e5; /* indigo-600 */
}
.bg-theme-primary {
    background-color: #4f46e5; /* indigo-600 */
}
.bg-theme-auxiliary-light {
    background-color: #eef2ff; /* indigo-50 */
}
.hover\:bg-theme-auxiliary-light:hover {
    background-color: #eef2ff; /* indigo-50 */
}
.hover\:text-theme-primary:hover {
    color: #4f46e5; /* indigo-600 */
}