/*
 * IMPORTANT: All colors defined here must be also defined in colors-list.component.ts for proper documentation
 */

// brand
$asksuite-orange: #ff5724;

// neutral
$white: #fff;

// grey
$grey-50: #f5f7fa;
$grey-100: #e4e7eb;
$grey-150: #dbdbdb;
$grey-200: #cbd2d9;
$grey-300: #9aa5b1;
$grey-400: #7b8794;
$grey-500: #616e7c;
$grey-600: #52606d;
$grey-700: #3e4c59;
$grey-800: #2a3042;
$grey-900: #1f2933;

// yellow
$yellow-50: #fff8e2;
$yellow-200: #ffecb3;

// color
$success-green: #4baf50;
$warning-yellow: #ffc107;
$error-red: #e8453e;

// shadow
$shadow: #2a304229;

// livechat tags
$lightblue-tag: #cdf9f3;
$lavender-tag: #d4daf3;
$green-tag: #ceeeaa;
$pink-tag: #fbc5ff;
$orange-tag: #fed5c9;
$purple-tag: #ddbfe5;
$yellow-tag: #ffe0b2;
$blue-tag: #b2e5fd;
$brown-tag: #efc89c;

// communication channels
$whatsapp-green: #c6f5df;
$facebook-blue: #ceddf3;
$instagram-pink: #f3cee4;
$google-blue: #345dc8;
$telegram-blue: #34aadf;
$telephone-yellow: #fecb00;
$booking-blue: #ceddf3;
$email-yellow: #ffe5b2;
$default-grey: #d3d7da;

// backgrounds
$primary-background: $white;
$secondary-background: #eff3f8;
$hover-background: $grey-50;
$divider-background: $grey-100;

// fonts
$font-color-100: $grey-800;
$font-color-200: $grey-500;
$font-color-300: $grey-300;

// new tokens livechat

//reference
$color-b-100: #e3eaf7;
$color-b-1000: #0c2e59;
$color-b-200: #ceddf3;
$color-b-300: #a3c2f0;
$color-b-400: #7aa7eb;
$color-b-500: #4f8ce8;
$color-b-600: #276ace;
$color-b-700: #1c59b2;
$color-b-800: #174b94;
$color-b-900: #123c76;
$color-g-100: #e1f9ee;
$color-g-1000: #0c3c34;
$color-g-200: #c6f5df;
$color-g-300: #a7ecd0;
$color-g-400: #73deaa;
$color-g-500: #45ba82;
$color-g-600: #279661;
$color-g-700: #1c7d54;
$color-g-800: #176849;
$color-g-900: #12513e;
$color-l-100: #e9f9dc;
$color-l-1000: #2c4a31;
$color-l-200: #ddf6ca;
$color-l-300: #c8ecac;
$color-l-400: #a9e17f;
$color-l-500: #8ed558;
$color-l-600: #77be41;
$color-l-700: #6ba04e;
$color-l-800: #568444;
$color-l-900: #41673a;
$color-m-100: #f7deed;
$color-m-1000: #412746;
$color-m-200: #f3cee4;
$color-m-300: #ebadd2;
$color-m-400: #e490c3;
$color-m-500: #de77b5;
$color-m-600: #d75ba5;
$color-m-700: #a14884;
$color-m-800: #813e6f;
$color-m-900: #62325a;
$color-nd-0: #0d161c;
$color-nd-100: #131c24;
$color-nd-1000: #7f8b95;
$color-nd-1100: #8d97a2;
$color-nd-1200: #99a4af;
$color-nd-1300: #a6b2bc;
$color-nd-1400: #b2beca;
$color-nd-1500: #c0cbd8;
$color-nd-1600: #ccd8e5;
$color-nd-1700: #d9e5f2;
$color-nd-200: #19232a;
$color-nd-300: #253037;
$color-nd-400: #333d45;
$color-nd-500: #3f4952;
$color-nd-600: #4c5760;
$color-nd-700: #58646d;
$color-nd-800: #66707a;
$color-nd-900: #727d88;
$color-nda-0: #0c161d00;
$color-nda-100: #d9e5f207;
$color-nda-1000: #d9e5f28f;
$color-nda-1100: #d9e5f29f;
$color-nda-1200: #d9e5f2af;
$color-nda-1300: #d9e5f2bf;
$color-nda-1400: #d9e5f2cf;
$color-nda-1500: #d9e5f2df;
$color-nda-1600: #d9e5f2ef;
$color-nda-1700: #d9e5f2;
$color-nda-200: #d9e5f20f;
$color-nda-300: #d9e5f21f;
$color-nda-400: #d9e5f22f;
$color-nda-500: #d9e5f23f;
$color-nda-600: #d9e5f24f;
$color-nda-700: #d9e5f25f;
$color-nda-800: #d9e5f26f;
$color-nda-900: #d9e5f27f;
$color-nl-0: #ffffff;
$color-nl-100: #f8f8f9;
$color-nl-1000: #7b8790;
$color-nl-1100: #6c7a84;
$color-nl-1200: #5d6c77;
$color-nl-1300: #4e5f6b;
$color-nl-1400: #40525f;
$color-nl-1500: #314452;
$color-nl-1600: #223746;
$color-nl-1700: #132939;
$color-nl-200: #f0f2f3;
$color-nl-300: #e1e4e6;
$color-nl-400: #d3d7da;
$color-nl-500: #c4c9cd;
$color-nl-600: #b5bcc1;
$color-nl-700: #a6afb4;
$color-nl-800: #97a1a8;
$color-nl-900: #8a959d;
$color-nla-0: #ffffff00;
$color-nla-100: #13293907;
$color-nla-1000: #1329398f;
$color-nla-1100: #1329399f;
$color-nla-1200: #132939af;
$color-nla-1300: #132939bf;
$color-nla-1400: #132939cf;
$color-nla-1500: #132939df;
$color-nla-1600: #132939ef;
$color-nla-1700: #132939;
$color-nla-200: #1329390f;
$color-nla-300: #1329391f;
$color-nla-400: #1329392f;
$color-nla-500: #1329393f;
$color-nla-600: #1329394f;
$color-nla-700: #1329395f;
$color-nla-800: #1329396f;
$color-nla-900: #1329397f;
$color-o-100: #feeae1;
$color-o-1000: #402c29;
$color-o-200: #fdd6c3;
$color-o-300: #fdc5aa;
$color-o-400: #fea277;
$color-o-500: #f77a40;
$color-o-600: #f06424;
$color-o-700: #ca5c2b;
$color-o-800: #8d4a2e;
$color-o-900: #61392b;
$color-p-100: #ebe5ff;
$color-p-1000: #332c59;
$color-p-200: #dcd5fb;
$color-p-300: #c2b9f4;
$color-p-400: #ab9fe5;
$color-p-500: #9183d2;
$color-p-600: #7969c9;
$color-p-700: #5f4eb1;
$color-p-800: #534790;
$color-p-900: #42396f;
$color-r-100: #fbe9ed;
$color-r-1000: #331b2e;
$color-r-200: #f5c7d1;
$color-r-300: #eaa5b6;
$color-r-400: #e57d94;
$color-r-500: #df5372;
$color-r-600: #d92b50;
$color-r-700: #b02747;
$color-r-800: #87233f;
$color-r-900: #5c1f36;
$color-t-100: #e3f2f6;
$color-t-1000: #0c4153;
$color-t-200: #ceecf1;
$color-t-300: #a3e0ec;
$color-t-400: #7ad5e5;
$color-t-500: #4fc9e0;
$color-t-600: #37b2c8;
$color-t-700: #1c92ab;
$color-t-800: #17798e;
$color-t-900: #125e72;
$color-v-100: #daceda;
$color-v-1000: #15162c;
$color-v-200: #bba4bc;
$color-v-300: #9e7b9e;
$color-v-400: #7f5180;
$color-v-500: #622862;
$color-v-600: #492251;
$color-v-700: #3b1f47;
$color-v-800: #2d1b3c;
$color-v-900: #1e1832;
$color-y-100: #fff1d6;
$color-y-1000: #5b4007;
$color-y-200: #ffe5b2;
$color-y-300: #fed88c;
$color-y-400: #fbc560;
$color-y-500: #edb24a;
$color-y-600: #d79428;
$color-y-700: #be800e;
$color-y-800: #a66e0c;
$color-y-900: #775409;
$color-a-100: #f9e7e2;
$color-a-1000: $color-o-1000;
$color-a-200:  hsla(13, 84%, 87%, 1);
$color-a-300: #fbaf99;
$color-a-400: $color-o-400;
$color-a-500: $color-o-500;
$color-a-600: #ff5724;
$color-a-700: $color-o-700;
$color-a-800: #9e3d22;
$color-a-900: $color-o-900;
$color-f-1000: $color-v-1000;
$color-f-100: #e7e0e8;
$color-f-200: $color-v-200;
$color-f-300: $color-v-300;
$color-f-400: $color-v-400;
$color-f-500: $color-v-500;
$color-f-600: $color-v-600;
$color-f-700: $color-v-700;
$color-f-800: $color-v-800;
$color-f-900: $color-v-900;

