/**
 * Do not edit directly. It is auto-generated file
 */

:root {
  --border-width-button: 1px;
  --border-width-checkbox: 1px;
  --border-width-input: 1px;
  --padding-button-small: 0px;
  --padding-button-medium: 0px;
  --padding-button-large: 0px;
  --padding-input-small-default: 6px;
  --padding-input-small-error: 6px;
  --padding-input-small-success: 6px;
  --padding-input-medium-default: 9px;
  --padding-input-medium-error: 9px;
  --padding-input-medium-success: 9px;
  --border-radius-small: 2px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  --border-radius-full: 50px;
  --border-radius-pill: 999px;
  --border-radius-big: 8px;
  --border-radius-button: 6px;
  --border-radius-checkbox: 6px;
  --border-radius-input: 6px;
  --font-size-button-small: 12px;
  --font-size-button-medium: 12px;
  --font-size-button-large: 13px;
  --font-size-checkbox-label: 13px;
  --font-size-headline-hero: 46px;
  --font-size-headline-1: 30px;
  --font-size-headline-2: 20px;
  --font-size-headline-3: 16px;
  --font-size-headline-4: 13px;
  --font-size-headline-5: 10px;
  --font-size-body-large: 16px;
  --font-size-body-medium: 13px;
  --font-size-body-small: 11px;
  --font-size-paragraph-regular: 13px;
  --font-size-paragraph-small: 11px;
  --font-size-button-label: 13px;
  --font-size-field-label: 11px;
  --font-size-badge-label: 10px;
  --font-size-platform-tag-label: 8px;
  --font-size-hotkey-label: 11px;
  --font-size-code-large: 16px;
  --font-size-code-medium: 13px;
  --font-size-code-small: 11px;
  --font-size-table-header: 11px;
  --font-size-table-numbers: 13px;
  --font-size-helper-regular: 10px;
  --font-size-label: 11px;
  --font-size-anchor-default: 13px;
  --font-size-anchor-small: 11px;
  --font-size-anchor-medium: 13px;
  --font-size-anchor-large: 16px;
  --font-size-input-text: 13px;
  --font-size-input-title: 11px;
  --font-weight-button-small: 700;
  --font-weight-button-medium: 700;
  --font-weight-button-large: 700;
  --font-weight-bold: 700;
  --font-weight-headline-hero: 700;
  --font-weight-headline-1: 500;
  --font-weight-headline-2: 500;
  --font-weight-headline-3: 500;
  --font-weight-headline-4: 700;
  --font-weight-headline-5: 700;
  --font-weight-body-large: 400;
  --font-weight-body-medium: 400;
  --font-weight-body-small: 400;
  --font-weight-paragraph-regular: 400;
  --font-weight-paragraph-bold: 700;
  --font-weight-paragraph-small: 400;
  --font-weight-button-label: 600;
  --font-weight-field-label: 600;
  --font-weight-badge-label: 700;
  --font-weight-platform-tag-label: 800;
  --font-weight-hotkey-label: 700;
  --font-weight-code-large: 400;
  --font-weight-code-medium: 400;
  --font-weight-code-small: 400;
  --font-weight-table-header: 400;
  --font-weight-table-numbers: 400;
  --font-weight-helper-regular: 400;
  --font-weight-helper-bold: 700;
  --font-weight-label: 400;
  --line-height-button-small: 18px;
  --line-height-button-medium: 18px;
  --line-height-button-large: 18px;
  --line-height-checkbox-label: 18px;
  --line-height-headline-hero: 60px;
  --line-height-headline-1: 42px;
  --line-height-headline-2: 30px;
  --line-height-headline-3: 24px;
  --line-height-headline-4: 18px;
  --line-height-headline-5: 12px;
  --line-height-body-large: 24px;
  --line-height-body-medium: 18px;
  --line-height-body-small: 16px;
  --line-height-paragraph-regular: 18px;
  --line-height-paragraph-small: 16px;
  --line-height-button-label: 18px;
  --line-height-field-label: 18px;
  --line-height-badge-label: 12px;
  --line-height-platform-tag-label: 12px;
  --line-height-hotkey-label: 18px;
  --line-height-code-large: 24px;
  --line-height-code-medium: 18px;
  --line-height-code-regular: 18px;
  --line-height-code-small: 16px;
  --line-height-table-header: 18px;
  --line-height-table-numbers: 18px;
  --line-height-helper-regular: 12px;
  --line-height-anchor-default: 18px;
  --line-height-anchor-small: 16px;
  --line-height-anchor-medium: 18px;
  --line-height-anchor-large: 24px;
  --line-height-label: 16px;
  --line-height-input-text: 18px;
  --line-height-input-title: 16px;
  --checkbox-icon: 16px;
  --letter-spacing-headline-hero: -0.022px;
  --letter-spacing-headline-1: -0.021px;
  --letter-spacing-headline-2: -0.017px;
  --letter-spacing-headline-3: -0.011px;
  --letter-spacing-headline-4: -0.0025px;
  --letter-spacing-headline-5: 0.01px;
  --letter-spacing-body-large: -0.0011px;
  --letter-spacing-body-small: 0.005px;
  --letter-spacing-paragraph-regular: -0.0025px;
  --letter-spacing-paragraph-small: 0.005px;
  --letter-spacing-field-label: 0.005px;
  --letter-spacing-badge-label: 0.01px;
  --letter-spacing-platform-tag-label: 0.4px;
  --letter-spacing-hotkey-label: 0.005px;
  --letter-spacing-table-header: 0.005px;
  --letter-spacing-helper-regular: 0.01px;
  --letter-spacing-label: 0.005px;
  --main-navigation-width: 60px;
  --expanded-main-navigation-width: 210px;
  --sub-navigation-width: 240px;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 36px;
  --space-9: 48px;
  --space-10: 60px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 120px;
  --space-xxs: 3px;
  --space-xs: 6px;
  --space-s: 12px;
  --space-m: 18px;
  --space-l: 24px;
  --space-xl: 36px;
  --space-xxl: 48px;
  --font-family-code: 'Noto Sans Mono', monospace;
  --font-family: 'Inter', 'Noto Sans Arabic', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-pdf: 'Inter', 'Noto Color Emoji', 'Noto Sans Arabic', 'Noto Sans Mono', sans-serif;
  --font-feature-settings-case-alternates: 'case';
  --font-feature-settings-slashed-zero: 'zero';
  --font-feature-settings-contextual-alternates: 'calt';
  --font-feature-settings-tabular-numbers: 'tnum';
  --font-feature-settings-character-variants: 'cv08';
  --motion-duration-instant: 0ms;
  --motion-duration-quick-1: 80ms;
  --motion-duration-quick-2: 120ms;
  --motion-duration-moderate-1: 180ms;
  --motion-duration-moderate-2: 270ms;
  --motion-easing-ease: ease;
  --motion-easing-entry: ease-out;
  --motion-easing-exit: ease-in;
  --motion-easing-linear: linear;
  --motion-slide-up: translateY(-12px);
  --motion-slide-down: translateY(12px);
  --zindex-level-app: 10;
  --zindex-level-main-menu: 20;
  --zindex-level-dialog-1: 30;
  --zindex-level-dropdown-1: 40;
  --zindex-level-dialog-2: 50;
  --zindex-level-dropdown-2: 60;
  --zindex-level-dialog-3: 70;
  --zindex-level-dropdown-3: 80;
  --zindex-level-dialog-4: 90;
  --zindex-level-dropdown-4: 100;
  --zindex-level-tooltip: 666;
}

