:root{
/* primitive */
    /* color */
    --primitive-color-black: #000000;
    --primitive-color-white: #FFFFFF;
    --primitive-color-grey-50: #F6F6F6;
    --primitive-color-grey-100: #F2F4F7;
    --primitive-color-grey-200: #EAECF0;
    --primitive-color-grey-300: #D0D5DD;
    --primitive-color-grey-400: #98A2B3;
    --primitive-color-grey-500: #667085;
    --primitive-color-grey-600: #475467;
    --primitive-color-grey-700: #344054;
    --primitive-color-grey-800: #1D2939;
    --primitive-color-grey-900: #101828;
    --primitive-color-primary: #00a5bc;
    --primitive-color-primaryDark: #00616F;
    --primitive-color-primaryLight: #D7F5FA;
    --primitive-color-secondary: #FB6514;
    --primitive-color-secondaryDark: #7E2410;
    --primitive-color-secondaryLight: #FFEAD5;
    --primitive-color-success: #12B76A;
    --primitive-color-warning: #F79009;
    --primitive-color-error: #F04438;

    /* size */
    --primitive-size-0: 0px;
    --primitive-size-1: 1px;
    --primitive-size-2: 2px;
    --primitive-size-4: 4px;
    --primitive-size-8: 8px;
    --primitive-size-12: 12px;
    --primitive-size-16: 16px;
    --primitive-size-20: 20px;
    --primitive-size-24: 24px;
    --primitive-size-32: 32px;
    --primitive-size-40: 40px;
    --primitive-size-44: 44px;
    --primitive-size-48: 48px;
    --primitive-size-60: 60px;
    --primitive-size-80: 80px;
    --primitive-size-96: 96px;
    --primitive-size-128: 128px;
    --primitive-size-160: 160px;
    --primitive-size-full: 9999px;

/* semantic */
    /* bg */
    --color-bg-brand: var(--primitive-color-primary);
    --color-bg-inverse: var(--primitive-color-white);
    --color-bg-kakao: #FEE500;
    --color-bg-naver: #03C75A;
    --color-bg-black: var(--primitive-color-black);
    --color-bg-disabled: var(--primitive-color-grey-100);
    --color-bg-footer: var(--primitive-color-grey-800);
    --color-bg-darkgrey: var(--primitive-color-grey-700);
    --color-bg-box: var(--primitive-color-grey-50);
    --color-bg-darknavy: var(--primitive-color-primaryDark);
    --color-bg-brandlight: var(--primitive-color-primaryLight);
    --color-bg-scrolltrack: var(--primitive-color-grey-300);
    --color-bg-scrollthumb: var(--primitive-color-grey-600);
    --color-bg-lightgreen: #DEF6DA;
    --color-bg-lightred: #FFECF1;
    --color-bg-lightskyblue: #e3f4f7;
    --color-bg-notification: #F6F7FB;

    /* text */
    --color-text-brand: var(--primitive-color-primary);
    --color-text-branddark: var(--primitive-color-primaryDark);
    --color-text-primary: var(--primitive-color-grey-800);
    --color-text-secondary: var(--primitive-color-grey-600);
    --color-text-tertiary: var(--primitive-color-grey-500);
    --color-text-inverse: var(--primitive-color-white);
    --color-text-disabled: var(--primitive-color-grey-400);
    --color-text-placeholder: var(--primitive-color-grey-400);
    --color-text-footer: var(--primitive-color-grey-300);
    --color-text-success: var(--primitive-color-success);
    --color-text-warning: var(--primitive-color-warning);
    --color-text-error: var(--primitive-color-error);
    --color-text-kakao: #191919;

    /* border */
    --color-border-brand: var(--primitive-color-primary);
    --color-border-primary: var(--primitive-color-grey-300);
    --color-border-inverse: var(--primitive-color-white);
    --color-border-disabled: var(--primitive-color-grey-200);
    --color-border-footer: var(--primitive-color-grey-500);
    --color-border-success: var(--primitive-color-success);
    --color-border-warning: var(--primitive-color-warning);
    --color-border-error: var(--primitive-color-error);
    --color-border-black: var(--primitive-color-black);

    /* shadow */
    --color-shadow-primary: var(--primitive-color-grey-200);


    /* icon */
    --color-icon-brand: var(--primitive-color-primary);
    --color-icon-primary: var(--primitive-color-grey-600);
    --color-icon-secondary: var(--primitive-color-grey-400);
    --color-icon-inverse: var(--primitive-color-white);
    --color-icon-red: var(--primitive-color-error);
    --color-icon-disabled: var(--primitive-color-grey-400);

    /* input */

    /* btn */
    --color-bg-input-disabled: var(--primitive-color-grey-50);
    --color-bg-btn-disabled: var(--primitive-color-grey-300);
    --color-bg-toggle: var(--primitive-color-grey-300);

    /* font-size */
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-22: 1.375rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-42: 2.625rem;
    --font-size-48: 3rem;

    /* font-weight */
    --font-weight-l: 300;
    --font-weight-r: 400;
    --font-weight-m: 500;
    --font-weight-sb: 600;
    --font-weight-b: 700;

    /* line-height */
    --line-height-s: 1;
    --line-height-m: 1.5;
    --line-height-l: 2;

    /* space */
    --space-0: var(--primitive-size-0);
    --space-4: var(--primitive-size-4);
    --space-8: var(--primitive-size-8);
    --space-12: var(--primitive-size-12);
    --space-16: var(--primitive-size-16);
    --space-20: var(--primitive-size-20);
    --space-24: var(--primitive-size-24);
    --space-32: var(--primitive-size-32);
    --space-40: var(--primitive-size-40);
    --space-44: var(--primitive-size-44);
    --space-48: var(--primitive-size-48);
    --space-60: var(--primitive-size-60);
    --space-80: var(--primitive-size-80);
    --space-96: var(--primitive-size-96);
    --space-128: var(--primitive-size-128);
    --space-160: var(--primitive-size-160);

    /* borderRauius */
    --border-radius-0: var(--primitive-size-0);
    --border-radius-2: var(--primitive-size-2);
    --border-radius-4: var(--primitive-size-4);
    --border-radius-8: var(--primitive-size-8);
    --border-radius-12: var(--primitive-size-12);
    --border-radius-16: var(--primitive-size-16);
    --border-radius-20: var(--primitive-size-20);
    --border-radius-full: var(--primitive-size-full);

    /* borderWidth */
    --border-width-0: var(--primitive-size-0);
    --border-width-1: var(--primitive-size-1);
    --border-width-2: var(--primitive-size-2);
    --border-width-4: var(--primitive-size-4);
    
    /* opacity */
    --opacity-0: 0;
    --opacity-3: 0.3;
    --opacity-6: 0.6;
    --opacity-n: 1;

    /* z-index */
    --z-index-0: 0;
    --z-index-1: 100;
    --z-index-2: 200; /*Fixed*/
    --z-index-3: 300; /*header*/
    --z-index-4: 400; /*Overlay*/
    --z-index-5: 500; /*Modal*/

    --bg-badge-skin: #5925DC;
    --bg-badge-disease: #027948;
    --bg-badge-age: #D1E9FF;
    --bg-badge-sex: #E0EAFF;
    --bg-badge-overlap: #F63D68;
    --bg-badge-reservation: #F79009;
    --bg-badge-status: #175CD3;
    --bg-badge-deadline: #D0D5DD;

    --color-badge-age: #2D3282;

    /* 헬스케어 */
    --color-bg-badge-warning: #ffede5;
    --color-bg-badge-increase: #ffecf1;
    --color-bg-badge-decrease: #def6da;

    --color-text-badge-warning: var(--primitive-color-secondary);
    --color-text-badge-increase: #ff375b;
    --color-text-badge-decrease: #2fa91b;
}