$color-light-neutral-NLA200: $color-nla-200;
$color-light-neutral-NLA300: #13293921;
$color-Y200: #FFE5B2;

$message-area-scroll-gradient: linear-gradient(180deg, rgba($color-nl-0, 0.00) 0%, rgba($color-nl-0, 0.55) 50%, $color-nl-0 100%);
// livechat - tokens

//TODO: REMOVE DUPLICATE SEMANTICS
$color-texticon-brand-asksuite-contrast: $color-a-600;
$color-texticon-inverse-default: $color-nl-0;
$color-texticon-link-default: $color-b-500;

$color-elevation-surface-selected-ask: $color-a-100;
$color-elevation-surface-selected-flow: $color-f-100;
$color-elevation-surface-sunken-default: $color-nl-0;
$color-elevation-surface-sunken-hovered: $color-nl-100;
$color-elevation-surface-selected: $color-a-100;
// $color-elevation-shadow-raised: #13293933;


$color-border-default: $color-nla-300;
$color-border-brand-asksuite-subtle: $color-a-300;

$color-background-alpha-bolder-default: $color-nla-1600;
$color-background-alpha-subtlest-default: $color-nla-200;
$color-background-inverse-default: $color-nl-0;
$color-background-disabled: $color-nla-200;

$color-text-contrast: $color-nla-1500;
$color-text-subtlest: $color-nla-1000;
$color-text-disabled: #13293961;
$color-background-selected-ask-default: $color-a-200;
$color-text-inverse-contrast: $color-nl-0;

