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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes textgradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: -200% 0%;
    }
}

:root {
    /* COLORS */
    --text-50: #e4e4e7;
    --text-100: #d4d4d8;
    --text-200: #a1a1aa;
    --text-300: #71717a;
    --text-400: #52525b;
    --text-500: #3f3f46;
    --text-600: #2e2e34;
    --text-700: #1f1f24;
    --text-800: #18181b;
    --text-900: #101010;
    --text-950: #0a0a0a;

    --background-50: #f4f4f5;
    --background-100: #e4e4e7;
    --background-200: #d4d4d8;
    --background-300: #a1a1aa;
    --background-400: #71717a;
    --background-500: #52525b;
    --background-600: #3f3f46;
    --background-700: #2e2e34;
    --background-800: #1f1f24;
    --background-900: #18181b;
    --background-950: #101010;

    --primary-50: #e0d7ff;
    --primary-100: #c0a8ff;
    --primary-200: #a07aff;
    --primary-300: #8053ff;
    --primary-400: #6a2bff;
    --primary-500: #5900ff;
    --primary-600: #4700cc;
    --primary-700: #350099;
    --primary-800: #230066;
    --primary-900: #120033;
    --primary-950: #090019;

    --secondary-50: #f0e8ff;
    --secondary-100: #d9cfff;
    --secondary-200: #c2b5ff;
    --secondary-300: #ab9bff;
    --secondary-400: #947fff;
    --secondary-500: #7d64ff;
    --secondary-600: #654ecc;
    --secondary-700: #4d3999;
    --secondary-800: #362566;
    --secondary-900: #1b132d;
    --secondary-950: #0d0916;

    --accent-50: #fbe0ff;
    --accent-100: #f5b3ff;
    --accent-200: #ef80ff;
    --accent-300: #e94dff;
    --accent-400: #e226ff;
    --accent-500: #dc00ff;
    --accent-600: #b300cc;
    --accent-700: #800099;
    --accent-800: #4d0066;
    --accent-900: #1a001e;
    --accent-950: #0d000f;

    --success: #0e812d;
    --warning: #b38f09;
    --error: #8a222d;
    --info: #006ed4;

    /* TRANSITION */
    --transition-global: 200ms ease-in-out;

    /* ANIMATION */
    --animation-global: 5s linear infinite;
}

* {
    /* DISPLAY */
    margin: 0;
    box-sizing: border-box;

    /* STYLING */
    border: 0;
    padding: 0;
    outline: 0;
    line-height: 1;
}

html {
    /* STYLING */
    font-size: 16px;

    /* EXTRA */
    scroll-behavior: smooth;
}

body {
    /* POSITION */
    position: relative;

    /* DISPLAY */
    overflow: hidden auto;

    /* STYLING */
    color: var(--text-50);
    font-family: "Geist", sans-serif;
    background-color: var(--background-950);
    -webkit-tap-highlight-color: transparent;
}

input,
button,
select,
textarea {
    /* STYLING */
    color: inherit;
    font-family: inherit;
}

::-webkit-scrollbar {
    /* DISPLAY */
    width: 8px;
}

::-webkit-scrollbar-track {
    /* STYLING */
    background-color: var(--background-900);
}

::-webkit-scrollbar-thumb {
    /* STYLING */
    border-radius: 10px;
    background-color: var(--background-600);
}

.text-highlight {
    /* STYLING */
    background: linear-gradient(90deg, var(--primary-300), var(--primary-500), var(--primary-500), var(--primary-300));
    background-clip: text;
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* EXTRA */
    animation: textgradient var(--animation-global);
}