:root {
    --primary-color-50: #fef3ee;
    --primary-color-100: #fde4d7;
    --primary-color-200: #fac5ae;
    --primary-color-300: #f79c7a;
    --primary-color-400: #f3704d;
    --primary-color-500: #ef4320;
    --primary-color-600: #e02b16;
    --primary-color-700: #ba1c14;
    --primary-color-800: #941918;
    --primary-color-900: #771817;
    --primary-color-950: #400a0b;
}

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

    --write-guide-bg: linear-gradient(-120deg, #fde4d7 0%, #fac5ae 40%, #f79c7a 70%, #f3704d 100%);
    --light-bg: linear-gradient(to right, rgba(243, 112, 77, 0.12), rgba(243, 112, 77, 0.08));

    --box-shadow: 0 2px 10px 0 rgba(243, 112, 77, 0.12);
}

.dark {
    --write-guide-bg: linear-gradient(70deg, #090909 40%, #202429);
    --light-bg: linear-gradient(to right, rgba(243, 112, 77, 0.12), rgba(243, 112, 77, 0.08));

    --box-shadow: 0 2px 10px 0 rgba(243, 112, 77, 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, #f79c7a, #ef4320);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.gradient {
    background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
}