$color-icon-brand-asksuite-contrast: $color-a-600;
$color-background-accent-blue-bold-default: $color-b-800;
$color-background-accent-blue-bold-hovered: $color-b-900;
$color-background-accent-blue-bold-pressed: $color-b-1000;
$color-background-accent-blue-contrast-default: $color-b-600;
$color-background-accent-blue-contrast-hovered: $color-b-700;
$color-background-accent-blue-contrast-pressed: $color-b-800;
$color-background-accent-blue-subtle-default: $color-b-400;
$color-background-accent-blue-subtle-hovered: $color-b-500;
$color-background-accent-blue-subtle-pressed: $color-b-600;
$color-background-accent-blue-subtlest-default: $color-b-200;
$color-background-accent-blue-subtlest-hovered: $color-b-300;
$color-background-accent-blue-subtlest-pressed: $color-b-400;
$color-background-accent-green-bold-default: $color-g-800;
$color-background-accent-green-bold-hovered: $color-g-900;
$color-background-accent-green-bold-pressed: $color-g-1000;
$color-background-accent-green-contrast-default: $color-g-600;
$color-background-accent-green-contrast-hovered: $color-g-700;
$color-background-accent-green-contrast-pressed: $color-g-800;
$color-background-accent-green-subtle-default: $color-g-400;
$color-background-accent-green-subtle-hovered: $color-g-500;
$color-background-accent-green-subtle-pressed: $color-g-600;
$color-background-accent-green-subtlest-default: $color-g-200;
$color-background-accent-green-subtlest-hovered: $color-g-300;
$color-background-accent-green-subtlest-pressed: $color-g-400;
$color-background-accent-grey-bold-default: $color-nl-1400;
$color-background-accent-grey-bold-hovered: $color-nl-1600;
$color-background-accent-grey-bold-pressed: $color-nl-1700;
$color-background-accent-grey-bolder-default: $color-nl-1700;
$color-background-accent-grey-bolder-hovered: $color-nl-1500;
$color-background-accent-grey-bolder-pressed: $color-nl-1400;
$color-background-accent-grey-contrast-default: $color-nl-1000;
$color-background-accent-grey-contrast-hovered: $color-nl-1200;
$color-background-accent-grey-contrast-pressed: $color-nl-1300;
$color-background-accent-grey-disabled: $color-nl-300;
$color-background-accent-grey-inverse-default: $color-nl-0;
$color-background-accent-grey-inverse-hovered: $color-nl-200;
$color-background-accent-grey-inverse-pressed: $color-nl-300;
$color-background-accent-grey-subtle-default: $color-nl-500;
$color-background-accent-grey-subtle-hovered: $color-nl-700;
$color-background-accent-grey-subtle-pressed: $color-nl-800;
$color-background-accent-grey-subtler-default: $color-nl-400;
$color-background-accent-grey-subtler-hovered: $color-nl-400;
$color-background-accent-grey-subtler-pressed: $color-nl-500;
$color-background-accent-grey-subtlest-default: $color-nl-100;
$color-background-accent-grey-subtlest-hovered: $color-nl-300;
$color-background-accent-grey-subtlest-pressed: $color-nl-400;
$color-background-accent-lime-bold-default: $color-l-800;
$color-background-accent-lime-bold-hovered: $color-l-900;
$color-background-accent-lime-bold-pressed: $color-l-1000;
$color-background-accent-lime-contrast-default: $color-l-600;
$color-background-accent-lime-contrast-hovered: $color-l-700;
$color-background-accent-lime-contrast-pressed: $color-l-800;
$color-background-accent-lime-subtle-default: $color-l-400;
$color-background-accent-lime-subtle-hovered: $color-l-500;
$color-background-accent-lime-subtle-pressed: $color-l-600;
$color-background-accent-lime-subtlest-default: $color-l-200;
$color-background-accent-lime-subtlest-hovered: $color-l-300;
$color-background-accent-lime-subtlest-pressed: $color-l-400;
$color-background-accent-magenta-boldest-default: $color-m-1000;
$color-background-accent-magenta-boldest-hovered: $color-m-900;
$color-background-accent-magenta-boldest-pressed: $color-m-800;
$color-background-accent-magenta-bolder-default: $color-m-800;
$color-background-accent-magenta-bolder-hovered: $color-m-900;
$color-background-accent-magenta-bolder-pressed: $color-m-1000;
$color-background-accent-magenta-bold-default: $color-m-700;
$color-background-accent-magenta-bold-hovered: $color-m-800;
$color-background-accent-magenta-bold-pressed: $color-m-900;
$color-background-accent-magenta-contrast-default: $color-m-600;
$color-background-accent-magenta-contrast-hovered: $color-m-700;
$color-background-accent-magenta-contrast-pressed: $color-m-800;
$color-background-accent-magenta-subtle-default: $color-m-300;
$color-background-accent-magenta-subtle-hovered: $color-m-400;
$color-background-accent-magenta-subtle-pressed: $color-m-500;
$color-background-accent-magenta-subtler-default: $color-m-200;
$color-background-accent-magenta-subtler-hovered: $color-m-300;
$color-background-accent-magenta-subtler-pressed: $color-m-400;
$color-background-accent-magenta-subtlest-default: $color-m-100;
$color-background-accent-magenta-subtlest-hovered: $color-m-200;
$color-background-accent-magenta-subtlest-pressed: $color-m-300;
$color-background-accent-orange-bold-default: $color-o-800;
$color-background-accent-orange-bold-hovered: $color-o-900;
$color-background-accent-orange-bold-pressed: $color-o-1000;
$color-background-accent-orange-contrast-default: $color-o-600;
$color-background-accent-orange-contrast-hovered: $color-o-700;
$color-background-accent-orange-contrast-pressed: $color-o-800;
$color-background-accent-orange-subtle-default: $color-o-400;
$color-background-accent-orange-subtle-hovered: $color-o-500;
$color-background-accent-orange-subtle-pressed: $color-o-600;
$color-background-accent-orange-subtlest-default: $color-o-200;
$color-background-accent-orange-subtlest-hovered: $color-o-300;
$color-background-accent-orange-subtlest-pressed: $color-o-400;
$color-background-accent-purple-bold-default: $color-p-800;
$color-background-accent-purple-bold-hovered: $color-p-900;
$color-background-accent-purple-bold-pressed: $color-p-1000;
$color-background-accent-purple-contrast-default: $color-p-600;
$color-background-accent-purple-contrast-hovered: $color-p-700;
$color-background-accent-purple-contrast-pressed: $color-p-800;
$color-background-accent-purple-subtle-default: $color-p-400;
$color-background-accent-purple-subtle-hovered: $color-p-500;
$color-background-accent-purple-subtle-pressed: $color-p-600;
$color-background-accent-purple-subtlest-default: $color-p-200;
$color-background-accent-purple-subtlest-hovered: $color-p-300;
$color-background-accent-purple-subtlest-pressed: $color-p-400;
$color-background-accent-red-bold-default: $color-r-800;
$color-background-accent-red-bold-hovered: $color-r-900;
$color-background-accent-red-bold-pressed: $color-r-1000;
$color-background-accent-red-contrast-default: $color-r-600;
$color-background-accent-red-contrast-hovered: $color-r-700;
$color-background-accent-red-contrast-pressed: $color-r-800;
$color-background-accent-red-subtle-default: $color-r-400;
$color-background-accent-red-subtle-hovered: $color-r-500;
$color-background-accent-red-subtle-pressed: $color-r-600;
$color-background-accent-red-subtlest-default: $color-r-200;
$color-background-accent-red-subtlest-hovered: $color-r-300;
$color-background-accent-red-subtlest-pressed: $color-r-400;
$color-background-accent-teal-bold-default: $color-t-800;
$color-background-accent-teal-bold-hovered: $color-t-900;
$color-background-accent-teal-bold-pressed: $color-t-1000;
$color-background-accent-teal-contrast-default: $color-t-600;
$color-background-accent-teal-contrast-hovered: $color-t-700;
$color-background-accent-teal-contrast-pressed: $color-t-800;
$color-background-accent-teal-subtler-default: $color-t-400;
$color-background-accent-teal-subtler-hovered: $color-t-500;
$color-background-accent-teal-subtler-pressed: $color-t-600;
$color-background-accent-teal-subtlest-default: $color-t-200;
$color-background-accent-teal-subtlest-hovered: $color-t-300;
$color-background-accent-teal-subtlest-pressed: $color-t-400;
$color-background-accent-violet-bold-default: $color-v-800;
$color-background-accent-violet-bold-hovered: $color-v-900;
$color-background-accent-violet-bold-pressed: $color-v-1000;
$color-background-accent-violet-contrast-default: $color-v-600;
$color-background-accent-violet-contrast-hovered: $color-v-700;
$color-background-accent-violet-contrast-pressed: $color-v-800;
$color-background-accent-violet-subtle-default: $color-v-400;
$color-background-accent-violet-subtle-hovered: $color-v-500;
$color-background-accent-violet-subtle-pressed: $color-v-600;
$color-background-accent-violet-subtlest-default: $color-v-200;
$color-background-accent-violet-subtlest-hovered: $color-v-300;
$color-background-accent-violet-subtlest-pressed: $color-v-400;
$color-background-accent-yellow-bold-default: $color-y-800;
$color-background-accent-yellow-bold-hovered: $color-y-900;
$color-background-accent-yellow-bold-pressed: $color-y-1000;
$color-background-accent-yellow-contrast-default: $color-y-600;
$color-background-accent-yellow-contrast-hovered: $color-y-700;
$color-background-accent-yellow-contrast-pressed: $color-y-800;
$color-background-accent-yellow-subtle-default: $color-y-400;
$color-background-accent-yellow-subtle-hovered: $color-y-500;
$color-background-accent-yellow-subtle-pressed: $color-y-600;
$color-background-accent-yellow-subtlest-default: $color-y-200;
$color-background-accent-yellow-subtlest-hovered: $color-y-300;
$color-background-accent-yellow-subtlest-pressed: $color-y-400;
$color-background-alpha-bolder-default: $color-nla-1600;
$color-background-alpha-bolder-hovered: $color-nla-1400;
$color-background-alpha-bolder-pressed: $color-nla-1200;
$color-background-alpha-subtler-default: $color-nla-400;
$color-background-alpha-subtler-hovered: $color-nla-600;
$color-background-alpha-subtler-pressed: $color-nla-700;
$color-background-alpha-subtlest-default: $color-nla-200;
$color-background-alpha-subtlest-hovered: $color-nla-400;
$color-background-alpha-subtlest-pressed: $color-nla-500;
$color-background-alpha-inverter-default: $color-nl-0;
$color-background-bounding-box: $color-nla-0;
$color-background-danger-contrast-default: $color-r-600;
$color-background-danger-contrast-hovered: $color-r-700;
$color-background-danger-contrast-pressed: $color-r-800;
$color-background-disabled: $color-nla-200;
$color-background-info-contrast-enabled: $color-b-600;
$color-background-info-contrast-hovered: $color-b-700;
$color-background-info-contrast-pressed: $color-b-800;
$color-background-inverse-default: $color-nl-0;
$color-background-inverse-hovered: $color-nla-200;
$color-background-inverse-pressed: $color-nla-300;
$color-background-accent-inverse-default: $color-nl-0;
$color-background-accent-inverse-hovered: $color-nl-300;
$color-background-accent-inverse-pressed: $color-nl-500;
$color-background-success-contrast-default: $color-g-600;
$color-background-success-contrast-hovered: $color-g-700;
$color-background-success-contrast-pressed: $color-g-800;
$color-background-warning-contrast-default: $color-y-600;
$color-background-warning-contrast-hovered: $color-y-700;
$color-background-warning-contrast-pressed: $color-y-800;