:root:not([data-theme]), [data-theme='light'] {
  --color-anchor-default: #003beb;
  --color-anchor-light: #f9f9fa;
  --color-anchor-dark: #24242b;
  --color-anchor-underline-default: rgba(0, 59, 235, 0.14);
  --color-anchor-underline-light: rgba(249, 249, 250, 0.14);
  --color-anchor-underline-dark: rgba(36, 36, 43, 0.14);
  --color-anchor-underline-default-hover: #003beb;
  --color-anchor-underline-light-hover: #f9f9fa;
  --color-anchor-underline-dark-hover: #24242b;
  --color-white-0: rgba(255, 255, 255, 0);
  --color-white-10: rgba(255, 255, 255, 0.05);
  --color-white-20: rgba(255, 255, 255, 0.1);
  --color-white-30: rgba(255, 255, 255, 0.2);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-50: rgba(255, 255, 255, 0.7);
  --color-white-60: rgba(255, 255, 255, 0.8);
  --color-white-70: rgba(255, 255, 255, 0.85);
  --color-white-80: rgba(255, 255, 255, 0.9);
  --color-white-90: rgba(255, 255, 255, 0.95);
  --color-white-100: #ffffff;
  --color-black-0: rgba(0, 0, 0, 0);
  --color-black-10: rgba(0, 0, 0, 0.05);
  --color-black-20: rgba(0, 0, 0, 0.1);
  --color-black-30: rgba(0, 0, 0, 0.2);
  --color-black-40: rgba(0, 0, 0, 0.3);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.7);
  --color-black-70: rgba(0, 0, 0, 0.8);
  --color-black-80: rgba(0, 0, 0, 0.9);
  --color-black-90: rgba(0, 0, 0, 0.95);
  --color-black-100: #000000;
  --color-gray-10: #f9f9fa;
  --color-gray-20: #f3f3f5;
  --color-gray-30: #e7e7e7;
  --color-gray-40: #cececf;
  --color-gray-50: #b5b5b7;
  --color-gray-60: #9d9da0;
  --color-gray-70: #858589;
  --color-gray-80: #6d6d71;
  --color-gray-90: #505057;
  --color-gray-100: #37373e;
  --color-gray-110: #24242b;
  --color-gray-120: #111114;
  --color-red-5: #fef2f2;
  --color-red-10: #fee2e2;
  --color-red-20: #fdcbcb;
  --color-red-30: #fba6a6;
  --color-red-40: #f67373;
  --color-red-50: #ed4646;
  --color-red-60: #da2828;
  --color-red-70: #c52020;
  --color-red-80: #981c1c;
  --color-red-90: #7e1e1e;
  --color-red-100: #440b0b;
  --color-orange-5: #fff4ed;
  --color-orange-10: #ffe7d4;
  --color-orange-20: #ffcaa8;
  --color-orange-30: #ffa570;
  --color-orange-40: #ff7437;
  --color-orange-50: #ff5a1f;
  --color-orange-60: #f03406;
  --color-orange-70: #c72307;
  --color-orange-80: #9e1d0e;
  --color-orange-90: #7f1c0f;
  --color-orange-100: #450a05;
  --color-yellow-5: #fdfbe9;
  --color-yellow-10: #fcf6c5;
  --color-yellow-20: #faeb8e;
  --color-yellow-30: #f6d84e;
  --color-yellow-40: #f1c21b;
  --color-yellow-50: #e1ab11;
  --color-yellow-60: #c2840c;
  --color-yellow-70: #9b5e0d;
  --color-yellow-80: #804b13;
  --color-yellow-90: #6d3d16;
  --color-yellow-100: #401f08;
  --color-pear-5: #fdfde8;
  --color-pear-10: #f8facd;
  --color-pear-20: #eff4a2;
  --color-pear-30: #e0eb6b;
  --color-pear-40: #d0df49;
  --color-pear-50: #b0c31f;
  --color-pear-60: #899b15;
  --color-pear-70: #677615;
  --color-pear-80: #525e16;
  --color-pear-90: #465017;
  --color-pear-100: #242c07;
  --color-lime-5: #f7fee7;
  --color-lime-10: #ecfccb;
  --color-lime-20: #d9f99d;
  --color-lime-30: #bef264;
  --color-lime-40: #a3e635;
  --color-lime-50: #84cc16;
  --color-lime-60: #65a30d;
  --color-lime-70: #4d7c0f;
  --color-lime-80: #3f6212;
  --color-lime-90: #365314;
  --color-lime-100: #1a2e05;
  --color-green-5: #f0fdf3;
  --color-green-10: #dcfce4;
  --color-green-20: #baf8cb;
  --color-green-30: #85f0a3;
  --color-green-40: #48e073;
  --color-green-50: #20c54f;
  --color-green-60: #15a43e;
  --color-green-70: #148134;
  --color-green-80: #15662d;
  --color-green-90: #135428;
  --color-green-100: #052e13;
  --color-teal-5: #effefc;
  --color-teal-10: #c8fff7;
  --color-teal-20: #90ffee;
  --color-teal-30: #51f7e5;
  --color-teal-40: #1de4d5;
  --color-teal-50: #05c7bb;
  --color-teal-60: #00a19a;
  --color-teal-70: #05807c;
  --color-teal-80: #0a6563;
  --color-teal-90: #0e5352;
  --color-teal-100: #003233;
  --color-ocean-5: #f0faff;
  --color-ocean-10: #e1f4fd;
  --color-ocean-20: #bceafb;
  --color-ocean-30: #81dbf8;
  --color-ocean-40: #42c9f2;
  --color-ocean-50: #15b1e2;
  --color-ocean-60: #0890c1;
  --color-ocean-70: #08739c;
  --color-ocean-80: #0b6181;
  --color-ocean-90: #0f506b;
  --color-ocean-100: #0a3447;
  --color-sky-5: #eff7ff;
  --color-sky-10: #e3f1ff;
  --color-sky-20: #b8e0ff;
  --color-sky-30: #79c7ff;
  --color-sky-40: #32abfe;
  --color-sky-50: #0791f0;
  --color-sky-60: #0071ce;
  --color-sky-70: #005aa6;
  --color-sky-80: #034d89;
  --color-sky-90: #094171;
  --color-sky-100: #06284b;
  --color-blue-5: #e8f7ff;
  --color-blue-10: #d5efff;
  --color-blue-20: #b3dfff;
  --color-blue-30: #85c7ff;
  --color-blue-40: #56a0ff;
  --color-blue-50: #2f79ff;
  --color-blue-60: #0c4bff;
  --color-blue-70: #003beb;
  --color-blue-80: #063bcd;
  --color-blue-90: #103a9f;
  --color-blue-100: #0a205c;
  --color-indigo-5: #f9f5ff;
  --color-indigo-10: #e8e9ff;
  --color-indigo-20: #d5d9ff;
  --color-indigo-30: #b3b8ff;
  --color-indigo-40: #888bfd;
  --color-indigo-50: #6666ff;
  --color-indigo-60: #4835f2;
  --color-indigo-70: #3923de;
  --color-indigo-80: #2f1dba;
  --color-indigo-90: #291a98;
  --color-indigo-100: #000066;
  --color-violet-5: #f9f5ff;
  --color-violet-10: #f0e7ff;
  --color-violet-20: #e4d4ff;
  --color-violet-30: #cfb2ff;
  --color-violet-40: #b180ff;
  --color-violet-50: #8a3ffc;
  --color-violet-60: #7c2df0;
  --color-violet-70: #691cd4;
  --color-violet-80: #5a1dac;
  --color-violet-90: #4b198a;
  --color-violet-100: #300467;
  --color-fuchsia-5: #fdf4ff;
  --color-fuchsia-10: #fae8ff;
  --color-fuchsia-20: #f5d0fe;
  --color-fuchsia-30: #f0abfc;
  --color-fuchsia-40: #e879f9;
  --color-fuchsia-50: #d946ef;
  --color-fuchsia-60: #c026d3;
  --color-fuchsia-70: #a21caf;
  --color-fuchsia-80: #86198f;
  --color-fuchsia-90: #701a75;
  --color-fuchsia-100: #4a044e;
  --color-pink-5: #fdf2f8;
  --color-pink-10: #fce7f3;
  --color-pink-20: #fbcfe8;
  --color-pink-30: #f9a8d4;
  --color-pink-40: #f472b6;
  --color-pink-50: #ec4899;
  --color-pink-60: #db2777;
  --color-pink-70: #be185d;
  --color-pink-80: #9d174d;
  --color-pink-90: #831843;
  --color-pink-100: #500724;
  --color-sand-5: #f8f6f4;
  --color-sand-10: #ede9e3;
  --color-sand-20: #ded6ca;
  --color-sand-30: #c8baa9;
  --color-sand-40: #b19b86;
  --color-sand-50: #a1856e;
  --color-sand-60: #947562;
  --color-sand-70: #7c6052;
  --color-sand-80: #664f46;
  --color-sand-90: #53423b;
  --color-sand-100: #2c221e;
  --color-brown-5: #f7f4ef;
  --color-brown-10: #ebe3d6;
  --color-brown-20: #d9c8af;
  --color-brown-30: #c2a682;
  --color-brown-40: #b0895f;
  --color-brown-50: #a17751;
  --color-brown-60: #8a5f44;
  --color-brown-70: #6f4a39;
  --color-brown-80: #5f3f34;
  --color-brown-90: #4e342e;
  --color-brown-100: #2f1d19;
  --color-on-layer-primary: #24242b;
  --color-on-layer-secondary: #505057;
  --color-on-layer-tertiary: #9d9da0;
  --color-on-layer-inverse: #f9f9fa;
  --color-on-layer-interactive: #003beb;
  --color-on-layer-warning: #9b5e0d;
  --color-on-layer-danger: #da2828;
  --color-on-layer-success: #148134;
  --color-on-layer-recent: #691cd4;
  --color-layer-level-0: #f3f3f5;
  --color-layer-level-1: #ffffff;
  --color-layer-level-2: #f3f3f5;
  --color-layer-level-3: #e7e7e7;
  --color-layer-hover: rgba(0, 0, 0, 0.05);
  --color-layer-active: rgba(0, 0, 0, 0.1);
  --color-layer-info: #d5efff;
  --color-layer-warning: #fcf6c5;
  --color-layer-danger: #fee2e2;
  --color-layer-danger-emphasis: #da2828;
  --color-layer-success: #dcfce4;
  --color-layer-success-emphasis: #15a43e;
  --color-layer-recent: #f0e7ff;
  --color-layer-main-navigation: #111114;
  --color-layer-highlight: #f6d84e;
  --color-message-incoming: #e7e7e7;
  --color-message-outgoing: #b3dfff;
  --color-border-default: rgba(0, 0, 0, 0.2);
  --color-border-primary: rgba(0, 0, 0, 0.2);
  --color-border-secondary: rgba(0, 0, 0, 0.1);
  --color-border-inverse: rgba(255, 255, 255, 0.2);
  --color-border-info: #56a0ff;
  --color-border-info-emphasis: #003beb;
  --color-border-warning: #f6d84e;
  --color-border-warning-emphasis: #f1c21b;
  --color-border-danger: #f67373;
  --color-border-danger-emphasis: #da2828;
  --color-border-success: #85f0a3;
  --color-border-success-emphasis: #20c54f;
  --color-border-recent: #b180ff;
  --color-border-recent-emphasis: #7c2df0;
  --color-border-focus-button: #24242b;
  --color-border-focus-ring: #003beb;
  --color-border-focus-ring-inner: rgba(255, 255, 255, 0.95);
  --color-border-focus-ring-inverse: #85c7ff;
  --color-border-focus-ring-inner-inverse: rgba(0, 0, 0, 0.7);
  --color-border-focus-form: #003beb;
  --color-overlay-default: rgba(0, 0, 0, 0.7);
  --color-overlay-inverse: rgba(255, 255, 255, 0.8);
  --color-link-primary: #003beb;
  --color-link-secondary: #24242b;
  --color-link-tertiary: #505057;
  --color-link-inverse: #f9f9fa;
  --color-link-visited: #691cd4;
  --color-link-underline-primary: rgba(0, 59, 235, 0.4);
  --color-link-underline-secondary: rgba(36, 36, 43, 0.4);
  --color-link-underline-tertiary: rgba(80, 80, 87, 0.4);
  --color-link-underline-inverse: rgba(249, 249, 250, 0.4);
  --color-link-underline-primary-hover: #003beb;
  --color-link-underline-secondary-hover: #24242b;
  --color-link-underline-tertiary-hover: #505057;
  --color-link-underline-inverse-hover: #f9f9fa;
  --color-button-primary: #0c4bff;
  --color-button-light: rgba(255, 255, 255, 0.7);
  --color-button-ghost: rgba(255, 255, 255, 0);
  --color-button-invisible: rgba(255, 255, 255, 0);
  --color-button-inverse: rgba(255, 255, 255, 0);
  --color-button-request: #15a43e;
  --color-button-danger: #da2828;
  --color-button-purchase: #f6d84e;
  --color-button-ghost-hover: rgba(0, 0, 0, 0.05);
  --color-button-invisible-hover: rgba(0, 0, 0, 0.05);
  --color-button-inverse-hover: rgba(255, 255, 255, 0.05);
  --color-button-ghost-active: rgba(0, 0, 0, 0.1);
  --color-button-invisible-active: rgba(0, 0, 0, 0.1);
  --color-button-invisible-applied: rgba(208, 226, 255, 0.5);
  --color-button-inverse-active: rgba(255, 255, 255, 0.1);
  --color-tooltip-default: #24242b;
  --color-tooltip-guide: #0791f0;
  --color-tooltip-caveat: #f6d84e;
  --color-tooltip-danger: #da2828;
  --color-table-row-odd: #ffffff;
  --color-table-row-even: #f9f9fa;
  --color-table-row-hover: #d5efff;
  --color-table-row-hover-border: #85c7ff;
  --color-platform-facebook: #0866ff;
  --color-platform-instagram: #d73676;
  --color-platform-twitter: #242e36;
  --color-platform-x: #242e36;
  --color-platform-x-adaptive: #242e36;
  --color-platform-youtube: #ff0000;
  --color-platform-pinterest: #bb0f23;
  --color-platform-linkedin: #1078b3;
  --color-platform-google-analytics: #f57e02;
  --color-platform-google-my-business: #4c8bf5;
  --color-platform-vkontakte: #4e76a1;
  --color-platform-snapchat: #e6e300;
  --color-platform-tiktok: #000000;
  --color-platform-tiktok-adaptive: #000000;
  --color-platform-tiktok-splash: #0bd0ca;
  --color-platform-salesforce: #00a1e0;
  --color-platform-news: #354da3;
  --color-platform-forum: #dd470f;
  --color-platform-blog: #4b3827;
  --color-platform-web: #f57e02;
  --color-platform-audience: #6e50dc;
  --color-platform-reddit: #ff5700;
  --color-platform-whatsapp: #25d366;
  --color-platform-threads: #000000;
  --color-platform-threads-adaptive: #000000;
  --color-platform-threads-purple: #9c27b0;
  --color-platform-organic: #406dd3;
  --color-platform-paid: #26bca6;
  --color-platform-app-bundle: #0e1e3a;
  --color-platform-app-bundle-adaptive: #0e1e3a;
  --color-platform-pangle: #d74538;
  --color-chart-indigo: #3f51b5;
  --color-chart-blue: #2196f3;
  --color-chart-cyan: #00bcd4;
  --color-chart-teal: #009688;
  --color-chart-green: #4caf50;
  --color-chart-light-green: #8bc34a;
  --color-chart-lime: #cddc39;
  --color-chart-yellow: #ffcc02;
  --color-chart-orange: #ff9800;
  --color-chart-red: #f43636;
  --color-chart-deep-red: #b01e1e;
  --color-chart-brown: #795548;
  --color-chart-deep-pink: #e91e63;
  --color-chart-pink: #cd3497;
  --color-chart-purple: #9c27b0;
  --color-chart-deep-purple: #622cc2;
  --color-chart-gray: #9f9f9f;
  --color-chart-black: #000000;
  --color-chart-white: #ffffff;
  --color-on-operator-if: #063bcd;
  --color-on-operator-and: #15662d;
  --color-on-operator-or: #9b5e0d;
  --color-on-operator-not: #981c1c;
  --color-on-operator-near: #0e5352;
  --color-on-operator-between: #2f1dba;
  --color-on-operator-then: #691cd4;
  --color-on-operator-else: #be185d;
  --color-on-operator-with: #465017;
  --color-on-operator-in: #664f46;
  --color-on-operator-when: #c72307;
  --color-operator-if: #85c7ff;
  --color-operator-and: #85f0a3;
  --color-operator-or: #f6d84e;
  --color-operator-not: #f67373;
  --color-operator-near: #05c7bb;
  --color-operator-between: #888bfd;
  --color-operator-then: #cfb2ff;
  --color-operator-else: #f9a8d4;
  --color-operator-with: #e0eb6b;
  --color-operator-in: #c8baa9;
  --color-operator-when: #ffa570;
  --color-scrollbar-thumb: #9d9da0;
  --color-scrollbar-thumb-hover: #24242b;
  --color-scrollbar-track: #e7e7e7;
  --color-scrollbar-thumb-inverse: #6d6d71;
  --color-scrollbar-thumb-inverse-hover: #b5b5b7;
  --color-scrollbar-track-inverse: #505057;
  --color-sentiment-positive-strongly: #15662d;
  --color-sentiment-positive: #148134;
  --color-sentiment-neutral: #858589;
  --color-sentiment-negative: #c52020;
  --color-sentiment-negative-strongly: #981c1c;
  --color-sentiment-mixed: #f03406;
  --color-sentiment-no: #b5b5b7;
  --color-grade-a-plus: #8fd363;
  --color-grade-a: #3a922b;
  --color-grade-b: #ffcc26;
  --color-grade-c: #f09e5b;
  --color-grade-d: #d3d3d3;
  --color-approval-flow-stage-1: #3f51b5;
  --color-approval-flow-stage-2: #4caf50;
  --color-approval-flow-stage-3: #ffc107;
  --color-approval-flow-stage-4: #e91e63;
  --color-approval-flow-stage-5: #2196f3;
  --color-approval-flow-stage-6: #8bc34a;
  --color-approval-flow-stage-7: #cddc39;
  --color-approval-flow-stage-8: #009688;
  --color-approval-flow-stage-9: #ffeb3b;
  --color-approval-flow-stage-10: #00bcd4;
  --color-approval-flow-stage-11: #795548;
  --color-approval-flow-stage-12: #ff9800;
  --color-approval-flow-stage-13: #ff5722;
  --color-approval-flow-stage-14: #9c27b0;
  --color-approval-flow-stage-15: #673ab7;
  --color-brand-ocean: #42c9f2;
  --color-brand-dark-blue: #000066;
  --color-brand-plum: #6666ff;
  --color-brand-coral: #ff5a1f;
  --color-brand-charcoal: #111114;
  --color-brand-sky-blue: #e3f1ff;
  --color-brand-sand: #ede9e3;
  --color-brand-teal: #51f7e5;
  --color-brand-royal-blue: #003beb;
  --color-brand-inverse: #ffffff;
  --color-ai-gradient-start: #00a19a;
  --color-ai-gradient-end: #7c2df0;
  --color-avatar-default: #e7e7e7;
  --color-gradient-feature-ai: linear-gradient(135deg, #009D97 14.06%, #8A3FFC 45.94%);
  --color-gradient-avatar-indigo: linear-gradient(125deg, #3F51B5 0.96%, #1A237E 124.53%);
  --color-gradient-avatar-blue: linear-gradient(125deg, #2196F3 0.96%, #0D47A1 124.53%);
  --color-gradient-avatar-cyan: linear-gradient(125deg, #00BCD4 0.96%, #006064 124.53%);
  --color-gradient-avatar-teal: linear-gradient(125deg, #009688 0.96%, #004D40 124.53%);
  --color-gradient-avatar-green: linear-gradient(125deg, #4CAF50 0.96%, #1B5E20 124.53%);
  --color-gradient-avatar-light-green: linear-gradient(125deg, #8BC34A 0.96%, #33691E 124.53%);
  --color-gradient-avatar-yellow: linear-gradient(125deg, #F5A017 0.96%, #C46512 124.53%);
  --color-gradient-avatar-orange: linear-gradient(125deg, #E65100 0.96%, #B84000 124.53%);
  --color-gradient-avatar-brown: linear-gradient(125deg, #795548 0.96%, #442C28 124.53%);
  --color-gradient-avatar-pink: linear-gradient(125deg, #CD3497 0.96%, #691A4E 124.53%);
  --color-gradient-avatar-purple: linear-gradient(125deg, #9C27B0 0.96%, #4A148C 124.53%);
  --color-gradient-avatar-deep-purple: linear-gradient(125deg, #622CC2 0.96%, #311B92 124.53%);
  --color-gradient-avatar-gray: linear-gradient(125deg, #9F9F9F 0.96%, #575757 124.53%);
  --color-loader-spinner-light: #0791f0;
  --color-loader-spinner-dark: #063bcd;
  --color-loader-spinner-inverse: rgba(255, 255, 255, 0.85);
  --color-loader-skeleton: rgba(0, 0, 0, 0.05);
  --color-loader-skeleton-inverse: rgba(255, 255, 255, 0.1);
  --color-shadow-inner: rgba(0, 0, 0, 0.05);
  --color-shadow-drop-10: rgba(0, 0, 0, 0.1);
  --color-shadow-drop-20: rgba(0, 0, 0, 0.2);
  --color-shadow-drop-30: rgba(0, 0, 0, 0.3);
  --color-badge-propagation-alpha: #db2777;
  --color-badge-propagation-beta: #7c2df0;
  --color-badge-propagation-early-access: #08739c;
  --color-badge-propagation-new: #148134;
  --color-badge-propagation-internal: #6d6d71;
  --color-badge-propagation-you: #a21caf;
  --background-button-primary-default: linear-gradient(to right, #435BFF 0%,#0038E5  50%);
  --background-button-secondary-default: linear-gradient(to right bottom, #FEFFFF 0%, #EBECED 50%);
  --background-button-ghost-default: rgba(255, 255, 255, 0);
  --background-button-ghost-active: rgba(0, 0, 0, 0.1);
  --background-button-ghost-hover: rgba(0, 0, 0, 0.05);
  --background-button-ghost-inverse-default: none;
  --background-button-ghost-inverse-active: rgba(255, 255, 255, 0.18);
  --background-button-ghost-inverse-hover: rgba(255, 255, 255, 0.12);
  --background-button-invisible-default: rgba(255, 255, 255, 0);
  --background-button-invisible-active: rgba(0, 0, 0, 0.1);
  --background-button-invisible-hover: rgba(0, 0, 0, 0.05);
  --background-button-remove-default: linear-gradient(to right, #FA4D56 0%, #DA1E28  50%);
  --background-button-request-default: linear-gradient(to right, #2EBD7A 0%, #25A066  50%);
  --background-button-purchase-default: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%), #9b5e0d;
  --background-button-purchase-active: linear-gradient(180deg, rgba(96, 96, 96, 0.12) 0%, rgba(96, 96, 96, 0.04) 100%), #9b5e0d;
  --background-button-purchase-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(58, 58, 58, 0.08) 100%), #9b5e0d;
  --background-button-applied-default: #d5efff;
  --background-button-applied-active: rgba(0, 0, 0, 0.1);
  --background-button-applied-hover: rgba(0, 0, 0, 0.05);
  --background-checkbox: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%);
  --background-input: #ffffff;
  --border-color-button-secondary: rgba(0, 0, 0, 0.2);
  --border-color-button-ghost: rgba(0, 0, 0, 0.2);
  --border-color-button-ghost-inverse: rgba(255, 255, 255, 0.5);
  --border-color-checkbox: rgba(0, 0, 0, 0.2);
  --border-color-input-default: rgba(0, 0, 0, 0.2);
  --border-color-input-focus: #003beb;
  --border-color-input-error: #f67373;
  --border-color-input-success: #85f0a3;
  --text-button-primary: #f9f9fa;
  --text-button-secondary: #24242b;
  --text-button-ghost: #24242b;
  --text-button-ghost-inverse: #f9f9fa;
  --text-button-invisible: #24242b;
  --text-button-remove: #f9f9fa;
  --text-button-request: #f9f9fa;
  --text-button-purchase: #24242b;
  --text-button-link: #003beb;
  --text-button-link-underline: rgba(0, 59, 235, 0.4);
  --text-button-link-underline-hover: #003beb;
  --text-button-link-inverse: #f9f9fa;
  --text-button-link-inverse-underline: rgba(249, 249, 250, 0.4);
  --text-button-link-inverse-underline-hover: #f9f9fa;
  --text-button-link-secondary: #24242b;
  --text-button-link-secondary-underline: rgba(36, 36, 43, 0.4);
  --text-button-link-secondary-underline-hover: #24242b;
  --text-button-link-tertiary: #505057;
  --text-button-link-tertiary-underline: rgba(80, 80, 87, 0.4);
  --text-button-link-tertiary-underline-hover: #505057;
  --text-button-applied: #24242b;
  --text-checkbox-label: #24242b;
  --text-input-content: #24242b;
  --text-input-title: #505057;
  --text-input-placeholder: #9d9da0;
  --icon-button-primary: #f9f9fa;
  --icon-button-secondary: #24242b;
  --icon-button-ghost: #24242b;
  --icon-button-ghost-inverse: #f9f9fa;
  --icon-button-invisible: #24242b;
  --icon-button-remove: #f9f9fa;
  --icon-button-request: #f9f9fa;
  --icon-button-purchase: #24242b;
  --icon-button-link: #003beb;
  --icon-button-link-inverse: #f9f9fa;
  --icon-button-link-secondary: #24242b;
  --icon-button-link-tertiary: #505057;
  --icon-button-applied: #003beb;
  --illustration-blue: #2f79ff;
  --illustration-light-blue: #85c7ff;
  --illustration-red: #f67373;
  --illustration-green: #20c54f;
  --illustration-gainsboro: #b5b5b7;
  --illustration-silver-dark: #cececf;
  --illustration-silver: #e7e7e7;
  --illustration-silver-light: #f3f3f5;
  --illustration-ground: #cececf;
  --illustration-background: #e7e7e7;
  --illustration-off-white: #f9f9fa;
  --illustration-shadow: rgba(0, 0, 0, 0.05);
  --box-shadow-100: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20);
  --box-shadow-200: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-300: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-400: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 5px 0 var(--color-shadow-drop-20), 0 10px 24px 0 var(--color-shadow-drop-20);
  --box-shadow-normal: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20);
  --box-shadow-hover: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-select: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-big: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 5px 0 var(--color-shadow-drop-20), 0 10px 24px 0 var(--color-shadow-drop-20);
}

[data-theme='dark'] {
  --color-anchor-default: #56a0ff;
  --color-anchor-light: #f9f9fa;
  --color-anchor-dark: #f9f9fa;
  --color-anchor-underline-default: rgba(86, 160, 255, 0.14);
  --color-anchor-underline-light: rgba(249, 249, 250, 0.14);
  --color-anchor-underline-dark: rgba(249, 249, 250, 0.14);
  --color-anchor-underline-default-hover: #56a0ff;
  --color-anchor-underline-light-hover: #f9f9fa;
  --color-anchor-underline-dark-hover: #f9f9fa;
  --color-white-0: rgba(255, 255, 255, 0);
  --color-white-10: rgba(255, 255, 255, 0.05);
  --color-white-20: rgba(255, 255, 255, 0.1);
  --color-white-30: rgba(255, 255, 255, 0.2);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-50: rgba(255, 255, 255, 0.7);
  --color-white-60: rgba(255, 255, 255, 0.8);
  --color-white-70: rgba(255, 255, 255, 0.85);
  --color-white-80: rgba(255, 255, 255, 0.9);
  --color-white-90: rgba(255, 255, 255, 0.95);
  --color-white-100: #ffffff;
  --color-black-0: rgba(0, 0, 0, 0);
  --color-black-10: rgba(0, 0, 0, 0.05);
  --color-black-20: rgba(0, 0, 0, 0.1);
  --color-black-30: rgba(0, 0, 0, 0.2);
  --color-black-40: rgba(0, 0, 0, 0.3);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.7);
  --color-black-70: rgba(0, 0, 0, 0.8);
  --color-black-80: rgba(0, 0, 0, 0.9);
  --color-black-90: rgba(0, 0, 0, 0.95);
  --color-black-100: #000000;
  --color-gray-10: #f9f9fa;
  --color-gray-20: #f3f3f5;
  --color-gray-30: #e7e7e7;
  --color-gray-40: #cececf;
  --color-gray-50: #b5b5b7;
  --color-gray-60: #9d9da0;
  --color-gray-70: #858589;
  --color-gray-80: #6d6d71;
  --color-gray-90: #505057;
  --color-gray-100: #37373e;
  --color-gray-110: #24242b;
  --color-gray-120: #111114;
  --color-red-5: #fef2f2;
  --color-red-10: #fee2e2;
  --color-red-20: #fdcbcb;
  --color-red-30: #fba6a6;
  --color-red-40: #f67373;
  --color-red-50: #ed4646;
  --color-red-60: #da2828;
  --color-red-70: #c52020;
  --color-red-80: #981c1c;
  --color-red-90: #7e1e1e;
  --color-red-100: #440b0b;
  --color-orange-5: #fff4ed;
  --color-orange-10: #ffe7d4;
  --color-orange-20: #ffcaa8;
  --color-orange-30: #ffa570;
  --color-orange-40: #ff7437;
  --color-orange-50: #ff5a1f;
  --color-orange-60: #f03406;
  --color-orange-70: #c72307;
  --color-orange-80: #9e1d0e;
  --color-orange-90: #7f1c0f;
  --color-orange-100: #450a05;
  --color-yellow-5: #fdfbe9;
  --color-yellow-10: #fcf6c5;
  --color-yellow-20: #faeb8e;
  --color-yellow-30: #f6d84e;
  --color-yellow-40: #f1c21b;
  --color-yellow-50: #e1ab11;
  --color-yellow-60: #c2840c;
  --color-yellow-70: #9b5e0d;
  --color-yellow-80: #804b13;
  --color-yellow-90: #6d3d16;
  --color-yellow-100: #401f08;
  --color-pear-5: #fdfde8;
  --color-pear-10: #f8facd;
  --color-pear-20: #eff4a2;
  --color-pear-30: #e0eb6b;
  --color-pear-40: #d0df49;
  --color-pear-50: #b0c31f;
  --color-pear-60: #899b15;
  --color-pear-70: #677615;
  --color-pear-80: #525e16;
  --color-pear-90: #465017;
  --color-pear-100: #242c07;
  --color-lime-5: #f7fee7;
  --color-lime-10: #ecfccb;
  --color-lime-20: #d9f99d;
  --color-lime-30: #bef264;
  --color-lime-40: #a3e635;
  --color-lime-50: #84cc16;
  --color-lime-60: #65a30d;
  --color-lime-70: #4d7c0f;
  --color-lime-80: #3f6212;
  --color-lime-90: #365314;
  --color-lime-100: #1a2e05;
  --color-green-5: #f0fdf3;
  --color-green-10: #dcfce4;
  --color-green-20: #baf8cb;
  --color-green-30: #85f0a3;
  --color-green-40: #48e073;
  --color-green-50: #20c54f;
  --color-green-60: #15a43e;
  --color-green-70: #148134;
  --color-green-80: #15662d;
  --color-green-90: #135428;
  --color-green-100: #052e13;
  --color-teal-5: #effefc;
  --color-teal-10: #c8fff7;
  --color-teal-20: #90ffee;
  --color-teal-30: #51f7e5;
  --color-teal-40: #1de4d5;
  --color-teal-50: #05c7bb;
  --color-teal-60: #00a19a;
  --color-teal-70: #05807c;
  --color-teal-80: #0a6563;
  --color-teal-90: #0e5352;
  --color-teal-100: #003233;
  --color-ocean-5: #f0faff;
  --color-ocean-10: #e1f4fd;
  --color-ocean-20: #bceafb;
  --color-ocean-30: #81dbf8;
  --color-ocean-40: #42c9f2;
  --color-ocean-50: #15b1e2;
  --color-ocean-60: #0890c1;
  --color-ocean-70: #08739c;
  --color-ocean-80: #0b6181;
  --color-ocean-90: #0f506b;
  --color-ocean-100: #0a3447;
  --color-sky-5: #eff7ff;
  --color-sky-10: #e3f1ff;
  --color-sky-20: #b8e0ff;
  --color-sky-30: #79c7ff;
  --color-sky-40: #32abfe;
  --color-sky-50: #0791f0;
  --color-sky-60: #0071ce;
  --color-sky-70: #005aa6;
  --color-sky-80: #034d89;
  --color-sky-90: #094171;
  --color-sky-100: #06284b;
  --color-blue-5: #e8f7ff;
  --color-blue-10: #d5efff;
  --color-blue-20: #b3dfff;
  --color-blue-30: #85c7ff;
  --color-blue-40: #56a0ff;
  --color-blue-50: #2f79ff;
  --color-blue-60: #0c4bff;
  --color-blue-70: #003beb;
  --color-blue-80: #063bcd;
  --color-blue-90: #103a9f;
  --color-blue-100: #0a205c;
  --color-indigo-5: #f9f5ff;
  --color-indigo-10: #e8e9ff;
  --color-indigo-20: #d5d9ff;
  --color-indigo-30: #b3b8ff;
  --color-indigo-40: #888bfd;
  --color-indigo-50: #6666ff;
  --color-indigo-60: #4835f2;
  --color-indigo-70: #3923de;
  --color-indigo-80: #2f1dba;
  --color-indigo-90: #291a98;
  --color-indigo-100: #000066;
  --color-violet-5: #f9f5ff;
  --color-violet-10: #f0e7ff;
  --color-violet-20: #e4d4ff;
  --color-violet-30: #cfb2ff;
  --color-violet-40: #b180ff;
  --color-violet-50: #8a3ffc;
  --color-violet-60: #7c2df0;
  --color-violet-70: #691cd4;
  --color-violet-80: #5a1dac;
  --color-violet-90: #4b198a;
  --color-violet-100: #300467;
  --color-fuchsia-5: #fdf4ff;
  --color-fuchsia-10: #fae8ff;
  --color-fuchsia-20: #f5d0fe;
  --color-fuchsia-30: #f0abfc;
  --color-fuchsia-40: #e879f9;
  --color-fuchsia-50: #d946ef;
  --color-fuchsia-60: #c026d3;
  --color-fuchsia-70: #a21caf;
  --color-fuchsia-80: #86198f;
  --color-fuchsia-90: #701a75;
  --color-fuchsia-100: #4a044e;
  --color-pink-5: #fdf2f8;
  --color-pink-10: #fce7f3;
  --color-pink-20: #fbcfe8;
  --color-pink-30: #f9a8d4;
  --color-pink-40: #f472b6;
  --color-pink-50: #ec4899;
  --color-pink-60: #db2777;
  --color-pink-70: #be185d;
  --color-pink-80: #9d174d;
  --color-pink-90: #831843;
  --color-pink-100: #500724;
  --color-sand-5: #f8f6f4;
  --color-sand-10: #ede9e3;
  --color-sand-20: #ded6ca;
  --color-sand-30: #c8baa9;
  --color-sand-40: #b19b86;
  --color-sand-50: #a1856e;
  --color-sand-60: #947562;
  --color-sand-70: #7c6052;
  --color-sand-80: #664f46;
  --color-sand-90: #53423b;
  --color-sand-100: #2c221e;
  --color-brown-5: #f7f4ef;
  --color-brown-10: #ebe3d6;
  --color-brown-20: #d9c8af;
  --color-brown-30: #c2a682;
  --color-brown-40: #b0895f;
  --color-brown-50: #a17751;
  --color-brown-60: #8a5f44;
  --color-brown-70: #6f4a39;
  --color-brown-80: #5f3f34;
  --color-brown-90: #4e342e;
  --color-brown-100: #2f1d19;
  --color-on-layer-primary: #f9f9fa;
  --color-on-layer-secondary: #b5b5b7;
  --color-on-layer-tertiary: #6d6d71;
  --color-on-layer-inverse: #f9f9fa;
  --color-on-layer-interactive: #56a0ff;
  --color-on-layer-warning: #f6d84e;
  --color-on-layer-danger: #f67373;
  --color-on-layer-success: #85f0a3;
  --color-on-layer-recent: #cfb2ff;
  --color-layer-level-0: #111114;
  --color-layer-level-1: #24242b;
  --color-layer-level-2: #37373e;
  --color-layer-level-3: #505057;
  --color-layer-hover: rgba(255, 255, 255, 0.05);
  --color-layer-active: rgba(255, 255, 255, 0.1);
  --color-layer-info: #0a205c;
  --color-layer-warning: #401f08;
  --color-layer-danger: #440b0b;
  --color-layer-danger-emphasis: #981c1c;
  --color-layer-success: #052e13;
  --color-layer-success-emphasis: #15662d;
  --color-layer-recent: #300467;
  --color-layer-main-navigation: #111114;
  --color-layer-highlight: #9b5e0d;
  --color-message-incoming: #505057;
  --color-message-outgoing: #0a205c;
  --color-border-default: rgba(255, 255, 255, 0.2);
  --color-border-primary: rgba(255, 255, 255, 0.2);
  --color-border-secondary: rgba(255, 255, 255, 0.1);
  --color-border-inverse: rgba(255, 255, 255, 0.2);
  --color-border-info: #003beb;
  --color-border-info-emphasis: #56a0ff;
  --color-border-warning: #9b5e0d;
  --color-border-warning-emphasis: #f6d84e;
  --color-border-danger: #c52020;
  --color-border-danger-emphasis: #ed4646;
  --color-border-success: #15a43e;
  --color-border-success-emphasis: #85f0a3;
  --color-border-recent: #691cd4;
  --color-border-recent-emphasis: #b180ff;
  --color-border-focus-button: #e7e7e7;
  --color-border-focus-ring: #85c7ff;
  --color-border-focus-ring-inner: rgba(0, 0, 0, 0.7);
  --color-border-focus-ring-inverse: #85c7ff;
  --color-border-focus-ring-inner-inverse: rgba(0, 0, 0, 0.7);
  --color-border-focus-form: #85c7ff;
  --color-overlay-default: rgba(0, 0, 0, 0.7);
  --color-overlay-inverse: rgba(0, 0, 0, 0.7);
  --color-link-primary: #56a0ff;
  --color-link-secondary: #f9f9fa;
  --color-link-tertiary: #858589;
  --color-link-inverse: #f9f9fa;
  --color-link-visited: #8a3ffc;
  --color-link-underline-primary: rgba(86, 160, 255, 0.4);
  --color-link-underline-secondary: rgba(249, 249, 250, 0.4);
  --color-link-underline-tertiary: rgba(133, 133, 137, 0.4);
  --color-link-underline-inverse: rgba(249, 249, 250, 0.4);
  --color-link-underline-primary-hover: #56a0ff;
  --color-link-underline-secondary-hover: #f9f9fa;
  --color-link-underline-tertiary-hover: #858589;
  --color-link-underline-inverse-hover: #f9f9fa;
  --color-button-primary: #0c4bff;
  --color-button-light: rgba(0, 0, 0, 0.5);
  --color-button-ghost: rgba(0, 0, 0, 0);
  --color-button-invisible: rgba(0, 0, 0, 0);
  --color-button-inverse: rgba(0, 0, 0, 0);
  --color-button-request: #15a43e;
  --color-button-danger: #da2828;
  --color-button-purchase: #f6d84e;
  --color-button-ghost-hover: rgba(255, 255, 255, 0.05);
  --color-button-invisible-hover: rgba(255, 255, 255, 0.05);
  --color-button-inverse-hover: rgba(255, 255, 255, 0.05);
  --color-button-ghost-active: rgba(255, 255, 255, 0.1);
  --color-button-invisible-active: rgba(255, 255, 255, 0.1);
  --color-button-invisible-applied: rgba(15, 98, 254, 0.28);
  --color-button-inverse-active: rgba(255, 255, 255, 0.1);
  --color-tooltip-default: #24242b;
  --color-tooltip-guide: #0c4bff;
  --color-tooltip-caveat: #f6d84e;
  --color-tooltip-danger: #da2828;
  --color-table-row-odd: #ffffff;
  --color-table-row-even: #f9f9fa;
  --color-table-row-hover: #d5efff;
  --color-table-row-hover-border: #85c7ff;
  --color-platform-facebook: #0866ff;
  --color-platform-instagram: #d73676;
  --color-platform-twitter: #242e36;
  --color-platform-x: #242e36;
  --color-platform-x-adaptive: #f9f9fa;
  --color-platform-youtube: #ff0000;
  --color-platform-pinterest: #bb0f23;
  --color-platform-linkedin: #1078b3;
  --color-platform-google-analytics: #f57e02;
  --color-platform-google-my-business: #4c8bf5;
  --color-platform-vkontakte: #4e76a1;
  --color-platform-snapchat: #e6e300;
  --color-platform-tiktok: #000000;
  --color-platform-tiktok-adaptive: #ffffff;
  --color-platform-tiktok-splash: #0bd0ca;
  --color-platform-salesforce: #00a1e0;
  --color-platform-news: #354da3;
  --color-platform-forum: #dd470f;
  --color-platform-blog: #4b3827;
  --color-platform-web: #f57e02;
  --color-platform-audience: #6e50dc;
  --color-platform-reddit: #ff5700;
  --color-platform-whatsapp: #25d366;
  --color-platform-threads: #000000;
  --color-platform-threads-adaptive: #ffffff;
  --color-platform-threads-purple: #9c27b0;
  --color-platform-organic: #406dd3;
  --color-platform-paid: #26bca6;
  --color-platform-app-bundle: #0e1e3a;
  --color-platform-app-bundle-adaptive: #f9f9fa;
  --color-platform-pangle: #d74538;
  --color-chart-indigo: #3f51b5;
  --color-chart-blue: #2196f3;
  --color-chart-cyan: #00bcd4;
  --color-chart-teal: #009688;
  --color-chart-green: #4caf50;
  --color-chart-light-green: #8bc34a;
  --color-chart-lime: #cddc39;
  --color-chart-yellow: #ffcc02;
  --color-chart-orange: #ff9800;
  --color-chart-red: #f43636;
  --color-chart-deep-red: #b01e1e;
  --color-chart-brown: #795548;
  --color-chart-deep-pink: #e91e63;
  --color-chart-pink: #cd3497;
  --color-chart-purple: #9c27b0;
  --color-chart-deep-purple: #622cc2;
  --color-chart-gray: #9f9f9f;
  --color-chart-black: #000000;
  --color-chart-white: #ffffff;
  --color-on-operator-if: #85c7ff;
  --color-on-operator-and: #85f0a3;
  --color-on-operator-or: #f6d84e;
  --color-on-operator-not: #f67373;
  --color-on-operator-near: #05c7bb;
  --color-on-operator-between: #888bfd;
  --color-on-operator-then: #cfb2ff;
  --color-on-operator-else: #f9a8d4;
  --color-on-operator-with: #e0eb6b;
  --color-on-operator-in: #c8baa9;
  --color-on-operator-when: #ffa570;
  --color-operator-if: #0c4bff;
  --color-operator-and: #15662d;
  --color-operator-or: #9b5e0d;
  --color-operator-not: #981c1c;
  --color-operator-near: #0e5352;
  --color-operator-between: #2f1dba;
  --color-operator-then: #8a3ffc;
  --color-operator-else: #be185d;
  --color-operator-with: #465017;
  --color-operator-in: #664f46;
  --color-operator-when: #c72307;
  --color-scrollbar-thumb: #6d6d71;
  --color-scrollbar-thumb-hover: #b5b5b7;
  --color-scrollbar-track: #505057;
  --color-scrollbar-thumb-inverse: #6d6d71;
  --color-scrollbar-thumb-inverse-hover: #b5b5b7;
  --color-scrollbar-track-inverse: #505057;
  --color-sentiment-positive-strongly: #20c54f;
  --color-sentiment-positive: #15a43e;
  --color-sentiment-neutral: #858589;
  --color-sentiment-negative: #da2828;
  --color-sentiment-negative-strongly: #ed4646;
  --color-sentiment-mixed: #ff5a1f;
  --color-sentiment-no: #6d6d71;
  --color-grade-a-plus: #8fd363;
  --color-grade-a: #3a922b;
  --color-grade-b: #ffcc26;
  --color-grade-c: #f09e5b;
  --color-grade-d: #d3d3d3;
  --color-approval-flow-stage-1: #3f51b5;
  --color-approval-flow-stage-2: #4caf50;
  --color-approval-flow-stage-3: #ffc107;
  --color-approval-flow-stage-4: #e91e63;
  --color-approval-flow-stage-5: #2196f3;
  --color-approval-flow-stage-6: #8bc34a;
  --color-approval-flow-stage-7: #cddc39;
  --color-approval-flow-stage-8: #009688;
  --color-approval-flow-stage-9: #ffeb3b;
  --color-approval-flow-stage-10: #00bcd4;
  --color-approval-flow-stage-11: #795548;
  --color-approval-flow-stage-12: #ff9800;
  --color-approval-flow-stage-13: #ff5722;
  --color-approval-flow-stage-14: #9c27b0;
  --color-approval-flow-stage-15: #673ab7;
  --color-brand-ocean: #42c9f2;
  --color-brand-dark-blue: #000066;
  --color-brand-plum: #6666ff;
  --color-brand-coral: #ff7437;
  --color-brand-charcoal: #ffffff;
  --color-brand-sky-blue: #e3f1ff;
  --color-brand-sand: #ede9e3;
  --color-brand-teal: #51f7e5;
  --color-brand-royal-blue: #2f79ff;
  --color-brand-inverse: #ffffff;
  --color-ai-gradient-start: #51f7e5;
  --color-ai-gradient-end: #b180ff;
  --color-avatar-default: #505057;
  --color-gradient-feature-ai: linear-gradient(135deg, #51F7E5 14.06%, #BE95FF 45.94%);
  --color-gradient-avatar-indigo: linear-gradient(125deg, #3F51B5 0.96%, #1A237E 124.53%);
  --color-gradient-avatar-blue: linear-gradient(125deg, #2196F3 0.96%, #0D47A1 124.53%);
  --color-gradient-avatar-cyan: linear-gradient(125deg, #00BCD4 0.96%, #006064 124.53%);
  --color-gradient-avatar-teal: linear-gradient(125deg, #009688 0.96%, #004D40 124.53%);
  --color-gradient-avatar-green: linear-gradient(125deg, #4CAF50 0.96%, #1B5E20 124.53%);
  --color-gradient-avatar-light-green: linear-gradient(125deg, #8BC34A 0.96%, #33691E 124.53%);
  --color-gradient-avatar-yellow: linear-gradient(125deg, #F5A017 0.96%, #C46512 124.53%);
  --color-gradient-avatar-orange: linear-gradient(125deg, #E65100 0.96%, #B84000 124.53%);
  --color-gradient-avatar-brown: linear-gradient(125deg, #795548 0.96%, #442C28 124.53%);
  --color-gradient-avatar-pink: linear-gradient(125deg, #CD3497 0.96%, #691A4E 124.53%);
  --color-gradient-avatar-purple: linear-gradient(125deg, #9C27B0 0.96%, #4A148C 124.53%);
  --color-gradient-avatar-deep-purple: linear-gradient(125deg, #622CC2 0.96%, #311B92 124.53%);
  --color-gradient-avatar-gray: linear-gradient(125deg, #9F9F9F 0.96%, #575757 124.53%);
  --color-loader-spinner-light: #79c7ff;
  --color-loader-spinner-dark: #2f79ff;
  --color-loader-spinner-inverse: rgba(255, 255, 255, 0.85);
  --color-loader-skeleton: rgba(255, 255, 255, 0.1);
  --color-loader-skeleton-inverse: rgba(255, 255, 255, 0.1);
  --color-shadow-inner: rgba(255, 255, 255, 0.2);
  --color-shadow-drop-10: rgba(0, 0, 0, 0.3);
  --color-shadow-drop-20: rgba(0, 0, 0, 0.5);
  --color-shadow-drop-30: rgba(0, 0, 0, 0.7);
  --color-badge-propagation-alpha: #be185d;
  --color-badge-propagation-beta: #691cd4;
  --color-badge-propagation-early-access: #0b6181;
  --color-badge-propagation-new: #15662d;
  --color-badge-propagation-internal: #6d6d71;
  --color-badge-propagation-you: #a21caf;
  --background-button-primary-default: linear-gradient(to right, #435BFF 0%,#0038E5  50%);
  --background-button-secondary-default: linear-gradient(to right bottom, #FEFFFF 0%, #EBECED 50%);
  --background-button-ghost-default: rgba(255, 255, 255, 0);
  --background-button-ghost-active: rgba(0, 0, 0, 0.1);
  --background-button-ghost-hover: rgba(0, 0, 0, 0.05);
  --background-button-ghost-inverse-default: none;
  --background-button-ghost-inverse-active: rgba(255, 255, 255, 0.18);
  --background-button-ghost-inverse-hover: rgba(255, 255, 255, 0.12);
  --background-button-invisible-default: rgba(255, 255, 255, 0);
  --background-button-invisible-active: rgba(0, 0, 0, 0.1);
  --background-button-invisible-hover: rgba(0, 0, 0, 0.05);
  --background-button-remove-default: linear-gradient(to right, #FA4D56 0%, #DA1E28  50%);
  --background-button-request-default: linear-gradient(to right, #2EBD7A 0%, #25A066  50%);
  --background-button-purchase-default: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%), #f6d84e;
  --background-button-purchase-active: linear-gradient(180deg, rgba(96, 96, 96, 0.12) 0%, rgba(96, 96, 96, 0.04) 100%), #f6d84e;
  --background-button-purchase-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(58, 58, 58, 0.08) 100%), #f6d84e;
  --background-button-applied-default: #d5efff;
  --background-button-applied-active: rgba(255, 255, 255, 0.1);
  --background-button-applied-hover: rgba(255, 255, 255, 0.05);
  --background-checkbox: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%);
  --background-input: #24242b;
  --border-color-button-secondary: rgba(255, 255, 255, 0.2);
  --border-color-button-ghost: rgba(255, 255, 255, 0.2);
  --border-color-button-ghost-inverse: rgba(255, 255, 255, 0.5);
  --border-color-checkbox: rgba(255, 255, 255, 0.2);
  --border-color-input-default: rgba(255, 255, 255, 0.2);
  --border-color-input-focus: #85c7ff;
  --border-color-input-error: #c52020;
  --border-color-input-success: #15a43e;
  --text-button-primary: #f9f9fa;
  --text-button-secondary: #f9f9fa;
  --text-button-ghost: #f9f9fa;
  --text-button-ghost-inverse: #f9f9fa;
  --text-button-invisible: #f9f9fa;
  --text-button-remove: #f9f9fa;
  --text-button-request: #f9f9fa;
  --text-button-purchase: #f9f9fa;
  --text-button-link: #56a0ff;
  --text-button-link-underline: rgba(86, 160, 255, 0.4);
  --text-button-link-underline-hover: #56a0ff;
  --text-button-link-inverse: #f9f9fa;
  --text-button-link-inverse-underline: rgba(249, 249, 250, 0.4);
  --text-button-link-inverse-underline-hover: #f9f9fa;
  --text-button-link-secondary: #f9f9fa;
  --text-button-link-secondary-underline: rgba(249, 249, 250, 0.4);
  --text-button-link-secondary-underline-hover: #f9f9fa;
  --text-button-link-tertiary: #858589;
  --text-button-link-tertiary-underline: rgba(133, 133, 137, 0.4);
  --text-button-link-tertiary-underline-hover: #858589;
  --text-button-applied: #f9f9fa;
  --text-checkbox-label: #f9f9fa;
  --text-input-content: #f9f9fa;
  --text-input-title: #b5b5b7;
  --text-input-placeholder: #6d6d71;
  --icon-button-primary: #f9f9fa;
  --icon-button-secondary: #f9f9fa;
  --icon-button-ghost: #f9f9fa;
  --icon-button-ghost-inverse: #f9f9fa;
  --icon-button-invisible: #f9f9fa;
  --icon-button-remove: #f9f9fa;
  --icon-button-request: #f9f9fa;
  --icon-button-purchase: #f9f9fa;
  --icon-button-link: #56a0ff;
  --icon-button-link-inverse: #f9f9fa;
  --icon-button-link-secondary: #f9f9fa;
  --icon-button-link-tertiary: #858589;
  --icon-button-applied: #56a0ff;
  --illustration-blue: #2f79ff;
  --illustration-light-blue: #0c4bff;
  --illustration-red: #ed4646;
  --illustration-green: #20c54f;
  --illustration-gainsboro: #6d6d71;
  --illustration-silver-dark: #9d9da0;
  --illustration-silver: #b5b5b7;
  --illustration-silver-light: #cececf;
  --illustration-ground: #37373e;
  --illustration-background: #505057;
  --illustration-off-white: #e7e7e7;
  --illustration-shadow: rgba(255, 255, 255, 0.1);
  --box-shadow-100: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20);
  --box-shadow-200: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-300: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-400: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 5px 0 var(--color-shadow-drop-20), 0 10px 24px 0 var(--color-shadow-drop-20);
  --box-shadow-normal: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20);
  --box-shadow-hover: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-select: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 3px 0 var(--color-shadow-drop-20), 0 5px 12px 0 var(--color-shadow-drop-10);
  --box-shadow-big: 0 0.25px 0 0.25px var(--color-shadow-inner) inset, 0 0 1px 0 var(--color-shadow-inner) inset, 0 0 0.5px 0 var(--color-shadow-drop-30), 0 1px 5px 0 var(--color-shadow-drop-20), 0 10px 24px 0 var(--color-shadow-drop-20);
}

:root {
	font-family: var(--font-family);
	font-variant-numeric: slashed-zero;
	font-feature-settings:
		'cv05' on,
		'cv08' on,
		'ss04' on,
		'clig' off,
		'liga' off;

	input,
	textarea,
	select,
	button {
		font-family: var(--font-family);
		font-variant-numeric: slashed-zero;
		font-feature-settings:
			'cv05' on,
			'cv08' on,
			'ss04' on,
			'clig' off,
			'liga' off;
	}

	/* ----- Floating panel ----- */

	/* NOTE THAT
		- we need to prevent accidental selection and loss of pointer events
		- we also need to prevent scrolling when dragging is in progress

		WE DO
		- force the cursor to be move while dragging, this needs to be done on this parent element instead of `body`
		  because `pointer-events: none` will cause that any `cursor` value on `body` and its children is ignored
		- prevent body scrolling when dragging
		- prevent accidental selection when dragging
		- disable all pointer events except those on `window` when dragging
		  - note that this is necessary because e.g. iframe would "steal" the events and dragging would be interrupted
		  - this is also better performance-wise because no unnecessary interactions are triggered
		- hide any active popovers
		- when `scrollbar-gutter: stable` is supported prevent design skipping because of scrollbar visibility change
			- note that this is not supported on Safari but it really does not bother us because it is handled natively
			  nicely on Mac, and Safari usage with always-on scrollbars or Safari usage on Windows is minimal
	 */
	&[data-dsfloatingpaneldraggingactive] {
		cursor: move;

		> body {
			overflow: hidden;
			/* stylelint-disable-next-line property-no-vendor-prefix */
			-webkit-user-select: none;
			user-select: none;
			pointer-events: none;

			[data-popper-placement] {
				display: none !important;
			}
		}
	}

	@supports (scrollbar-gutter: stable) {
		&[data-dsfloatingpaneldraggingactive] > body {
			scrollbar-gutter: stable;
		}
	}

	/* ----- Modal ----- */

	/* NOTE THAT
		- `overscroll-behavior: contain;` cannot be used here
		- `html:has(dialog[open]:modal) > * { ... }` is causing massive slowdown if DOM is changing rapidly

		We split it to two @support cases at root level to optimize the CSS processing speed as much as possible.
		- prevent scrolling behind the modal overlay
		- prevent design skipping because of scrollbar visibility change (if supported)

		--- CASE A ---
		When `scrollbar-gutter: stable` is supported prevent design skipping because of scrollbar visibility change
		note that this is not supported on Safari but it really does not bother us because it is handled natively
		nicely on Mac, and Safari usage with always-on scrollbars or Safari usage on Windows is minimal.

		--- CASE B ---
		Fallback when `scrollbar-gutter: stable` is not supported.
	 */
	@supports (scrollbar-gutter: stable) {
		&[data-dsmodaloverlayactive] > body {
			overflow: hidden;
			scrollbar-gutter: stable;
		}
	}

	@supports not (scrollbar-gutter: stable) {
		&[data-dsmodaloverlayactive] > body {
			overflow: hidden;
		}
	}

	/* ----- Spinner ----- */

	:where([data-ds-spinner], [data-ds-spinner-inverse]) {
		position: relative;
		cursor: progress;

		&:where([data-ds-spinner-styled]) {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&:where([data-ds-spinner-height]) {
			height: var(--ds-spinner-height, 100%);
		}

		&:where([data-ds-spinner-margin]) {
			margin: var(--ds-spinner-margin, auto);
		}

		&:where([data-ds-spinner-min-height]) {
			min-height: var(--ds-spinner-min-height, 100%);
		}

		&:where([data-ds-spinner-width]) {
			width: var(--ds-spinner-width, 100%);
		}

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
		}
	}

	:where([data-ds-spinner='large'], [data-ds-spinner-inverse='large']) {
		width: var(--ds-spinner-width, 36px);
		height: var(--ds-spinner-height, 36px);

		&::before {
			width: 36px;
			height: 36px;
		}
	}

	:where([data-ds-spinner='medium'], [data-ds-spinner-inverse='medium']) {
		width: var(--ds-spinner-width, 24px);
		height: var(--ds-spinner-height, 24px);

		&::before {
			width: 24px;
			height: 24px;
		}
	}

	:where([data-ds-spinner='small'], [data-ds-spinner-inverse='small']) {
		width: var(--ds-spinner-width, 18px);
		height: var(--ds-spinner-height, 18px);

		&::before {
			width: 18px;
			height: 18px;
		}
	}

	&:not([data-theme])
		:where([data-ds-spinner], [data-ds-spinner-img='default'])::before,
	&:where([data-theme='light'])
		:where([data-ds-spinner], [data-ds-spinner-img='default'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/icons/basic-loader.svg');
	}

	&:not([data-theme])
		:where([data-ds-spinner-inverse], [data-ds-spinner-img='inverse'])::before,
	&:where([data-theme='light'])
		:where([data-ds-spinner-inverse], [data-ds-spinner-img='inverse'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/icons/basic-loader-white.svg');
	}

	&:where([data-theme='dark'])
		:where([data-ds-spinner], [data-ds-spinner-img='default'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/icons/basic-loader-dark-mode.svg');
	}

	&:where([data-theme='dark'])
		:where([data-ds-spinner-inverse], [data-ds-spinner-img='inverse'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/icons/basic-loader-white.svg');
	}
}