:root {
    /* Primary Colors */
    --indigo-blue-darkest: #18263d;
    --indigo-blue-darker: #161e3d;
    --indigo-blue-dark: #283c5c;
    --indigo-blue-normal: #2c4078;
    --indigo-blue-light: #465d9c;
    --indigo-blue-lightest: #969ebd;
    /* Secondary Colors */
    --blue-normal: #1967ff;
    --blue-lightest: #e7f4fe;
    /* Neutral Colors */
    --black: #000000;
    --white: #ffffff;
    --neutral-gray-1: #333333;
    --neutral-gray-2: #7e7e7e;
    --neutral-gray-3: #acacac;
    --neutral-gray-4: #d6d6d6;
    --neutral-gray-disabled: #d6d6d9;
    --neutral-gray-5: #e6e6e6;
    --neutral-gray-6: #f3f3f3;
    --border-color: #ededed;
    --button-border-color: #ededed;
    --filter-bg: #eceff5;
    /* Status Colors */
    --green: #00b33c;
    --green-lightest: #d6ffeb;
    --amber: #b55e14;
    --amber-lightest: #faf0dd;
    --red: #e61e1e;
    --red-border: #ff3b30;
    --red-lightest: #fbcac5;
    /* Toast Colors */
    --Toast-Information: #2c3d7b;
    --Toast-Information-BG: #e7f4fe;
    --Toast-Success: #00963c;
    --Toast-Success-BG: #ddffeb;
    --Toast-Critical: #ff3b30;
    --Toast-Critical-BG: #f9dedc;
    --Toast-Warning: #955214;
    --Toast-Warning-BG: #f4efdd;
    /* Button */
    --Button-Button-Label: #fafcfe;
    --base-button-background: #2c3d7b;
    --cancel-base-background: #e7f4fe;
    /* Typography */
    --font-primary: "Lexend", sans-serif;
    --font-family-base: "Lexend", sans-serif;
    --font-family-secondary: "Axiforma", sans-serif;
    --h1-font-size: 24px;
    --h1-line-height: 30px;
    --h2-font-size: 20px;
    --h2-line-height: 25px;
    --h3-font-size: 14px;
    --h3-line-height: 17.5px;
    --h4-font-size: 11px;
    --h4-line-height: 13.8px;
    --body-font-size: 16px;
    --body-line-height: 20px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 18px;
    --font-size-lg: 22px;
    --font-size-xl: 24px;
    --font-size-xmd: 16px;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --font-weight-bolder: 800;
    --body-font-regular: 400;
    --body-font-medium: 500;
    --body-font-semi-bold: 600;
    --body-font-bolder: 800;
    /* Layout */
    --header-height: 80px;
    --sidenav-width: 84px;
    --icon-size: 37px;
    --search-height: 50px;
    --search-transition-width: 400px;
    --dropdown-border-radius: 20px;
    /* Spacing */
    --line-height-small: 4px;
    --line-height-medium: 6px;
    --gap-small: 4px;
    --gap-medium: 8px;
    --padding-small: 6px;
    --padding-medium: 8px;
    /* Ratio */
    --ratio-width-1920: 1;
    --ratio-width-1728: 0.9;
    --ratio-width-1512: 0.78;
    --ratio-width-1440: 0.75;
    --ratio-width-1280: 0.66;
    --ratio-width-1024: 0.53;
    --ratio-width-992: 0.51;
    --ratio-width-834: 0.43;
    --ratio-width-768: 0.4;
    --ratio-height-1366: 1.26;
    --ratio-height-1194: 1.1;
    --ratio-height-1133: 1.04;
    --ratio-height-1117: 1.03;
    --ratio-height-1080: 1;
    --ratio-height-1024: 0.94;
    --ratio-height-928: 0.9;
    --ratio-height-900: 0.83;
    --ratio-height-828: 0.76;
    --ratio-height-728: 0.76;
    --ratio-height-720: 0.66;
    --ratio-height-600: 0.55;
    --ratio-height-561: 0.52;
    --ratio-height-500: 0.46;
    --ratio-height-400: 0.41;
    /* UI Elements */
    --page-background: #ffffff;
    --background-color: #fafcfe;
    --background-base: #ffffff;
    --header-bg-color: #ffffff;
    --grey-card: #f6f6f6;
    --dull-grey-badge-bg: #eef2f5;
    --blue-circle: #2c3d7b;
    --green-circle: #34c759;
    --orange-circle: #ff9500;
    /* Text Colors */
    --light-text: #333333;
    --primary-text-color: #2c3d7b;
    --secondary-color: #5c5c77;
    --tertiary-color: #e3f4f8;
    --text-color-dull: #9797aa;
    --text-dull-grey: #6c757d;
    /* Hover Colors */
    --menu-hover: #e3f4f8;
    --submenu-hover: #e3f4f8;
    /* Border */
    --Border-Radius-XS: 4px;
}

/* Dark Theme */
[data-theme="dark"] {
    --page-background: #363d49;
    --light-text: #fafcfe;
    --menu-hover: #007aff;
    --submenu-hover: #4b5563;
    --dialog-text: #fff;
    --background-color: #272c33;
    --background-base: #272c33;
    --primary-text-color: #007aff;
    --header-bg-color: #313740;
    --tertiary-color: #e3f4f8;
    --secondary-color: #9797aa;
    --text-color: #fafcfe;
    --border-color: #272c33;
    --table-text-color: #9797aa;
    --text-color-dull: #fafcfe;
    --bs-table-bg: #272c33 !important;
}