@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: "Geist", 'Inter', system-ui, sans-serif;
    }

    [class^="sun-"], [class^="sun-"] * {
        font-family: "Geist", Inter, system-ui, sans-serif!important;
    }
}

@layer components {
    .card-hover {
        @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5;
    }
}

@layer utilities {
    .scrollbar-thin {
        scrollbar-width: thin;
    }

    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        @apply bg-gray-100 rounded;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded hover:bg-gray-400;
    }
}