:root {
    /*opacity*/
    --opacity-0: 0;
    --opacity-1: .1;
    --opacity-2: .2;
    --opacity-3: .3;
    --opacity-4: .4;
    --opacity-5: .5;
    --opacity-6: .6;
    --opacity-7: .7;
    --opacity-8: .8;
    --opacity-9: .9;

    /*main/sub color*/
    --primary-color: 67, 133, 198;
    --secondary-color: 139, 202, 165;

    /* common use color */
    --black-color: 0, 0, 0;
    --white-color: 255, 255, 255;

    /* background color */
    --background-color-1: 243, 243, 244;

    /*status color*/
    --error-color: 240, 105, 105;
    --warning-color: 247, 168, 10;
    --info-color: 29, 163, 208;
    --success-color: 139, 202, 165;

    /*black opacity*/
    --black-color-opacity-3: rgba(var(--black-color),var(--opacity-3));

    /* font style */
    --font-size-xxs: .813rem;
    --font-size-xs: .875rem;
    --font-size-sm: .938rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;

    /* line-height */
    --line-height-xs: 1.2;
    --line-height-sm: 1.5;
    --line-height-md: 2;

    /* raduis */
    --raduis-0: 0;
    --raduis-50: 50%;
    --raduis-xs: .75rem;
    --raduis-sm: 1rem;
    --raduis-md: 1.5rem;
    --raduis-lg:  2rem;

    /* space */
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: .75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
}