:root {
    --main-color: #5D688A;
    --salmon-pink: #F7A5A5;
    --orange: #FFDBB6;
    --rosy-white: #FFF2EF;
    --color-text-main: #383636;
}

:root {
    font-size: clamp(16px, 0.5vw + 14px, 20px);
}

:root {
    --scale-ratio: 1.25;
    --space-unit: 1rem;
    --text-xs: calc(var(--text-sm) / var(--scale-ratio));
    --text-sm: calc(var(--text-base) / var(--scale-ratio));
    --text-base: 1rem;
    --text-lg: calc(var(--text-base) * var(--scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--scale-ratio));
    --text-2xl: calc(var(--text-xl) * var(--scale-ratio));
    --text-3xl: calc(var(--text-2xl) * var(--scale-ratio));
    --space-xs: calc(var(--space-unit) / 2); /* 0.5rem */
    --space-sm: var(--space-unit); /* 1rem */
    --space-md: calc(var(--space-unit) * 1.5); /* 1.5rem */
    --space-lg: calc(var(--space-unit) * 2); /* 2rem */
    --space-xl: calc(var(--space-unit) * 3); /* 3rem */
    --space-2xl: calc(var(--space-unit) * 4); /* 4rem */
    --space-3xl: calc(var(--space-unit) * 5); /* 5rem */
    --space-4xl: calc(var(--space-unit) * 6); /* 6rem */
    --space-5xl: calc(var(--space-unit) * 8); /* 8rem */
}