/** COLORS **/

:root {
    /** general colors **/
    --turquoise: #40D4B1;
    --turquoise-dark: #29B896;
    --blue: #3F87F5;
    --blue-dark: #0F69F2;
    --red: #dc3545;
    --red-dark: #c82333;
    --grey-light: #F8F9FA;
    --grey: #E0E3E5;
    --grey-med-dark: #C9CCCE;
    --grey-dark: #B3B5BA;
    --grey-darker: #5B5D63;
    --grey-darkest: #373A42;
    --coal: #222932;
    --white: #ffffff;
    --black: #0E131A;
    --green: #16CB7B;
    --green-dark: #119D5F;
    --red: #CB164E;
    --red-dark: #9D113C;
    /** utility colors **/
    --accent-color: var(--turquoise);
    --accent-color--dm: var(--blue);
    --accent-color-hover: var(--turquoise-dark);
    --accent-color-hover--dm: var(--blue-dark);
    /** component colors **/
    /** the --dm modifier refers to the CMS's dark mode **/
    --bg-color: var(--grey-light);
    --bg-color--dm: var(--black);
    --widget-bg-color: var(--coal);
    --btn-color: var(--turquoise);
    --btn-color--dm: var(--blue);
    --btn-hover-color: var(--turquoise-dark);
    --btn-hover-color--dm: var(--blue-dark);
    --border-color: var(--grey);
    --border-color--dm: var(--black);
    --widget-font-color: var(--grey-dark);
    --menu-bg-color: var(--coal);
    --menu-label-color: var(--grey-darker);
}