:root {
    --primary-color-50: #fff1f2;
    --primary-color-100: #ffe4e6;
    --primary-color-200: #fecdd3;
    --primary-color-300: #fda4af;
    --primary-color-400: #fb7185;
    --primary-color-500: #f43f5e;
    --primary-color-600: #e11d48;
    --primary-color-700: #be123c;
    --primary-color-800: #9f1239;
    --primary-color-900: #881337;
    --primary-color-950: #4c0519;
}

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

    --write-guide-bg: linear-gradient(-120deg, #ffe4e6 0%, #fecdd3 40%, #fda4af 70%, #fb7185 100%);
    --light-bg: linear-gradient(to right, rgba(243, 77, 77, 0.12), rgba(243, 77, 77, 0.08));

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

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

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

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

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