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

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;

    --foreground: 0 100% 100%;
    --foreground-faded: 0 0% 49%;
    --accent: 26 100% 50%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}

body {
    font-family: 'Inter', sans-serif;
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(to bottom,
            transparent,
            rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

.link {
    @apply text-foreground hover:text-accent transition-colors;
}

/* width */
::-webkit-scrollbar {
    @apply w-[5px];
}

/* Track */
::-webkit-scrollbar-track {
    @apply bg-transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    @apply bg-foreground-faded/80 rounded-xl transition-all;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    @apply bg-foreground-faded;
}