:root {
    --primary-color-50: #EDFCF4;
    --primary-color-100: #d4f7e2;
    --primary-color-200: #adedcb;
    --primary-color-300: #77dead;
    --primary-color-400: #3ac487;
    --primary-color-500: #1dac72;
    --primary-color-600: #108b5b;
    --primary-color-700: #0d6f4b;
    --primary-color-800: #0d583d;
    --primary-color-900: #0c4833;
    --primary-color-950: #05291d;
}

:root {
    --hero-name-color: transparent;
    --hero-image-background-image: linear-gradient(-45deg, #108b5b 50%, #0d6f4b 50%);
    --hero-image-filter: blur(40px);

    --write-guide-bg: linear-gradient(-120deg, #d4f7e2 0%, #adedcb 40%, #77dead 70%, #1dac72 100%);
    --light-bg: linear-gradient(to right, rgba(250, 250, 142, 0.12), rgba(255, 252, 200, 0.08));

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

.dark {
    --write-guide-bg: linear-gradient(70deg, #090909 40%, #202429);
    --light-bg: linear-gradient(to right, rgba(230, 209, 140, 0.12), rgba(213, 195, 125, 0.08));

    --box-shadow: 0 2px 10px 0 rgba(113, 92, 46, 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(to right, #090909, #202429);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-light-primary {
    background: var(--light-bg);
}