$color-border-accent-blue: $color-b-600;
$color-border-accent-green: $color-g-600;
$color-border-accent-grey: $color-nl-1000;
$color-border-accent-lime: $color-l-600;
$color-border-accent-magenta-boldest: $color-m-1000;
$color-border-accent-magenta-bolder: $color-m-900;
$color-border-accent-magenta-bold: $color-m-800;
$color-border-accent-magenta-contrast: $color-m-600;
$color-border-accent-magenta-subtle: $color-m-300;
$color-border-accent-magenta-subtler: $color-m-200;
$color-border-accent-magenta-subtlest: $color-m-100;
$color-border-accent-orange: $color-o-600;
$color-border-accent-purple: $color-p-600;
$color-border-accent-red: $color-r-600;
$color-border-accent-teal: $color-t-600;
$color-border-accent-violet: $color-v-600;
$color-border-accent-yellow: $color-y-600;
$color-border-danger: $color-r-700;
$color-border-default: $color-nla-200;
$color-border-high-contrast-black-default: $color-nd-200;
$color-border-high-contrast-black-disabled: $color-nla-1000;
$color-border-high-contrast-white-default: $color-nl-0;
$color-border-high-contrast-white-disabled: $color-nda-1000;
$color-border-info: $color-b-700;
$color-border-inverse-contrast: $color-nd-0;
$color-border-inverse-disabled: $color-nda-300;
$color-border-inverse-subtle: $color-nl-400;
$color-border-link-default: $color-b-500;
$color-border-link-visited: $color-p-500;
$color-border-success: $color-g-700;
$color-border-warning: $color-y-700;

$color-divider-default: $color-nl-400;

$color-elevation-surface-primary-default: $color-nl-100;
$color-elevation-surface-default-hovered: $color-nl-200;
$color-elevation-surface-sunken-default: $color-nl-0;
$color-elevation-surface-sunken-hovered: $color-nl-100;

