:root {
    /* color */
    --main: #5B1EA8;
    --main2: #342E37;
    --grey1: #FFFFFF;
    --grey2: #F5F5F5;
    --grey3: #EBEBEB;
    --grey4: #E0E0E0;
    --grey5: #D7D7D7;
    --grey6: #8A8A8A;
    --grey7: #666666;
    --grey8: #555555;
    --grey9: #333333;
    --grey10: #111111;
    --warning: #C33131;
    --success: #3173C3;
    --info: #FFA500;
    --highlight: #5788DD;
    --bg-blue1: #F4F7FF;
    --modal-bg: rgba(0,0,0,0.7);

    /* text size */
    --font-highlight: 3rem;
    --font-xxl: 2.4rem;
    --font-xl: 2rem;
    --font-lg: 1.8rem;
    --font-md: 1.6rem;
    --font-base: 1.4rem;
    --font-sm: 1.3rem;
    --font-xs: 1.2rem;
    
    /* border radius */
    --radius-sm: 0.3rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.8rem;
    --radius-xl: 1rem;
    --radius-full: 999px;
    --radius-circle: 50%;

    /* space */
    --space-1: 0.4rem;
    --space-2: 0.8rem;
    --space-3: 1.2rem;
    --space-4: 1.6rem;
    --space-5: 2rem;
    --space-6: 2.4rem;
    --space-7: 2.8rem;
    --space-8: 3.2rem;
    --space-9: 3.6rem;
    --space-10: 4rem;
    --space-13: 5.2rem;

    /* button height */
    --button-xxs: 2.4rem;
    --button-xs: 2.8rem;
    --button-sm: 3.2rem;
    --button-md: 4rem;
    --button-lg: 4.8rem;
}