:root {
    --navbar-bg-color: white;
    --navbar-accountInfo-bg-color: #f9f9f9;
    --main-bg-color-components: #f7f7fa;
    --main-bg-color-components-hover: #ededed;
    --main-bg-color: #f7f7fa;
    --accent-color: #5777ed ;
    --accent-color-hover: #3E5ED4;
    --accent-color-light: #1ea1f2;
    --accent-font-color: #252c43;
    --placeholder-font-color: #8a8a8a;
    --document-card-bg-color: white;
    --horizontal-ruler-color: #ececec;
    --btn-filter-bg-color: #f9f9f9;
    --approve-btn-color: green;
    --decline-btn-color: red;
    --error-color: #E12525;
    --success-color: #4a934a;
    --subtitle-color: var(--subtitle-color, #747a8b);
    --font-family: var(--config-font-family, 'Montserrat', sans-serif);
    --font-family-medium: var(--config-font-family-medium, 'MontserratMedium', sans-serif);
    --font-family-semi-bold: var(--config-font-family-semi-bold, 'MontserratSemiBold', sans-serif);
    --font-family-bold: var(--config-font-family-bold, 'MontserratBold', sans-serif);
}

/* Dark mode overrides for legacy CSS custom properties */
.dark {
    --navbar-bg-color: rgb(30 30 30);
    --navbar-accountInfo-bg-color: rgb(40 40 40);
    --main-bg-color-components: rgb(30 30 30);
    --main-bg-color-components-hover: rgb(45 45 45);
    --main-bg-color: rgb(17 17 17);
    --accent-color: rgb(105 137 255);
    --accent-color-hover: rgb(130 160 255);
    --accent-color-light: rgb(60 180 255);
    --accent-font-color: rgb(229 231 235);
    --placeholder-font-color: rgb(140 140 140);
    --document-card-bg-color: rgb(30 30 30);
    --horizontal-ruler-color: rgb(55 55 55);
    --btn-filter-bg-color: rgb(40 40 40);
    --approve-btn-color: rgb(74 222 128);
    --decline-btn-color: rgb(248 113 113);
    --error-color: rgb(248 113 113);
    --success-color: rgb(74 222 128);
    --subtitle-color: rgb(200 200 210);
}