:root {
    --primary-color-50: #eef2ff;
    --primary-color-100: #e0e7ff;
    --primary-color-200: #c7d2fe;
    --primary-color-300: #a5b4fc;
    --primary-color-400: #818cf8;
    --primary-color-500: #6366f1;
    --primary-color-600: #4f46e5;
    --primary-color-700: #4338ca;
    --primary-color-800: #3730a3;
    --primary-color-900: #312e81;
    --primary-color-950: #1e1b4b;
}

:root {
    --hero-name-color: transparent;
    --hero-image-background-image: linear-gradient(-45deg, #24d647 50%, #283bf5 50%);
    --hero-image-filter: blur(40px);

    --write-guide-bg: linear-gradient(-120deg, #cfebff 0%, #bfd4fd 40%, #d8b3fd 70%, #d5a7fb 100%);
    --light-bg: linear-gradient(to right, rgba(179, 53, 249, 0.12), rgba(98, 205, 252, 0.08));

    --box-shadow: 0 2px 10px 0 rgba(76, 46, 113, 0.12);
}

.dark {
    --write-guide-bg: linear-gradient(70deg, #090909 40%, #202429);
    --light-bg: linear-gradient(to right, rgba(179, 53, 249, 0.12), rgba(98, 205, 252, 0.08));

    --box-shadow: 0 2px 10px 0 rgba(76, 46, 113, 0.26);
}

@media (min-width: 640px) {
    :root {
        --hero-image-filter: blur(56px)
    }
}

@media (min-width: 960px) {
    :root {
        --hero-image-filter: blur(80px)
    }
}


.text-logo {
    background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-light-primary {
    background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
    background: var(--light-bg);
}