$color-texticon-accent-blue-bold: $color-b-800;
$color-texticon-accent-blue-contrast: $color-b-600;
$color-texticon-accent-green-bold: $color-g-800;
$color-texticon-accent-green-contrast: $color-g-600;
$color-texticon-accent-grey-bold: $color-nl-1300;
$color-texticon-accent-grey-contrast: $color-nl-1000;
$color-texticon-accent-lime-bold: $color-l-800;
$color-texticon-accent-lime-contrast: $color-l-600;
$color-texticon-accent-magenta-boldest: $color-m-1000;
$color-texticon-accent-magenta-bolder: $color-m-900;
$color-texticon-accent-magenta-bold: $color-m-800;
$color-texticon-accent-magenta-contrast: $color-m-600;
$color-texticon-accent-magenta-subtle: $color-m-400;
$color-texticon-accent-magenta-subtler: $color-m-300;
$color-texticon-accent-magenta-subtlest: $color-m-200;
$color-texticon-accent-orange-bold: $color-o-800;
$color-texticon-accent-orange-contrast: $color-o-600;
$color-texticon-accent-purple-bold: $color-p-800;
$color-texticon-accent-purple-contrast: $color-p-600;
$color-texticon-accent-red-bold: $color-r-800;
$color-texticon-accent-red-contrast: $color-r-600;
$color-texticon-accent-teal-bold: $color-t-800;
$color-texticon-accent-teal-contrast: $color-t-600;
$color-texticon-accent-violet-bold: $color-v-800;
$color-texticon-accent-violet-contrast: $color-v-600;
$color-texticon-accent-yellow-bold: $color-y-800;
$color-texticon-accent-yellow-contrast: $color-y-600;
$color-texticon-contrast: $color-nla-1700;
$color-texticon-subtle: $color-nla-1300;
$color-texticon-subtler: $color-nla-1000;
$color-texticon-subtlest: $color-nla-1000;
$color-texticon-disabled: $color-nla-700;
$color-texticon-high-contrast-black-default: $color-nla-1500;
$color-texticon-high-contrast-black-disabled: $color-nla-1000;
$color-texticon-high-contrast-white-default: $color-nl-0;
$color-texticon-high-contrast-white-disabled: $color-nda-1000;
$color-texticon-inverse-default: $color-nl-0;
$color-texticon-inverse-disabled: $color-nda-1000;
$color-texticon-link-default: $color-b-500;
$color-texticon-link-visited: $color-p-500;
$color-texticon-subtle: $color-nla-1200;
$color-texticon-subtlest: $color-nla-1000;

$color-background-brand-asksuite-boldest-default: $color-a-1000;
$color-background-brand-asksuite-boldest-hovered: $color-a-900;
$color-background-brand-asksuite-boldest-pressed: $color-a-800;
$color-background-brand-asksuite-bolder-default: $color-a-800;
$color-background-brand-asksuite-bolder-hovered: $color-a-900;
$color-background-brand-asksuite-bolder-pressed: $color-a-1000;
$color-background-brand-asksuite-bold-default: $color-a-700;
$color-background-brand-asksuite-bold-hovered: $color-a-800;
$color-background-brand-asksuite-bold-pressed: $color-a-900;
$color-background-brand-asksuite-contrast-default: $color-a-600;
$color-background-brand-asksuite-contrast-hovered: $color-a-700;
$color-background-brand-asksuite-contrast-pressed: $color-a-800;
$color-background-brand-asksuite-subtle-default: $color-a-300;
$color-background-brand-asksuite-subtle-hovered: $color-a-400;
$color-background-brand-asksuite-subtle-pressed: $color-a-500;
$color-background-brand-asksuite-subtler-default: $color-a-200;
$color-background-brand-asksuite-subtler-hovered: $color-a-300;
$color-background-brand-asksuite-subtler-pressed: $color-a-400;
$color-background-brand-asksuite-subtlest-default: $color-a-100;
$color-background-brand-asksuite-subtlest-hovered: $color-a-200;
$color-background-brand-asksuite-subtlest-pressed: $color-a-300;
$color-background-brand-flow-bold-default: $color-f-700;
$color-background-brand-flow-bold-hovered: $color-f-800;
$color-background-brand-flow-bold-pressed: $color-f-900;
$color-background-brand-flow-contrast-default: $color-f-500;
$color-background-brand-flow-contrast-hovered: $color-f-600;
$color-background-brand-flow-contrast-pressed: $color-f-700;
$color-background-brand-flow-subtler-default: $color-f-200;
$color-background-brand-flow-subtler-hovered: $color-f-300;
$color-background-brand-flow-subtler-pressed: $color-f-400;
$color-background-brand-flow-subtlest-default: $color-f-100;
$color-background-brand-flow-subtlest-hovered: $color-f-200;
$color-background-brand-flow-subtlest-pressed: $color-f-300;
$color-background-brand-sophia-boldest-default: linear-gradient(90deg, $color-background-accent-magenta-boldest-default 0%, $color-background-brand-asksuite-boldest-default 100%);
$color-background-brand-sophia-boldest-hovered: linear-gradient(90deg, $color-background-accent-magenta-boldest-hovered 0%, $color-background-brand-asksuite-boldest-hovered 100%);
$color-background-brand-sophia-boldest-pressed: linear-gradient(90deg, $color-background-accent-magenta-boldest-pressed 0%, $color-background-brand-asksuite-boldest-pressed 100%);
$color-background-brand-sophia-bolder-default: linear-gradient(90deg, $color-background-accent-magenta-bolder-default 0%, $color-background-brand-asksuite-bolder-default 100%);
$color-background-brand-sophia-bolder-hovered: linear-gradient(90deg, $color-background-accent-magenta-bolder-hovered 0%, $color-background-brand-asksuite-bolder-hovered 100%);
$color-background-brand-sophia-bolder-pressed: linear-gradient(90deg, $color-background-accent-magenta-bolder-pressed 0%, $color-background-brand-asksuite-bolder-pressed 100%);
$color-background-brand-sophia-bold-default: linear-gradient(90deg, $color-background-accent-magenta-bold-default 0%, $color-background-brand-asksuite-bold-default 100%);
$color-background-brand-sophia-bold-hovered: linear-gradient(90deg, $color-background-accent-magenta-bold-hovered 0%, $color-background-brand-asksuite-bold-hovered 100%);
$color-background-brand-sophia-bold-pressed: linear-gradient(90deg, $color-background-accent-magenta-bold-pressed 0%, $color-background-brand-asksuite-bold-pressed 100%);
$color-background-brand-sophia-contrast-default: linear-gradient(90deg, $color-background-accent-magenta-contrast-default 0%, $color-background-brand-asksuite-contrast-default 100%);
$color-background-brand-sophia-contrast-hovered: linear-gradient(90deg, $color-background-accent-magenta-contrast-hovered 0%, $color-background-brand-asksuite-contrast-hovered 100%);
$color-background-brand-sophia-contrast-pressed: linear-gradient(90deg, $color-background-accent-magenta-contrast-pressed 0%, $color-background-brand-asksuite-contrast-pressed 100%);
$color-background-brand-sophia-subtle-default: linear-gradient(90deg, $color-background-accent-magenta-subtle-default 0%, $color-background-brand-asksuite-subtle-default 100%);
$color-background-brand-sophia-subtle-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtle-hovered 0%, $color-background-brand-asksuite-subtle-hovered 100%);
$color-background-brand-sophia-subtle-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtle-pressed 0%, $color-background-brand-asksuite-subtle-pressed 100%);
$color-background-brand-sophia-subtler-default: linear-gradient(90deg, $color-background-accent-magenta-subtler-default 0%, $color-background-brand-asksuite-subtler-default 100%);
$color-background-brand-sophia-subtler-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtler-hovered 0%, $color-background-brand-asksuite-subtler-hovered 100%);
$color-background-brand-sophia-subtler-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtler-pressed 0%, $color-background-brand-asksuite-subtler-pressed 100%);
$color-background-brand-sophia-subtlest-default: linear-gradient(90deg, $color-background-accent-magenta-subtlest-default 0%, $color-background-brand-asksuite-subtlest-default 100%);
$color-background-brand-sophia-subtlest-hovered: linear-gradient(90deg, $color-background-accent-magenta-subtlest-hovered 0%, $color-background-brand-asksuite-subtlest-hovered 100%);
$color-background-brand-sophia-subtlest-pressed: linear-gradient(90deg, $color-background-accent-magenta-subtlest-pressed 0%, $color-background-brand-asksuite-subtlest-pressed 100%);

