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

/* ... */

body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

@layer base {
    :root {
        --radius: 0.5rem;

        --sidebar-background: 0 0% 98%;

        --sidebar-foreground: 240 5.3% 26.1%;

        --sidebar-primary: 240 5.9% 10%;

        --sidebar-primary-foreground: 0 0% 98%;

        --sidebar-accent: 240 4.8% 95.9%;

        --sidebar-accent-foreground: 240 5.9% 10%;

        --sidebar-border: 220 13% 91%;

        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
        --sidebar-background: 240 5.9% 10%;

        --sidebar-foreground: 240 4.8% 95.9%;

        --sidebar-primary: 224.3 76.3% 48%;

        --sidebar-primary-foreground: 0 0% 100%;

        --sidebar-accent: 240 3.7% 15.9%;

        --sidebar-accent-foreground: 240 4.8% 95.9%;

        --sidebar-border: 240 3.7% 15.9%;

        --sidebar-ring: 217.2 91.2% 59.8%;
    }
}

@layer base {
    :root {
        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 240 5.9% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 240 4.8% 95.9%;
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
        --sidebar-background: 240 5.9% 10%;
        --sidebar-foreground: 240 4.8% 95.9%;
        --sidebar-primary: 224.3 76.3% 48%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 240 3.7% 15.9%;
        --sidebar-accent-foreground: 240 4.8% 95.9%;
        --sidebar-border: 240 3.7% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
}

@layer base {
    :root {
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
    }

    .dark {
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
    }
}

@layer components {
    .input-neo {
        @apply bg-white border-2 border-black rounded-base px-3 py-2 focus:outline-none focus:outline-blue-300 mt-1;
    }

    .explore-nav {
        @apply px-5 py-0.5 font-publicSans font-semibold;
    }

    .validation-error {
        @apply text-[#ff5a5a] text-sm;
    }
}

@layer utilities {

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}