:root {
    --primary-color-50: #fcf4f4;
    --primary-color-100: #fae6e6;
    --primary-color-200: #f6d2d2;
    --primary-color-300: #efb2b2;
    --primary-color-400: #e68c8c;
    --primary-color-500: #d65d5d;
    --primary-color-600: #c24040;
    --primary-color-700: #a23333;
    --primary-color-800: #872d2d;
    --primary-color-900: #712b2b;
    --primary-color-950: #3c1313;
}

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

    --write-guide-bg: linear-gradient(-120deg, #fce4e4 0%, #f8c8c8 40%, #f1a8a8 70%, #e98d8d 100%);
    --light-bg: linear-gradient(to right, rgba(230, 140, 140, 0.12), rgba(213, 125, 125, 0.08));

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

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

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

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