:root,
.light-app-theme,
.default-app-theme {
  --primary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #cce5ff;
  --primary-selected-hover-color: #aed4fc;
  --primary-highlighted-color: #f0f7ff;
  --primary-surface-color: #eceff8;

  --primary-text-color: #323338;
  --secondary-text-color: #676879;
  --text-color-on-inverted: #ffffff;
  --text-color-on-primary: #ffffff;
  --disabled-text-color: rgba(50, 51, 56, var(--disabled-component-opacity));
  --inverted-color-background: #323338;

  --fixed-dark-color: #323338;
  --fixed-light-color: #ffffff;

  --primary-background-color: #ffffff;
  --primary-background-hover-color: rgba(103, 104, 121, 0.1);
  --secondary-background-color: #ffffff;
  --allgrey-background-color: #f6f7fb;
  --backdrop-color: rgba(41, 47, 76, 0.7);
  --ui-border-color: #c3c6d4;
  --ui-background-color: #e7e9ef;
  --ui-background-hover-color: #d8d9e0;
  --layout-border-color: #d0d4e4;

  --placeholder-color: #676879;
  --icon-color: #676879;
  --disabled-background-color: #ecedf5;
  --link-color: #1f76c2;

  --brand-color: #0073ea;
  --brand-hover-color: #0060b9;
  --brand-selected-color: #cce5ff;
  --brand-selected-hover-color: #aed4fc;

  --positive-color: #00854d;
  --positive-color-hover: #007038;
  --positive-color-selected: #bbdbc9;
  --positive-color-selected-hover: #b5cec0;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #f4c3cb;
  --negative-color-selected-hover: #ecb7bf;
  --warning-color: #ffcb00;
  --warning-color-hover: #eaaa15;
  --warning-color-selected: #fceba1;
  --warning-color-selected-hover: #f2d973;

  --color-highlight_blue: #cce5ff; /* stylelint-disable-line custom-property-pattern */
  --color-basic_blue: #0073ea; /* stylelint-disable-line custom-property-pattern */
  --color-dark_blue: #0060b9; /* stylelint-disable-line custom-property-pattern */
  --color-bazooka: #f65f7c;
  --color-snow_white: #ffffff; /* stylelint-disable-line custom-property-pattern */
  --color-riverstone_gray: #f6f7fb; /* stylelint-disable-line custom-property-pattern */
  --color-ui_grey: #dcdfec; /* stylelint-disable-line custom-property-pattern */
  --color-wolf_gray: #c3c6d4; /* stylelint-disable-line custom-property-pattern */
  --color-asphalt: #676879;
  --color-mud_black: #323338; /* stylelint-disable-line custom-property-pattern */
  --color-black: #000000;
  --color-success: #00854d;
  --color-success-hover: #007038;
  --color-success-highlight: #bbdbc9;
  --color-error: #d83a52;
  --color-error-hover: #b63546;
  --color-error-highlight: #f4c3cb;
  --color-link_color: #1f76c2; /* stylelint-disable-line custom-property-pattern */
  --color-surface: #292f4c;
  --grey-background-color: #f6f7fb;
  --text-color-on-brand: #ffffff;

  --box-shadow-xs: 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --box-shadow-small: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-medium: 0px 6px 20px rgba(0, 0, 0, 0.2);
  --box-shadow-large: 0px 15px 50px rgba(0, 0, 0, 0.3);

  --color-grass_green: #037f4c; /* stylelint-disable-line custom-property-pattern */
  --color-grass_green-hover: #116846; /* stylelint-disable-line custom-property-pattern */
  --color-grass_green-selected: #81bfa5; /* stylelint-disable-line custom-property-pattern */
  --color-done-green: #00c875;
  --color-done-green-hover: #0f9b63;
  --color-done-green-selected: #80e3ba;
  --color-done-green-selected-with-opacity: rgba(128, 227, 186, 0.6);
  --color-bright-green: #9cd326;
  --color-bright-green-hover: #7ca32b;
  --color-bright-green-selected: #cde992;
  --color-saladish: #cab641;
  --color-saladish-hover: #9d8f3e;
  --color-saladish-selected: #e4daa0;
  --color-egg_yolk: #ffcb00; /* stylelint-disable-line custom-property-pattern */
  --color-egg_yolk-hover: #eaaa15; /* stylelint-disable-line custom-property-pattern */
  --color-egg_yolk-selected: #ffe580; /* stylelint-disable-line custom-property-pattern */
  --color-egg_yolk-rgb: 255, 213, 51; /* stylelint-disable-line custom-property-pattern */
  --color-working_orange: #fdab3d; /* stylelint-disable-line custom-property-pattern */
  --color-working_orange-hover: #c0873c; /* stylelint-disable-line custom-property-pattern */
  --color-working_orange-selected: #fed59e; /* stylelint-disable-line custom-property-pattern */
  --color-dark-orange: #ff6d3b;
  --color-dark-orange-hover: #c25531;
  --color-dark-orange-selected: #ffb196;
  --color-peach: #ffadad;
  --color-peach-hover: #c2888a;
  --color-peach-selected: #ffd6d6;
  --color-sunset: #ff7575;
  --color-sunset-hover: #c26163;
  --color-sunset-selected: #ffbaba;
  --color-sunset-selected-with-opacity: rgba(255, 186, 186, 0.6);
  --color-stuck-red: #df2f4a;
  --color-stuck-red-hover: #ad3f51;
  --color-stuck-red-selected: #f0a1ad;
  --color-dark-red: #bb3354;
  --color-dark-red-hover: #92334c;
  --color-dark-red-selected: #dd99a9;
  --color-sofia_pink: #e50073; /* stylelint-disable-line custom-property-pattern */
  --color-sofia_pink-hover: #c20062; /* stylelint-disable-line custom-property-pattern */
  --color-sofia_pink-selected: #ff8ac4; /* stylelint-disable-line custom-property-pattern */
  --color-lipstick: #ff5ac4;
  --color-lipstick-hover: #c24e9a;
  --color-lipstick-selected: #fface1;
  --color-bubble: #faa1f1;
  --color-bubble-hover: #be80ba;
  --color-bubble-selected: #fcd0f8;
  --color-purple: #9d50dd;
  --color-purple-hover: #7d45b0;
  --color-purple-selected: #d0aeed;
  --color-dark_purple: #784bd1; /* stylelint-disable-line custom-property-pattern */
  --color-dark_purple-hover: #6344a3; /* stylelint-disable-line custom-property-pattern */
  --color-dark_purple-selected: #bba5e8; /* stylelint-disable-line custom-property-pattern */
  --color-berry: #7e3b8a;
  --color-berry-hover: #673971;
  --color-berry-selected: #be9dc4;
  --color-dark_indigo: #401694; /* stylelint-disable-line custom-property-pattern */
  --color-dark_indigo-hover: #3c1f78; /* stylelint-disable-line custom-property-pattern */
  --color-dark_indigo-selected: #a08bc9; /* stylelint-disable-line custom-property-pattern */
  --color-indigo: #5559df;
  --color-indigo-hover: #4b4ead;
  --color-indigo-selected: #aaacef;
  --color-navy: #225091;
  --color-navy-hover: #274776;
  --color-navy-selected: #90a7c8;
  --color-bright-blue: #579bfc;
  --color-bright-blue-hover: #4c7cc1;
  --color-bright-blue-selected: #abcdfd;
  --color-dark-blue: #007eb5;
  --color-dark-blue-hover: #0f6d97;
  --color-dark-blue-selected: #80c2df;
  --color-aquamarine: #4eccc6;
  --color-aquamarine-hover: #469e9b;
  --color-aquamarine-selected: #a6e5e2;
  --color-chili-blue: #66ccff;
  --color-chili-blue-hover: #569ec3;
  --color-chili-blue-selected: #b2e5ff;
  --color-river: #74afcc;
  --color-river-hover: #588095;
  --color-river-selected: #b3d0de;
  --color-winter: #9aadbd;
  --color-winter-hover: #7b8895;
  --color-winter-selected: #ccd6de;
  --color-explosive: #c4c4c4;
  --color-explosive-hover: #98999a;
  --color-explosive-selected: #e1e1e1;
  --color-american_gray: #757575; /* stylelint-disable-line custom-property-pattern */
  --color-american_gray-hover: #69696a; /* stylelint-disable-line custom-property-pattern */
  --color-american_gray-selected: #bfbfbf; /* stylelint-disable-line custom-property-pattern */
  --color-blackish: #333333;
  --color-blackish-hover: #222222;
  --color-blackish-selected: #999999;
  --color-brown: #7f5347;
  --color-brown-hover: #684943;
  --color-brown-selected: #bfa9a3;
  --color-orchid: #e484bd;
  --color-orchid-hover: #ae5d8d;
  --color-orchid-selected: #ecbad7;
  --color-tan: #bca58a;
  --color-tan-hover: #8a7862;
  --color-tan-selected: #d6cabc;
  --color-sky: #a1e3f6;
  --color-sky-hover: #81b6c5;
  --color-sky-selected: #d0f1fa;
  --color-coffee: #cd9282;
  --color-coffee-hover: #976758;
  --color-coffee-selected: #dec0b7;
  --color-royal: #216edf;
  --color-royal-hover: #225eb7;
  --color-royal-selected: #95bbf2;
  --color-teal: #175a63;
  --color-teal-hover: #12484f;
  --color-teal-selected: #8bacb1;
  --color-lavender: #bda8f9;
  --color-lavender-hover: #9786c7;
  --color-lavender-selected: #ded4fc;
  --color-steel: #a9bee8;
  --color-steel-hover: #8798ba;
  --color-steel-selected: #d4dff4;
  --color-lilac: #9d99b9;
  --color-lilac-hover: #7e7a94;
  --color-lilac-selected: #ceccdc;
  --color-pecan: #563e3e;
  --color-pecan-hover: #453232;
  --color-pecan-selected: #ab9f9f;
  /*

  LEGACY VALUES

  These values are not within Vibe's UI definitions and are on a deprecation path.
  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.

  */
  --color-dark_marble: #f1f1f1; /* stylelint-disable-line custom-property-pattern */
  --color-marble: #f7f7f7;
  --color-gainsboro: #e1e1e1;
  --color-extra_light_gray: #edeef0; /* stylelint-disable-line custom-property-pattern */
  --color-glitter: #d9f0ff;
  --color-ultra_light_gray: #ebebeb; /* stylelint-disable-line custom-property-pattern */
  --color-very_light_gray: #a1a1a1; /* stylelint-disable-line custom-property-pattern */
  --color-jaco_gray: #9699a6; /* stylelint-disable-line custom-property-pattern */
  --color-storm_gray: #6b6d77; /* stylelint-disable-line custom-property-pattern */
  --color-trolley-grey: #757575;
  --color-basic_light_blue: #c7e6fa; /* stylelint-disable-line custom-property-pattern */
  --color-light_blue: #61caf7; /* stylelint-disable-line custom-property-pattern */
  --color-turquoise: #66ccff;
  --color-aqua: #00d1d1;
  --color-live_blue: #009aff; /* stylelint-disable-line custom-property-pattern */
  --color-jeans: #597bfc;
  --color-burned_eggplant: #181d37; /* stylelint-disable-line custom-property-pattern */
  --color-light-pink: #ff5ac4;
  --color-dark-pink: #ff007f;
  --color-dark_red: #bb3354; /* stylelint-disable-line custom-property-pattern */
  --color-yellow: #ffcb00;
  --color-mustered: #cab641;
  --color-orange: #fdab3d;
  --color-lime-green: #9cd326;
  --color-jade: #03c875;
  --color-green-haze: #00a359;
  --color-grass-green: #037f4c;
  --color-amethyst: #9d50dd;
  --color-dark-purple: #784bd1;
  --color-blue_links: #007eb5; /* stylelint-disable-line custom-property-pattern */
  --color-blue-links: #007eb5;
  --color-private: #f65f7c;
  --color-public: #009aff;
  --color-board_views_grey: #6e6f8f; /* stylelint-disable-line custom-property-pattern */
  --color-board_views_grey_hover: #b2b3d0; /* stylelint-disable-line custom-property-pattern */
  --color-board_views_blue: #1c1f3b; /* stylelint-disable-line custom-property-pattern */
  --color-board_views_blue_secondary: #363a52; /* stylelint-disable-line custom-property-pattern */
  --color-border_light_gray: #f5f6f8; /* stylelint-disable-line custom-property-pattern */
  --color-brand-blue: #00a9ff;
  --color-brand-charcoal: #2b2c5c;
  --color-brand-gold: #ffcc00;
  --color-brand-green: #11dd80;
  --color-brand-iris: #595ad4;
  --color-brand-light-blue: #00cff4;
  --color-brand-malachite: #00cd6f;
  --color-brand-purple: #a358d0;
  --color-brand-red: #f74875;
  --color-deadline_upcoming_indication: #5d6387; /* stylelint-disable-line custom-property-pattern */
  --color-default_group_color: #579bfc; /* stylelint-disable-line custom-property-pattern */
  --color-form_btn_hover: #0083d9; /* stylelint-disable-line custom-property-pattern */
  --color-form_purple: #575c96; /* stylelint-disable-line custom-property-pattern */
  --color-highlight: #dff0ff;
  --color-green_shadow: #00c875; /* stylelint-disable-line custom-property-pattern */
  --color-green-shadow: #00c875;
  --color-red_shadow: #df2f4a; /* stylelint-disable-line custom-property-pattern */
  --color-red-shadow: #df2f4a;
  --color-pulse_bg: #f0f0f0; /* stylelint-disable-line custom-property-pattern */
  --color-pulse_text_color: #333333; /* stylelint-disable-line custom-property-pattern */
  --color-placholder_gray: #d8d8d8; /* stylelint-disable-line custom-property-pattern */
  --color-placeholder_light_gray: #efefef; /* stylelint-disable-line custom-property-pattern */
  --color-excel-green: #207245;
  --color-media-blue: #2ea2e9;
  --color-pdf-red: #bb0706;
  --color-ppt-orange: #d64e2a;
  --color-word-blue: #2a5699;
  --color-zip-orange: #e4901c;
  --color-like_red: #fb275d; /* stylelint-disable-line custom-property-pattern */
  --color-scrollbar_gray: #b2b2b2; /* stylelint-disable-line custom-property-pattern */
  --color-timeline_grid_blue: #454662; /* stylelint-disable-line custom-property-pattern */
  --color-timeline_blue: #1c1f3b; /* stylelint-disable-line custom-property-pattern */
  --color-highlight_blue-rgb: 204, 229, 255; /* stylelint-disable-line custom-property-pattern */
  --color-snow_white-with-opacity: rgba(255, 255, 255, 0.4); /* stylelint-disable-line custom-property-pattern */
  --color-wolf_gray-with-opacity: rgba(195, 198, 212, 0.1); /* stylelint-disable-line custom-property-pattern */
  --color-asphalt-with-opacity: rgba(103, 104, 121, 0.1);
  --primary-on-secondary-color: #0073ea;
  --primary-hover-on-secondary-color: #0060b9;
  --primary-selected-color-rgb: 204, 229, 255;
  --primary-selected-on-secondary-color: #cce5ff;
  --primary-text-on-secondary-color: #323338;
  --text-color-on-primary-with-opacity: rgba(255, 255, 255, 0.4);
  --secondary-text-on-secondary-color: #676879;
  --placeholder-color-with-opacity: rgba(103, 104, 121, 0.1);
  --placeholder-on-secondary-color: #676879;
  --icon-on-secondary-color: #676879;
  --link-on-secondary-color: #1f76c2;
  --label-background-color: #cce5ff;
  --label-background-on-secondary-color: #cce5ff;
  --primary-background-color-rgb: 255, 255, 255;
  --primary-background-hover-on-secondary-color: #dcdfec;
  --modal-background-color: #ffffff;
  --secondary-background-color-rgb: 255, 255, 255;
  --disabled-background-on-secondary-color: #ecedf5;
  --disabled-text-on-secondary-color: rgba(50, 51, 56, var(--disabled-component-opacity));
  --ui-border-on-secondary-color: #c3c6d4;
  --layout-border-on-secondary-color: #d0d4e4;
  --dark-background-color: #f6f7fb;
  --dark-background-on-secondary-color: #f6f7fb;
  --dialog-background-color: #ffffff;
  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);
}