:root {
    /* custom color */
    --color-secondary: #3c32af;
    --color-semantic: #1f8de6;
    --color-main-gradient-first: #4614a0;
    --color-main-gradient-second: #004bc8;
    --color-secondary-rgb: 60, 50, 175;
    --color-timer: #e5f4ff;
    --color-timer-text: #1f8de6;
    --color-challenge-main: 50, 100, 250;
    --color-challenge-sub: 105, 220, 117;
    --color-moca-card: #1d304e;
    --color-moca-text: #ffffff;
    /* 아직 기획 확정되지 않아서 변경 시 위치 이동 또는 삭제 예정 */
    --color-secondary-sub: #d49f8f;
    --color-secondary-sub-rgb: 212, 159, 143;

    /* common */
    --color-primary: #404048;
    --color-background: #ffffff;
    --color-text: #1e1e23;
    --color-dim: #66666c;
    --color-error: #df3139;
    --color-placeholder: #b2b2b5;
    --color-disabled: #e9eaee; /*버튼 비활성화*/
    --color-input: #f5f6f8;
    --color-blue-gray: #f4f5fa;
    --color-divider: #f7f7f7;
    --color-accent: #3c32af;

    --color-dim-rgb: 102, 102, 108;
    --color-error-rgb: 223, 49, 57;
    --color-text-rgb: 30, 30, 35;
    --color-placeholder-rgb: 178, 178, 181;
    --color-primary-rgb: 64, 64, 72;
    --color-disabled-rgb: 233, 234, 238;
    --color-input-rgb: 245, 246, 248;

    --color-switch-text: #212121;
    --color-nav-bar-bg: #ffffff;
    --color-switch-icon: #212121;
    --color-bottom-nav-bg: #fff;

    /** ion **/
    --ion-color-primary: var(--color-primary);
    --ion-color-primary-rgb: var(--color-primary-rgb);
    --ion-color-primary-shade: var(--color-primary);
    --ion-color-primary-tint: var(--color-primary);
    --ion-text-color: var(--color-text);
    --ion-backdrop-color: var(--color-text);
    --ion-tab-bar-color: var(--color-dim); /** 바텀바 텍스트 비활성화 색상 **/
    /* ion font */
    --ion-default-font:
        Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
        'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', sans-serif !important;
    --ion-font-family: var(--ion-default-font);
}

/* DEFAULT THEME ON LOCALHOST */
html[data-theme='localhost'] {
}

/* TODO: add below */
html[data-theme='dark'] {
}
html[data-theme='light'] {
}