:root {
  --color-primary: #262daa; /* non-button primary */
  --color-button-primary: #a0ecce; /* button primary */

  /** START - Font Family **/
  --font-family-aktiv: aktiv-grotesk;
  --font-family-ibm: ibm-plex-mono;
  --font-family-meno: meno-display;
  /** END - Font Family **/

  /** START - Elevation **/
  --box-shadow-04: 0 4px 5px 0 rgba(38, 32, 86, 0.07), 0 1px 10px 0 rgba(38, 32, 86, 0.06),
    0 2px 4px -1px rgba(38, 32, 86, 0.1);
  --box-shadow-08: 0 8px 10px 1px rgba(38, 32, 86, 0.07), 0 3px 14px 2px rgba(38, 32, 86, 0.06),
    0 5px 5px -3px rgba(38, 32, 86, 0.1);
  --box-shadow-16: 0 16px 24px 2px rgba(38, 32, 86, 0.07), 0 6px 30px 5px rgba(38, 32, 86, 0.06),
    0 8px 10px -5px rgba(38, 32, 86, 0.1);
  /** START - Elevation **/

  /** START - Border Radius **/
  --border-radius-01: 4px;
  --border-radius-02: 8px;
  --border-radius-03: 12px;
  --border-radius-04: 16px;
  /** END - Border Radius **/

  /** START - Margins **/
  --margin-sm: 4px;
  --margin-md: 8px;
  --margin-lg: 20px;
  --margin-xl: 24px;
  /** END - Margins **/

  /** START - Text **/
  --text-color: #333333;
  --text-color-contrast: #ffffff;
  --background-color: #fcfbf8;
  /** END - Text **/

  /** START - Status Colors **/
  --error-color: #e90101;
  --success-color: #57b8af;
  --warning-color: #ff9c0c;
  --information-color: #5a8ee8;
  /** END - Status Colors **/

  /** START - Colors Primary outlined button **/
  --btn-outlined-primary-default-text: var(--text-color);
  --btn-outlined-primary-disable-text: #999999;
  --btn-outlined-primary-default-border: var(--color-button-primary);
  --btn-outlined-primary-disabled-border: #f4f2ed;
  --btn-outlined-primary-default-background: #ffffff;
  --btn-outlined-primary-hovered-background: #f8fefb;
  --btn-outlined-primary-focused-background: #f4fdf9;
  --btn-outlined-primary-dragged-background: #ffffff;
  /** END - Colors Primary outlined button **/

  /** START - Colors Primary contained button **/
  --btn-contained-primary-default-text: var(--text-color);
  --btn-contained-primary-disabled-text: #999999;
  --btn-contained-primary-default-background: var(--color-button-primary);
  --btn-contained-primary-hovered-background: #99e2c5;
  --btn-contained-primary-focused-background: #8ccfb4;
  --btn-contained-primary-disabled-background: #f4f2ec;
  --btn-contained-primary-dragged-background: #92d9bd;
  --btn-contained-primary-disabled-background: #f4f2ed;

  /** END - Colors Primary outlined button **/

  /** START - Notifications Search Button **/
  --btn-icon-primary-default-text: var(--text-color);
  --btn-icon-primary-default-background: var(--color-button-primary);
  --btn-icon-primary-hovered-background: #99e2c5;
  --btn-icon-primary-focused-border: var(--color-button-primary);
  /** END - Notifications Search Button **/

  /** START - Dropdown Menu **/
  --dropdown-item-default-background: #ffffff;
  --dropdown-item-hovered-background: #f4f2ed;
  --dropdown-item-default-border: #f4f2ed;
  --dropdown-item-hovered-border: #8c8c8c;
  --dropdown-item-default-color: var(--text-color);
  --dropdown-item-active-background: #3d3868;
  --dropdown-item-active-color: #ffffff;
  /** END - Dropdown Menu **/

  /** START - Label **/
  --label-default-color: var(--text-color);
  /** END - Label **/

  /** START - Colors Text button **/
  --btn-outlined-text-default-text: #262daa;
  --btn-outlined-text-disabled-text: #7f7f7f;
  --btn-outlined-text-default-background: transparent;
  --btn-outlined-text-hovered-background: #f6f6fc;
  --btn-outlined-text-focused-background: #e5e5f5;
  --btn-outlined-text-disabled-background: transparent;
  --btn-outlined-text-dragged-background: #ffffff;
  /** END - Colors Text button **/

  /** START - Spacing button **/
  --btn-sm-padding: 8px 12px;
  --btn-md-padding: 14px 16px;
  --btn-lg-padding: 18px 16px;
  /** END - Spacing button **/

  /** START - Spacing input field **/
  --input-padding: 12px;
  --search-input-default-border: #0000003b;
  --input-placeholder-color: #a9a9a9;
  /** END - Spacing input field **/

  /** START - Font Button **/
  --btn-sm-font: 14px;
  --btn-md-font: 16px;
  --btn-lg-font: 16px;
  /** END - Font Button **/

  /** START - Main Nav **/
  --nav-background: #ffffff;
  --nav-active-background: #3d3868;
  --nav-text: #ffffff;
  --nav-selected-text: var(--btn-contained-primary-default-background);
  --nav-hover-background: #f4f2ed;
  --nav-active-text: var(--color-button-primary);
  /** End - Main Nav **/

  /** START - Sub Nav **/
  --subnav-default-background: #f4f2ed;
  --subnav-active-background: #3d3868;
  --subnav-default-text: var(--text-color);
  --subnav-active-text: var(--text-color-contrast);
  /** End - Sub Nav **/

  /** START - Notification Badge **/
  --notification-badge-background: var(--color-button-primary);
  /** END - Notification Badge **/

  /** START - Surface **/
  --surface-background: #ffffff;
  /** END - Surface **/

  /** START - Tooltip **/
  --tooltip-background: #f4f2ed;
  --tooltip-border: #e6e4df;
  /** END - Tooltip **/

  /** START - Pagination **/
  --pagination-text: var(--text-color);
  --pagination-btn-disabled: var(--btn-contained-primary-disabled-text);
  /** END - Pagination **/

  /** START - Anchor link **/
  --anchor-text: var(--color-primary);
  --anchor-background: #d0ccf5;
  /** END - Anchor link **/

  /** START - Card **/
  --card-background: var(--surface-background);
  --card-border-radius: var(--border-radius-02);
  --card-box-shadow: var(--box-shadow-08);
  /** END - Card **/

  /** START - Table **/
  --table-row-size: 42px;
  --table-row-size-sm: 32px;
  --table-cell-font: 14px;
  --table-cell-font-sm: 12px;
  /*
     Note: If the --table-row-hover-background variable is modified,
          please ensure that the token does not include any transparency,
          as this may cause table issues column overlaping in web components.
  */
  --table-row-hover-background: #f1f1f1;
  --table-row-alert-border: #f4f2ed;
  --table-header-border: #d7d7d7;
  --table-row-alert-active-background: #6457de;
  --table-row-alert-active-text: #ffffff;
  --table-row-alert-background: #999999;
  --table-row-cell-background: #ffffff;
  --table-nested-row-size: 32px;
  --table-nested-background: #f5f5f5;
  /** END - Table **/
  /** START - Primary Tabs Navigation **/
  --tab-primary-size: 19px 18px 15px 18px;
  --tab-primary-font: 14px;
  --tab-primary-text: #333333;
  --tab-primary-default-background: transparent;
  --tab-primary-hovered-background: #f8fefb;
  --tab-primary-focused-background: #f4fdf9;
  --tab-primary-border: var(--color-button-primary);
  /** END - Primary Tabs Navigation **/

  /** START - Badges **/
  --badge-background: #d0ccf5;
  --badge-text: var(--text-color);
  /** END - Badges **/

  /** START - KPI links **/
  --kpi-link-text: #1d8880;
  /** END - KPI Links **/

  /** START - Modal **/
  --modal-header-background: #3d3868;
  --modal-close-icon-color: #ffffff;
  --modal-header-padding: 8px 16px;
  /** END - Modal **/

  /** START - Section **/
  --section-header-background: #3d3868;
  /** END - Section **/

  /** START Client Slide out **/
  --slideout-button-primary-background: #6457de;
  --slideout-button-secondary-background: #68648a;
  /** END Client Slide out **/

  /** START Checkbox Element **/
  --checkbox-text: #ffffff;
  --checkbox-default-background: #ffffff;
  --checkbox-checked-background: #262daa;
  --checkbox-disabled-background: #83828c;
  --checkbox-default-border: #333333;
  --checkbox-checked-border: #262daa;
  --checkbox-disabled-border: #7f7f7f;
  /** END Checkbox Element **/

  /** START Radio Element **/
  --radio-default-background: var(--text-color);
  --radio-checked-background: var(--color-primary);

  /** START Performance Search Element **/
  --performance-search-default-border: #beb6aa;
  --performance-search-default-background: #ffffff;
  /** END Performance Search Element **/

  /** START Bg plate **/
  --plate-bg-grey: #9e9e9e;
  --plate-bg-blue: #2da2e0;
  --plate-bg-red: #f6624b;
  --plate-bg-green: #58b9b0;
  --plate-bg-yellow: #fed759;
  --plate-bg-black: #1a1a1a;
  /** END Bg plate **/

  /** START Calendar **/
  --calendar-today-border: var(--text-color);
  --calendar-disabled-text: #999999;
  --calendar-focused-background: #e8e8e8;
  --calendar-hovered-background: #f6f6f6;
  --calendar-current-text: #ffffff;
  --calendar-current-background: #262ea9;
  --calendar-input-default-border: var(--color-primary);
  --calendar-input-disabled-border: #d0cbc3;
  --calendar-input-background: #fcfbf8;
  /** END Calendar **/

  /* START - Input Field */
  --input-default-border: var(--color-primary);
  --input-default-background: #fcfbf8;
  --input-disabled-background: #e5e5e5;
  --input-disabled-border: #beb6aa;
  /* END - Input Field */

  /* START - Toggle */
  --toggle-default-background: #ffffff;
  --toggle-checked-background: var(--color-primary);
  --toggle-track-default-background: #7f7f7f;
  --toggle-track-checked-background: #8379e5;
  --toggle-track-disabled-background: #e0e0e0;
  --toggle-switch-track-disabled-background: #bdbdbd;
  /* END - Toggle */

  /* START - Chip */
  --chip-outlined-primary-text-color: var(--text-color);
  --chip-outlined-primary-border-color: var(--color-primary);
  --chip-outlined-primary-hovered-background: #262daa0a;
  --chip-outlined-primary-disabled: #e5e5e5;
  --chip-outlined-primary-icon-color: var(--text-color);
  --chip-outlined-primary-icon-hover: var(--text-color);
  /* END - Chip */

  /* START - Form Card */
  --form-card-border: #cecdd1;
  /* END - Form Card */

  /* START - Spinner */
  --spinner-background: #999999;
  /* END - Spinner */

  /** START - Divider **/
  --divider-color: #0000001f;
  /** END - Divider **/

  /** START - Warning **/ /** TODO: these are not correct wanring colors**/
  --warning-icon-color: #eaaf6d;
  --warning-background: #fff5e6;
  --warning-icon-dark: var(--text-color);
  /** END - Warning **/

  /** START - Dialog Backdrop **/
  --dark-overlay-color: #000000b3;
  --light-overlay-color: '#e1e1e1d9';
  /** END - Dialog Backdrop **/
}