$color-background-selected-ask: $color-a-100;
$color-background-selected-flow: $color-f-100;

$color-border-brand-asksuite-boldest: $color-a-1000;
$color-border-brand-asksuite-bolder: $color-a-900;
$color-border-brand-asksuite-bold: $color-a-800;
$color-border-brand-asksuite-contrast: $color-a-600;
$color-border-brand-asksuite-subtle: $color-a-300;
$color-border-brand-asksuite-subtler: $color-a-200;
$color-border-brand-asksuite-subtlest: $color-a-100;
$color-border-brand-flow-bold: $color-f-700;
$color-border-brand-flow-bolder: $color-f-900;
$color-border-brand-flow-contrast: $color-f-500;
$color-border-brand-flow-subtle: $color-f-300;
$color-border-brand-flow-subtler: $color-f-100;
$color-border-brand-sophia-subtlest: linear-gradient(90deg, $color-border-accent-magenta-subtlest 0%, $color-border-brand-asksuite-subtlest 100%);
$color-border-brand-sophia-subtler: linear-gradient(90deg, $color-border-accent-magenta-subtler 0%, $color-border-brand-asksuite-subtler 100%);
$color-border-brand-sophia-subtle: linear-gradient(90deg, $color-border-accent-magenta-subtle 0%, $color-border-brand-asksuite-subtle 100%);
$color-border-brand-sophia-contrast: linear-gradient(90deg, $color-border-accent-magenta-contrast 0%, $color-border-brand-asksuite-contrast 100%);
$color-border-brand-sophia-bold: linear-gradient(90deg, $color-border-accent-magenta-bold 0%, $color-border-brand-asksuite-bold 100%);
$color-border-brand-sophia-bolder: linear-gradient(90deg, $color-border-accent-magenta-bolder 0%, $color-border-brand-asksuite-bolder 100%);
$color-border-brand-sophia-boldest: linear-gradient(90deg, $color-border-accent-magenta-boldest 0%, $color-border-brand-asksuite-boldest 100%);

$color-skeleton: $color-background-alpha-subtlest-default;

$color-texticon-brand-asksuite-boldest: $color-a-1000;
$color-texticon-brand-asksuite-bolder: $color-a-900;
$color-texticon-brand-asksuite-bold: $color-a-800;
$color-texticon-brand-asksuite-contrast: $color-a-600;
$color-texticon-brand-asksuite-subtle: $color-a-400;
$color-texticon-brand-asksuite-subtler: $color-a-300;
$color-texticon-brand-asksuite-subtlest: $color-a-200;
$color-texticon-brand-flow-bold: $color-f-700;
$color-texticon-brand-flow-bolder: $color-f-900;
$color-texticon-brand-flow-contrast: $color-f-500;
$color-texticon-brand-flow-subtle: $color-f-300;
$color-texticon-brand-flow-subtler: $color-f-100;
$color-texticon-brand-sophia-boldest: linear-gradient(90deg, $color-texticon-accent-magenta-bolder 0%, $color-texticon-brand-asksuite-bolder 100%);
$color-texticon-brand-sophia-bold: linear-gradient(90deg, $color-texticon-accent-magenta-bold 0%, $color-texticon-brand-asksuite-bold 100%);
$color-texticon-brand-sophia-contrast: linear-gradient(90deg, $color-texticon-accent-magenta-contrast 0%, $color-texticon-brand-asksuite-contrast 100%);
$color-texticon-brand-sophia-subtle: linear-gradient(90deg, $color-texticon-accent-magenta-subtle 0%, $color-texticon-brand-asksuite-subtle 100%);
$color-texticon-brand-sophia-subtlest: linear-gradient(90deg, $color-texticon-accent-magenta-subtlest 0%, $color-texticon-brand-asksuite-subtler 100%);
$color-texticon-danger: $color-texticon-accent-red-contrast;
$color-texticon-info: $color-texticon-accent-blue-contrast;
$color-texticon-success: $color-texticon-accent-green-contrast;
$color-texticon-warning: $color-texticon-accent-yellow-contrast;
$color-texticon-black-default: $color-nla-1500;
$color-texticon-black-disabled: $color-nla-700;
$color-skeleton: $color-nla-200;
$color-text-link-default: $color-b-500;
$color-texticon-inverse-default: $color-nl-0;
$color-texticon-danger: $color-r-600;
$color-border-white-default: $color-nl-0;
$color-background-accent-disabled: $color-nl-400;
$color-border-white-disabled: $color-nda-1000;
$color-border-black-default: $color-nd-200;
$color-border-contrast: $color-nla-1200;

