:root {
	--brand-color: #59228B;
	--bg-white: white;
	--bg-green: #00af50;
	--text-white: white;
	--text-orange: orange;
	
    /* BG, Text, line에 사용 */
    --gray-0: #FFFFFF;  /* Background에 사용 */
    --gray-5: #F8F8F8;  /* Background에 사용 */
    --gray-10: #F0F0F0; /* Background에 사용 */
    --gray-20: #E4E4E4; /* Disabled에 사용 */
    --gray-30: #D8D8D8; /* Disabled에 사용 */
    --gray-40: #C6C6C6; /* Border에 사용 */
    --gray-50: #8E8E8E; /* Text-disabled에 사용 */
    --gray-60: #717171; /* Text-disabled에 사용 */
    --gray-70: #555555; /* Text-body에 사용 */
    --gray-80: #2D2D2D; /* Text-body에 사용 */
    --gray-90: #1D1D1D; /* Text-title에 사용 */
    --gray-100: #000000; /* Text-title에 사용 */

    /* 오류, 금지, 위험, 삭제, 불가 등을 표시할 때 사용 */
    --danger-5: #FEECF0;  /* Surface에 사용 */
    --danger-10: #FCD4DE; /* Border에 사용 */
    --danger-20: #F799B1; /* Border에 사용 */
    --danger-30: #F36689; /* Border에 사용 */
    --danger-40: #EF35E6; /* Border에 사용 */
    --danger-50: #EB003B; /* Base에 사용 */
    --danger-60: #D50136; /* Text에 사용 */
    --danger-70: #B00223; /* Text에 사용 */
    --danger-80: #5E0018; /* Text에 사용 */
    --danger-90: #2F000C; /* Text에 사용 */

    --primary-5: #EFF5FF;   /* Surface에 사용 */
    --primary-10: #D3E1FB;  /* Border에 사용 */
    --primary-20: #A7C4F7;  /* Border에 사용 */
    --primary-30: #7CA6F3;  /* Border에 사용 */
    --primary-40: #5089EF;  /* Border에 사용 */
    --primary-50: #246BEB;  /* Base에 사용 */
    --primary-60: #1D56BC;  /* Text에 사용 */
    --primary-70: #16408D;  /* Text에 사용 */
    --primary-80: #0E2B5E;  /* Text에 사용 */
    --primary-90: #07152F;  /* Text에 사용 */
    
    /* Warning - 경고, 주의, 안내 메시지 등 */
    --warning-5:  #FFF8E9;  /* Surface */
    --warning-10: #FFEAC1;  /* Border */
    --warning-20: #FFE2A7;  /* Border */
    --warning-30: #FFD47C;  /* Border */
    --warning-40: #FFC550;  /* Border */
    --warning-50: #FFB724;  /* Base */
    --warning-60: #98690A;  /* Text */
    --warning-70: #66490E;  /* Text */
    --warning-80: #4D370B;  /* Text */
    --warning-90: #332507;  /* Text */

    /* Success - 완료, 확인, 정상 등의 메시지에 사용 */
    --success-5:  #EEF7F0;
    --success-10: #CEE9D4;
    --success-20: #B2DCBB;
    --success-30: #8CCA99;
    --success-40: #33A14B;
    --success-50: #008A1E;
    --success-60: #006E18;
    --success-70: #005312;
    --success-80: #00370C;
    --success-90: #002207;

    /* Info - 정보, 알림, 안내용 메시지 등에 사용 */
    --info-5:  #E9F0FF;
    --info-10: #D4E1FF;
    --info-20: #A9C3FF;
    --info-30: #7DA4FF;
    --info-40: #5286FF;
    --info-50: #2768FF;
    --info-60: #1F53CC;
    --info-70: #173E99;
    --info-80: #0C1F4D;
    --info-90: #040A1A;

    --text-size-content: 14px;
    --text-size-title: 15px;
    --text-size-button: 13px;
    --text-size-large-button: 15px;
    --text-size-alert: 16px;
}