:root {
    /* background */
    --tbd-background1: #FFFFFF; /* previously map_get($colors, canvas-white); */
    --tbd-background2: #ECECEC; /* previously map_get($colors, canvas-dark); */
    --tbd-background3: rgba(255, 255, 255, 0.4); /* previously rgba(map_get($colors, canvas-white), 0.4); */
    --tbd-background4: #EAF5FC;
    --tbd-background5: #4EAAE1;
    --tbd-background6: #FFFFFF;
    --tbd-background7: #EAF5FC;
    --tbd-background8: #FFFFFF;
    --tbd-background9: #FFFFFF;

    /* border */
    --tbd-border1: #3278B3;
    --tbd-border2: #A3CDED;
    --tbd-border3: rgba(107, 107, 107, 0.6); /* previously rgba(map_get($colors, grey-wcag-6B6), 0.6);  */
    --tbd-border4: #3278B3;

    /* border radius */
    --tbd-border-radius1: 2px;
    --tbd-border-radius2: 0;
    --tbd-border-radius3: 2px;

    /* color */
    --tbd-color1: rgba(107, 107, 107, 0.6); /* previously rgba(map_get($colors, grey-wcag-6B6), 0.6); */
    --tbd-color2: #3278B3;
    --tbd-color3: #E3F1FF; /* aka blue-sky */
    --tbd-color4: #000000;
    --tbd-color5: #4EAAE1;
    --tbd-color6: #4EAAE1;
    --tbd-color7: #3278B3;

    /* figma names */
    --palette-brand-primary: #3278B3;
    --palette-brand-primary-darker05: #2D6FA5;
    --palette-brand-primary-darker10: crimson;
    --palette-brand-primary-darker20: #255C8F;
    --palette-brand-primary-darker60: #0F2F4D;
    --palette-brand-primary-lighter40: #A3CDED;
    --palette-brand-primary-opacity25: rgba(50, 120, 179, .25);
    
    /* hex code names */
    --tbd-49498c: #29689E; /* previously --palette-brand-primary-darker10 */
    --tbd-4d4d4d: #6B6B6B; /* previously map_get($colors, grey-wcag-6B6); */
    --tbd-bbbbd4: #A3CDED; /* previously --palette-brand-primary-lighter40 */
    --tbd-cccccc: #C4C4C4; /* previously map_get($colors, paz-black-l-30); */
    --tbd-e6e6e6: #E6E6E6;
    --tbd-f7f7f7: #F7F7F7;

    /* other */
    --tbd-transparent: transparent;
    --tbd-white: #FFFFFF;
}