@mixin theme {
  // brand
  --asksuite-orange: #{$asksuite-orange};

  // neutral
  --white: #{$white};

  // grey
  --grey-50: #{$grey-50};
  --grey-100: #{$grey-100};
  --grey-200: #{$grey-200};
  --grey-300: #{$grey-300};
  --grey-400: #{$grey-400};
  --grey-500: #{$grey-500};
  --grey-600: #{$grey-600};
  --grey-700: #{$grey-700};
  --grey-800: #{$grey-800};
  --grey-900: #{$grey-900};

  // yellow
  --yellow-50: #{$yellow-50};
  --yellow-200: #{$yellow-200};

  // color
  --success-green: #{$success-green};
  --warning-yellow: #{$warning-yellow};
  --error-red: #{$error-red};

  // shadow
  --shadow: #{$shadow};

  // livechat tags
  --lightblue-tag: #{$lightblue-tag};
  --lavender-tag: #{$lavender-tag};
  --green-tag: #{$green-tag};
  --pink-tag: #{$pink-tag};
  --orange-tag: #{$orange-tag};
  --purple-tag: #{$purple-tag};
  --yellow-tag: #{$yellow-tag};
  --blue-tag: #{$blue-tag};
  --brown-tag: #{$brown-tag};

  // communication channels
  --whatsapp-green: #{$whatsapp-green};
  --facebook-blue: #{$facebook-blue};
  --instagram-pink: #{$instagram-pink};
  --google-blue: #{$google-blue};
  --telegram-blue: #{$telegram-blue};
  --telephone-yellow: #{$telephone-yellow};
  --booking-blue: #{$booking-blue};
  --email-yellow: #{$email-yellow};
  --default-grey: #{$default-grey};

  // backgrounds
  --primary-background: #{$primary-background};
  --secondary-background: #{$secondary-background};
  --hover-background: #{$hover-background};
  --divider-background: #{$divider-background};

  // fonts
  --font-color-100: #{$grey-800};
  --font-color-200: #{$grey-500};
  --font-color-300: #{$grey-300};

  // new livechat
  --color-background-accent-grey-subtlest-default: #{$color-background-accent-grey-subtlest-default};
  --color-background-inverse-hovered: #{$color-background-inverse-hovered};
  --color-background-inverse-pressed: #{$color-background-inverse-pressed};
  --color-background-accent-inverse-default: #{$color-background-accent-inverse-default};
  --color-background-accent-inverse-hovered: #{$color-background-accent-inverse-hovered};
  --color-background-accent-inverse-pressed: #{$color-background-accent-inverse-pressed};
  --color-elevation-surface-default: #{$color-nl-0};
  --color-light-neutral-NLA200: #{$color-light-neutral-NLA200};
  --color-light-neutral-NLA300: #{$color-light-neutral-NLA300};
  --color-texticon-brand-asksuite-contrast: #{$color-texticon-brand-asksuite-contrast};
  --color-texticon-inverse-default: #{$color-texticon-inverse-default};
  --color-texticon-contrast: #{$color-texticon-contrast};
  --color-texticon-subtle: #{$color-texticon-subtle};
  --color-texticon-subtler: #{$color-texticon-subtler};
  --color-texticon-subtlest: #{$color-texticon-subtlest};
  --color-texticon-disabled: #{$color-texticon-disabled};
  --color-texticon-brand-asksuite-bold: #{$color-a-800};
  --color-elevation-surface-selected-ask: #{$color-elevation-surface-selected-ask};
  --color-elevation-surface-sunken: #{$color-nl-100};
  --color-elevation-surface-sunken-default: #{$color-elevation-surface-sunken-default};
  --color-elevation-surface-sunken-hovered: #{$color-elevation-surface-sunken-hovered};
  --color-elevation-surface-selected: #{$color-elevation-surface-selected};
  --color-elevation-shadow-raised: #{$color-nla-400};
  --color-elevation-shadow-overlay: #{$color-nla-700};
  --color-elevation-surface-overlay: #{$color-nl-0};
  --color-border-default: #{$color-border-default};
  --color-border-brand-asksuite-subtle: #{$color-border-brand-asksuite-subtle};
  --color-background-accent-grey-inverse-default: #{$color-nl-0};
  --color-background-alpha-bolder-default: #{$color-background-alpha-bolder-default};
  --color-background-brand-asksuite-contrast-default: #{$color-background-brand-asksuite-contrast-default};
  --color-background-brand-asksuite-subtler-hovered: #{$color-background-brand-asksuite-subtler-hovered};
  --color-background-alpha-subtlest-default: #{$color-background-alpha-subtlest-default};
  --color-background-alpha-subtlest-pressed: #{$color-background-alpha-subtlest-pressed};
  --color-background-inverse-default: #{$color-background-inverse-default};
  --color-background-disabled: #{$color-background-disabled};
  --color-background-skeleton: #{$color-background-disabled};
  --color-text-contrast: #{$color-text-contrast};
  --color-text-subtlest: #{$color-text-subtlest};
  --color-text-disabled: #{$color-text-disabled};
  --color-background-brand-asksuite-contrast-hovered: #{$color-background-brand-asksuite-contrast-hovered};
	--color-texticon-brand-asksuite-subtle: #{$color-texticon-brand-asksuite-subtle};
	--color-border-white-default: #{$color-border-white-default};
  --color-text-inverse-contrast: #{$color-text-inverse-contrast};
  --color-texticon-link-default: #{$color-texticon-link-default};
  --color-divider-default: #{$color-divider-default};
  --color-skeleton: #{$color-skeleton};
  --color-text-link-default: #{$color-text-link-default};
  --color-texticon-danger: #{$color-texticon-danger};
  --color-background-danger-contrast-default: #{$color-background-danger-contrast-default};
  --color-background-accent-green-subtle-default: #{$color-background-accent-green-subtle-default};
  --color-background-accent-grey-contrast-default: #{$color-background-accent-grey-contrast-default};
  --color-background-accent-grey-subtle-default: #{$color-background-accent-grey-subtle-default};
  --color-background-accent-red-subtle-default: #{$color-background-accent-red-subtle-default};
  --color-texticon-accent-red-bold: #{$color-texticon-accent-red-bold};
  --color-texticon-accent-green-bold: #{$color-texticon-accent-green-bold};
  --color-texticon-accent-yellow-bold: #{$color-texticon-accent-yellow-bold};
  --color-texticon-black-default: #{$color-nla-1500};
  --color-texticon-black-disabled: #{$color-nla-700};
  --color-background-accent-red-subtlest-default: #{$color-background-accent-red-subtlest-default};
  --color-background-accent-red-subtlest-hovered: #{$color-background-accent-red-subtlest-hovered};
  --color-background-accent-red-subtlest-pressed: #{$color-background-accent-red-subtlest-pressed};
  --color-background-accent-green-subtlest-default: #{$color-background-accent-green-subtlest-default};
  --color-background-accent-green-subtlest-hovered: #{$color-background-accent-green-subtlest-hovered};
  --color-background-accent-green-subtlest-pressed: #{$color-background-accent-green-subtlest-pressed};
  --color-background-accent-yellow-subtlest-default: #{$color-background-accent-yellow-subtlest-default};
  --color-background-accent-yellow-subtlest-hovered: #{$color-background-accent-yellow-subtlest-hovered};
  --color-background-accent-yellow-subtlest-pressed: #{$color-background-accent-yellow-subtlest-pressed};
  --color-background-accent-green-contrast-default: #{$color-background-accent-green-contrast-default};
  --color-background-accent-green-contrast-hovered: #{$color-background-accent-green-contrast-hovered};
  --color-background-accent-green-contrast-pressed: #{$color-background-accent-green-contrast-pressed};
  --color-background-accent-grey-subtlest-hovered: #{$color-background-accent-grey-subtlest-hovered};
  --color-background-accent-grey-inverse-hovered: #{$color-background-accent-grey-inverse-hovered};
  --color-background-accent-grey-inverse-pressed: #{$color-background-accent-grey-inverse-pressed};
  --color-background-accent-orange-subtle-default:#{$color-background-accent-orange-subtle-default};
  --color-background-accent-orange-subtle-hovered:#{$color-background-accent-orange-subtle-hovered};
  --color-background-accent-orange-subtle-pressed:#{$color-background-accent-orange-subtle-pressed};
  --color-background-brand-asksuite-subtler-default: #{$color-background-brand-asksuite-subtler-default};
  --color-background-warning-contrast-default: #{$color-background-warning-contrast-default};
  --color-border-matted-alpha-primary: #{$color-nl-0};
  --color-elevation-surface-primary-default: #{$color-elevation-surface-primary-default};
  --color-background-alpha-subtlest-hovered: #{$color-background-alpha-subtlest-hovered};
  --color-background-alpha-inverter-default: #{$color-background-alpha-inverter-default};
  --color-icon-brand-asksuite-contrast: #{$color-icon-brand-asksuite-contrast};
  --color-border-brand-asksuite-contrast: #{$color-border-brand-asksuite-contrast};
  --color-background-bounding-box: #{$color-background-bounding-box};
  --color-background-selected-ask: #{$color-o-200};
  --color-border-subtle: #{$color-nla-1000};
  --color-elevation-surface-hovered: #{$color-nl-200};
  --color-elevation-surface-pressed: #{$color-nl-300};


  --color-background-accent-grey-bold-default: #{$color-background-accent-grey-bold-default};
  --color-border-inverse-subtle: #{$color-border-inverse-subtle};
  --color-background-accent-grey-subtler-hovered: #{$color-background-accent-grey-subtler-hovered};
  --color-Y200: #{$color-Y200};
  --color-background-selected-ask-default: #{$color-background-selected-ask-default};
  --color-background-brand-asksuite-contrast-pressed: #{$color-background-brand-asksuite-contrast-pressed};
  --color-background-brand-asksuite-subtlest-default: #{$color-background-brand-asksuite-subtlest-default};
  --color-background-brand-asksuite-subtlest-hovered: #{$color-background-brand-asksuite-subtlest-hovered};
  --color-background-brand-asksuite-subtlest-pressed: #{$color-background-brand-asksuite-subtlest-pressed};
  --color-border-brand-asksuite-bold: #{$color-border-brand-asksuite-bold};
  --color-texticon-inverse-disabled: #{$color-texticon-inverse-disabled};
  --color-texticon-inverse-contrast: #{$color-nl-0};
  --color-background-accent-disabled: #{$color-background-accent-disabled};
  --color-border-white-disabled: #{$color-border-white-disabled};
  --color-border-black-default: #{$color-border-black-default};
  --color-border-contrast: #{$color-border-contrast};
  --color-border-inverse-contrast: #{$color-border-inverse-contrast};
  --color-texticon-success: #{$color-texticon-success};
  --color-texticon-subtler: #{$color-nla-1000};
  --color-background-accent-red-contrast-default: #{$color-background-accent-red-contrast-default};
  --color-texticon-accent-blue-contrast: #{$color-b-600};
  --color-background-accent-grey-subtler-default: #{$color-background-accent-grey-subtler-default};
  --color-background-accent-grey-bolder-default: #{$color-nl-1700};
  --color-message-area-scroll-gradient: #{$message-area-scroll-gradient};
  --color-background-accent-magenta-subtlest-default: #{$color-background-accent-magenta-subtlest-default};
  --color-background-alpha-inverse-pressed: #{$color-nla-300};

  --color-background-sophia-bold-default: #{$color-background-brand-sophia-bold-default};
  --color-background-sophia-contrast-default: #{$color-background-brand-sophia-contrast-default};
  --color-background-sophia-contrast-hovered: #{$color-background-brand-sophia-contrast-hovered};
  --color-background-sophia-contrast-pressed: #{$color-background-brand-sophia-contrast-pressed};
  --color-background-sophia-subtlest-default: #{$color-background-brand-sophia-subtlest-default};
  --color-background-sophia-subtlest-hovered: #{$color-background-brand-sophia-subtlest-hovered};
  --color-background-sophia-subtlest-pressed: #{$color-background-brand-sophia-subtlest-pressed};
  --color-background-sophia-subtler-default:  #{$color-background-brand-sophia-subtler-default};
  --color-background-sophia-subtler-hovered:  #{$color-background-brand-sophia-subtler-hovered};
  --color-background-sophia-subtler-pressed:  #{$color-background-brand-sophia-subtler-pressed};
  --color-texticon-sophia-contrast: #{$color-texticon-brand-sophia-contrast};
  --color-texticon-sophia-bold: #{$color-texticon-brand-sophia-bold};
  --color-border-sophia-subtle: #{$color-border-brand-sophia-subtle};
  --color-border-sophia-contrast: #{$color-border-brand-sophia-contrast};
  --color-border-sophia-bold: #{$color-border-brand-sophia-bold};
  --color-border-sophia-bolder: #{$color-border-brand-sophia-bolder};
  --color-background-danger-subtlest-default: #{$color-r-100};
}