:root {
    /* primary */
    --bg-tch-primary: #195C90;
    --bg-tch-primary-hover: #004D7F;
    --bg-tch-primary-active: #004D7F;
    --bg-tch-primary-200: #F3F9FF;
    --bg-tch-primary-400: #D8EDFF;
    --solid-tch-primary-color: #fff;
    --border-tch-primary-800: #004D7F;
    --outline-tch-primary-color: #2F6FA4;
    --ghost-tch-primary-color: #2F6FA4;
    --cp-primary-1200: #213D57;
    --cp-primary-1100: #2F6FA4;
    --cp-primary-1000: #004D7F;
    --cp-primary-900: #195C90;
    --cp-primary-800: #75ADE0;
    --cp-primary-700: #9BC5EB;
    --cp-primary-600: #B4D6F5;
    --cp-primary-500: #C7E3FC;
    --cp-primary-400: #D8EDFF;
    --cp-primary-300: #E6F4FF;
    --cp-primary-200: #F3F9FF;
    --cp-primary-100: #FAFDFF;
    --cp-primary-accessible-text-dark: var(--cp-primary-1200); 
    --cp-primary-accessible-text-light: var(--cp-primary-1100); 
    --cp-primary-bg: var(--cp-primary-100); 
    --cp-primary-light: var(--cp-primary-300); 
    --cp-primary-lighten: var(--cp-primary-200);
}