: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-450: #858F9F;
    --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: #22a9fd;
    --primitive-color-primaryDark: #004bab;
    --primitive-color-primaryLight: #e2f3fe;
    --primitive-color-secondary: #fb6514;
    --primitive-color-secondaryDark: #7e2410;
    --primitive-color-secondaryLight: #ffead5;
    --primitive-color-success: #12b76a;
    --primitive-color-warning: #f79009;
    --primitive-color-error: #f04438;
    --primitive-color-ranking: #23C900;
    --primitive-color-rankingDark: #00600c;
    --primitive-color-rankingLight: #e7f4e8;

    /* 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-ranking: var(--primitive-color-ranking);
    --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: var(--primitive-color-primaryLight);
    --color-bg-notification: #f6f7fb;
    --color-bg-warning: var(--primitive-color-warning);

    /* text */
    --color-text-brand: var(--primitive-color-primary);
    --color-text-ranking: var(--primitive-color-ranking);
    --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-semigrey: var(--primitive-color-grey-450);
    --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-ranking: var(--primitive-color-ranking);
    --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-ranking: var(--primitive-color-ranking);
    --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-7: 0.7;
    --opacity-8: 0.8;
    --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;

    /* badge normal*/
    --color-text-badge-inverse: var(--primitive-color-white);
    --color-bg-badge-normal-brand: var(--primitive-color-primary);
    --color-bg-badge-normal-secondary: var(--primitive-color-secondary);
    --color-bg-badge-normal-blue: #2e90fa;
    --color-bg-badge-normal-indigo: #6172f3;
    --color-bg-badge-normal-purple: #7a5af8;
    --color-bg-badge-normal-pink: #ee46bc;
    --color-bg-badge-normal-rose: #f63d68;
    --color-bg-badge-normal-red: #f04438;
    --color-bg-badge-normal-yellow: #f79009;
    --color-bg-badge-normal-green: #12b76a;
    --color-bg-badge-normal-gray: #667085;

    /* badge dark*/
    --color-bg-badge-dark-brand: var(--primitive-color-primaryDark);
    --color-bg-badge-dark-secondary: var(--primitive-color-secondaryDark);
    --color-bg-badge-dark-blue: #d1e9ff;
    --color-bg-badge-dark-indigo: #e0eaff;
    --color-bg-badge-dark-purple: #ebe9fe;
    --color-bg-badge-dark-pink: #fce7f6;
    --color-bg-badge-dark-rose: #ffe4e8;
    --color-bg-badge-dark-red: #fee4e2;
    --color-bg-badge-dark-yellow: #feefc7;
    --color-bg-badge-dark-green: #d1fadf;
    --color-bg-badge-dark-gray: #344054;

    /* badge soft*/
    --color-bg-badge-soft-brand: var(--primitive-color-primaryLight);
    --color-text-badge-soft-brand: #004bab;
    --color-bg-badge-soft-secondary: var(--primitive-color-secondaryLight);
    --color-text-badge-soft-secondary: #7e2410;
    --color-bg-badge-soft-blue: #d1e9ff;
    --color-text-badge-soft-blue: #2d3282;
    --color-bg-badge-soft-indigo: #e0eaff;
    --color-text-badge-soft-indigo: #2d3282;
    --color-bg-badge-soft-purple: #ebe9fe;
    --color-text-badge-soft-purple: #3e1c96;
    --color-bg-badge-soft-pink: #fce7f6;
    --color-text-badge-soft-pink: #851651;
    --color-bg-badge-soft-rose: #ffe4e8;
    --color-text-badge-soft-rose: #89123e;
    --color-bg-badge-soft-red: #fee4e2;
    --color-text-badge-soft-red: #7a271a;
    --color-bg-badge-soft-yellow: #feefc7;
    --color-text-badge-soft-yellow: #792e0d;
    --color-bg-badge-soft-green: #d1fadf;
    --color-text-badge-soft-green: #054f31;
    --color-bg-badge-soft-gray: #f2f4f7;
    --color-text-badge-soft-gray: #101828;
}