/**
 * VIS Theme
 */
@font-face {
  font-family: "Roobert PRO";
  src: url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Light.otf") format("opentype"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Light.woff2") format("woff2"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Light.woff") format("woff"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Light.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Roobert PRO";
  src: url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Regular.otf") format("opentype"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Regular.woff2") format("woff2"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Regular.woff") format("woff"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Roobert PRO";
  src: url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Medium.otf") format("opentype"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Medium.woff2") format("woff2"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Medium.woff") format("woff"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Roobert PRO";
  src: url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Bold.otf") format("opentype"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Bold.woff2") format("woff2"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Bold.woff") format("woff"),
       url("https://static-website.miro.com/miro-site-lp-build-assets/assets/fonts/RoobertPRO/RoobertPRO-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

:root {
  /* Fonts */
  --wcds-font-primary: 'Roobert PRO', Helvetica, Arial, sans-serif;
  --wcds-font-secondary: 'Roobert PRO', Helvetica, Arial, sans-serif;
  --wcds-font-arabic: 'Vazirmatn', var(--wcds-font-secondary), sans-serif;
  --wcds-font-japanese: 'M PLUS 1', var(--wcds-font-secondary), sans-serif;

  /**
   * VIS Global color tokens
   */
  --wcds-colors-beige-100: #FBF7EF;
  --wcds-colors-beige-200: #F4F0E3;
  --wcds-colors-beige-300: #EDE8D7;
  --wcds-colors-beige-600: #D9D2B3;
  --wcds-colors-black-20: rgba(var(--wcds-colors-black-rgb), .2);
  --wcds-colors-black-30: rgba(var(--wcds-colors-black-rgb), .3);
  --wcds-colors-black-40: rgba(var(--wcds-colors-black-rgb), .4);
  --wcds-colors-black: #1C1C1E;
  --wcds-colors-blue-600: #4961F6;
  --wcds-colors-blue-700: #2E4DE6;
  --wcds-colors-blue-800: #2A42B7;
  --wcds-colors-blue-900: #273788;
  --wcds-colors-danger: #DA2222;
  --wcds-colors-gray-100: #F3F3F2;
  --wcds-colors-gray-200: #E4E5E5;
  --wcds-colors-gray-400: #CACBCC;
  --wcds-colors-gray-600: #AFB1B2;
  --wcds-colors-gray-700: #8A8C8D;
  --wcds-colors-gray-800: #6C7173;
  --wcds-colors-gray-900: #444749;
  --wcds-colors-lilac-500: #B9B2FF;
  --wcds-colors-lilac-800: #686493;
  --wcds-colors-lime-600: #CEFF7A;
  --wcds-colors-red-600: #FF8080;
  --wcds-colors-error: #DA2222;
  --wcds-colors-success: #4F7D00;
  --wcds-colors-transparent: transparent;
  --wcds-colors-white: #FFFFFF;
  --wcds-colors-yellow-100: #FFFAE5;
  --wcds-colors-yellow-200: #FEF4C4;
  --wcds-colors-yellow-400: #FDE988;
  --wcds-colors-yellow-500: #FFE771;
  --wcds-colors-yellow-600: #FFDD33;

  /**
   * DEPRECATED Global color tokens
   */
  /*--wcds-colors-blue-10: #f1f3fd;*/
  /*--wcds-colors-blue-20: #daddf5;*/
  /*--wcds-colors-blue-50: #7185ef;*/
  --wcds-colors-blue-60: #4961f6;
  /*--wcds-colors-blue-70: #3f53d9;*/
  /* --wcds-colors-blue-80: #122277; */
  /*--wcds-colors-gray-20: #f2f2f3;*/
  /*--wcds-colors-gray-30: #e7e7e7;*/
  /*--wcds-colors-green-70: #1e8908;*/
  /*--wcds-colors-indigo-20: #afaeb8;*/
  /*--wcds-colors-indigo-30: #9897a4;*/
  /*--wcds-colors-indigo-50: #686685;*/
  /*--wcds-colors-indigo-70: #36345d;*/
  --wcds-colors-indigo-90: var(--wcds-colors-black);
  /*--wcds-colors-pink-20: #ffe5e5;*/
  /*--wcds-colors-pink-50: #ffbfbf;*/
  /*--wcds-colors-red-10: #fbf4f5;*/
  /*--wcds-colors-red-20: #f4d8db;*/
  /*--wcds-colors-red-30: #f3b7bb;*/
  /*--wcds-colors-red-50: #ff6575;*/
  --wcds-colors-red-60: #cc4856;
  /*--wcds-colors-transparent: #ffffff00;*/
  /*--wcds-colors-yellow-20: #fdf1c6;*/
  /* --wcds-colors-yellow-60: #ffd02f; */

  /**
   * VIS Global color tokens in RGB, used for calculating transparencies
   */
  --wcds-colors-beige-100-rgb: 251, 247, 239;
  --wcds-colors-beige-200-rgb: 244, 240, 227;
  --wcds-colors-beige-300-rgb: 237, 232, 215;
  --wcds-colors-black-rgb: 28, 28, 30;
  --wcds-colors-blue-700-rgb: 46, 77, 230;
  --wcds-colors-blue-800-rgb: 42, 66, 183;
  --wcds-colors-blue-900-rgb: 39, 55, 136;
  --wcds-colors-danger-rgb: 218, 34, 34;
  --wcds-colors-gray-200-rgb: 228, 229, 229;
  --wcds-colors-gray-400-rgb: 202, 203, 204;
  --wcds-colors-gray-600-rgb: 175, 177, 178;
  --wcds-colors-gray-700-rgb: 138, 140, 141;
  --wcds-colors-gray-800-rgb: 108, 113, 115;
  --wcds-colors-gray-900-rgb: 68, 71, 73;
  --wcds-colors-lilac-500-rgb: 185, 178, 255;
  --wcds-colors-lilac-800-rgb: 104, 100, 147;
  --wcds-colors-lime-600-rgb: 168, 207, 102;
  --wcds-colors-red-600-rgb: 255, 128, 128;
  --wcds-colors-success-rgb: 79, 125, 0;
  --wcds-colors-white-rgb: 255, 255, 255;
  --wcds-colors-yellow-100-rgb: 255, 250, 229;
  --wcds-colors-yellow-200-rgb: 254, 244, 196;
  --wcds-colors-yellow-400-rgb: 253, 233, 136;
  --wcds-colors-yellow-500-rgb: 254, 229, 109;
  --wcds-colors-yellow-600-rgb: 255, 221, 51;

  /**
   * DEPRECATED Global color tokens in RGB, used for calculating transparencies
   */
  /*--wcds-colors-blue-10-rgb: 241, 243, 253;*/
  /*--wcds-colors-blue-20-rgb: 218, 221, 245;*/
  /*--wcds-colors-blue-50-rgb: 113, 133, 239;*/
  /*--wcds-colors-blue-60-rgb: 73, 97, 246;*/
  /*--wcds-colors-blue-70-rgb: 63, 83, 217;*/
  /*--wcds-colors-blue-80-rgb: 18, 34, 119;*/
  /*--wcds-colors-gray-20-rgb: 242, 242, 243;*/
  /*--wcds-colors-gray-30-rgb: 231, 231, 231;*/
  /*--wcds-colors-green-70-rgb: 30, 137, 8;*/
  /*--wcds-colors-indigo-20-rgb: 175, 174, 184;*/
  /*--wcds-colors-indigo-30-rgb: 152, 151, 164;*/
  /*--wcds-colors-indigo-50-rgb: 104, 102, 133;*/
  /*--wcds-colors-indigo-70-rgb: 54, 52, 93;*/
  --wcds-colors-indigo-90-rgb: 28, 28, 30;
  /*--wcds-colors-pink-20-rgb: 255, 229, 229;*/
  /*--wcds-colors-pink-50-rgb: 255, 191, 191;*/
  /*--wcds-colors-red-10-rgb: 251, 244, 245;*/
  /*--wcds-colors-red-20-rgb: 244, 216, 219;*/
  /*--wcds-colors-red-30-rgb: 243, 183, 187;*/
  /*--wcds-colors-red-50-rgb: 255, 101, 117;*/
  /*--wcds-colors-red-60-rgb: 204, 72, 86;*/
  /*--wcds-colors-transparent-rgb: 255, 255, 255;*/
  /*--wcds-colors-yellow-20-rgb: 253, 241, 198;*/
  /*--wcds-colors-yellow-60-rgb: 255, 208, 47;*/

  /**
   * VIS Alias Tokens
   */
  --wcds-colors-text-success-idle: var(--wcds-colors-success);
  --wcds-colors-text-error-idle: var(--wcds-colors-danger);

  --wcds-colors-text-primary: var(--wcds-colors-black);
  --wcds-colors-text-secondary: var(--wcds-colors-gray-800);
  --wcds-colors-text-tertiary: var(--wcds-colors-white);

  --wcds-colors-text-default-idle: var(--wcds-colors-blue-700);
  --wcds-colors-text-default-hover: var(--wcds-colors-blue-800);
  --wcds-colors-text-default-down: var(--wcds-colors-blue-900);
  --wcds-colors-text-default-disabled: var(--wcds-colors-gray-600);
  --wcds-colors-text-default-visited: var(--wcds-colors-lilac-800);

  /**
   * Web Core Design System: Section Background Colors
   */
  --wcds-colors-background-section-color-1: var(--wcds-colors-yellow-600);
  --wcds-colors-background-section-color-2: var(--wcds-colors-beige-100);
  --wcds-colors-background-section-color-3: var(--wcds-colors-white);
  --wcds-colors-background-section-color-4: var(--wcds-colors-black);

  --wcds-colors-background-default-active: var(--wcds-colors-yellow-600);
  --wcds-colors-background-default-disabled: var(--wcds-colors-gray-200);
  --wcds-colors-background-default-down: var(--wcds-colors-gray-100);
  --wcds-colors-background-default-hover: var(--wcds-colors-gray-100);
  --wcds-colors-background-default-idle: var(--wcds-colors-white);

  --wcds-colors-background-danger-idle: var(--wcds-colors-red-600);
  --wcds-colors-background-info-idle: var(--wcds-colors-lilac-500);
  --wcds-colors-background-success-idle: var(--wcds-colors-lime-600);
  --wcds-colors-background-warning-idle: var(--wcds-colors-yellow-500);

  --wcds-colors-divider-default: var(--wcds-colors-gray-800);
  --wcds-colors-divider-light: var(--wcds-colors-gray-400);

  --wcds-colors-border-default-active: var(--wcds-colors-gray-900);
  --wcds-colors-border-default-disabled: var(--wcds-colors-gray-400);
  --wcds-colors-border-default-down: var(--wcds-colors-black);
  --wcds-colors-border-default-error: var(--wcds-colors-danger);
  --wcds-colors-border-default-hover: var(--wcds-colors-gray-800);
  --wcds-colors-border-default-idle: var(--wcds-colors-gray-700);

  /**
   * @deprecated - Legacy CTA Button Component Color Tokens
   */
  --wcds-colors-background-cta-active: var(--wcds-colors-background-btn-primary-down);
  --wcds-colors-background-cta-disabled: var(--wcds-colors-background-btn-disabled);
  --wcds-colors-background-cta-hover: var(--wcds-colors-background-btn-primary-hover);
  --wcds-colors-background-cta-idle: var(--wcds-colors-background-btn-primary-idle);
  --wcds-colors-background-danger-active: var(--wcds-colors-red-20);
  --wcds-colors-background-danger-hover: var(--wcds-colors-red-10);
  --wcds-colors-background-default-selected-active: var(--wcds-colors-blue-20);
  --wcds-colors-background-default-selected: var(--wcds-colors-blue-10);
  --wcds-colors-background-primary: var(--wcds-colors-white);
  --wcds-colors-background-secondary: var(--wcds-colors-black);
  --wcds-colors-border-cta-idle: var(--wcds-colors-blue-60);
  --wcds-colors-border-default-selected: var(--wcds-colors-blue-60);
  --wcds-colors-canvas-primary: var(--wcds-colors-gray-20);
  --wcds-colors-icon-cta-idle: var(--wcds-colors-white);
  --wcds-colors-icon-default-active: var(--wcds-colors-blue-80);
  --wcds-colors-icon-default-disabled: var(--wcds-colors-gray-600);
  --wcds-colors-icon-default-error: var(--wcds-colors-red-60);
  --wcds-colors-icon-default-hover: var(--wcds-colors-blue-70);
  --wcds-colors-icon-default-idle: var(--wcds-colors-blue-60);
  --wcds-colors-icon-default-selected: var(--wcds-colors-blue-60);
  --wcds-colors-icon-default-visited: var(--wcds-colors-lilac-800);
  --wcds-colors-icon-default: var(--wcds-colors-black);
  --wcds-colors-icon-primary: var(--wcds-colors-black);
  --wcds-colors-icon-secondary: var(--wcds-colors-gray-600);
  --wcds-colors-icon-tertiary: var(--wcds-colors-white);
  --wcds-colors-on-default-error: var(--wcds-colors-danger);
  --wcds-colors-text-cta-idle: var(--wcds-colors-white);
  --wcds-colors-text-default-active: var(--wcds-colors-blue-80);
  --wcds-colors-text-default-error: var(--wcds-colors-red-60);
  --wcds-colors-text-default-selected: var(--wcds-colors-blue-60);

  /**
   * VIS Accordion Component Color Tokens
   */
  --wcds-colors-background-accordion-idle: var(--wcds-colors-white);
  --wcds-colors-background-accordion-hover: var(--wcds-colors-beige-200);
  --wcds-colors-background-accordion-down: var(--wcds-colors-beige-300);
  --wcds-colors-border-accordion-idle: var(--wcds-colors-border-default-idle);
  --wcds-colors-accordion-link: var(--wcds-colors-blue-600);

  /**
   * Web Core Design System: Global Site Color Alias Tokens
   */
  --wcds-colors-body-primary: var(--wcds-colors-beige-100);

  /**
   * Web Core Design System: Toggle Component Color Tokens
   */
  --wcds-colors-background-toggle-primary-idle: var(--wcds-colors-indigo-20);
  --wcds-colors-background-toggle-primary-hover: var(--wcds-colors-indigo-50);
  --wcds-colors-background-toggle-primary-active: var(--wcds-colors-black);

  --wcds-colors-border-card-idle: var(--wcds-colors-gray-800);
  --wcds-colors-border-card-hover: var(--wcds-colors-black);

  --wcds-colors-background-input-active: var(--wcds-colors-yellow-100);
  --wcds-colors-text-input-placeholder: var(--wcds-colors-gray-700);

  --wcds-colors-backdrop-default: var(--wcds-colors-black-40);

  --wcds-colors-background-popover-idle: var(--wcds-colors-black);
  --wcds-colors-icon-popover-idle: var(--wcds-colors-white);
  --wcds-colors-icon-popover-hover: var(--wcds-colors-black);
  --wcds-colors-icon-popover-down: var(--wcds-colors-black);

  /**
   * Web Core Design System: Backdrop Color
   */
  --wcds-colors-modal-backdrop-color: var(--wcds-colors-black-40);

  /**
   * Web Core Design System: Super Component Background Colors
   */
  --wcds-colors-super-component-background-color-1: var(--wcds-colors-background-section-color-1);
  --wcds-colors-super-component-background-color-2: var(--wcds-colors-background-section-color-2);
  --wcds-colors-super-component-background-color-3: var(--wcds-colors-background-section-color-3);
  --wcds-colors-super-component-background-color-4: var(--wcds-colors-background-section-color-4);
  --wcds-colors-super-component-background-color-5: var(--wcds-colors-red-50);
  --wcds-colors-super-component-background-color-6: var(--deprecated-legacy-colors-primary-extended-grey);
  --wcds-colors-super-component-background-color-7: var(--deprecated-legacy-colors-primary-grey);
  --wcds-colors-super-component-background-color-8: var(--wcds-colors-pink-50);
  --wcds-colors-super-component-background-color-9: var(--wcds-colors-pink-20);
  --wcds-colors-super-component-background-color-10: var(--wcds-colors-blue-700);
  --wcds-colors-super-component-background-color-11: var(--wcds-colors-white);

  /**
   * Web Core Design System: Header Component Colors
   */
  --wcds-header-text-color: var(--wcds-colors-text-primary);
  --wcds-header-accordion-menu-background-color: var(--wcds-header-background-color);
  --wcds-header-accordion-menu-item-background-color-hover: rgba(var(--wcds-colors-white-rgb), .4);
  --wcds-header-accordion-text-color: var(--wcds-colors-text-tertiary);
  --wcds-header-background-color: var(--wcds-colors-white);
  --wcds-header-background-dark-color: var(--wcds-colors-black);
  --wcds-header-border-color: var(--wcds-colors-indigo-30);
  --wcds-header-bottom-links-background-color: var(--wcds-header-background-color);
  --wcds-header-box-shadow-color: rgba(var(--wcds-colors-black-rgb), 0.05);
  --wcds-header-burger-nav-link-active-color: var(--wcds-colors-white);
  --wcds-header-burger-nav-link-hover-color: var(--wcds-colors-white);
  --wcds-header-customer-spotlight-text-color: var(--wcds-colors-text-secondary);
  --wcds-header-item-description-link-color-hover: var(--wcds-colors-black);
  --wcds-header-item-description-link-color-idle: var(--wcds-colors-text-secondary);
  --wcds-header-item-title-link-color-hover: var(--deprecated-legacy-colors-primary-blue-hover);
  --wcds-header-item-title-link-color-idle: var(--wcds-colors-black);
  --wcds-header-logo-color: var(--wcds-header-text-color);
  --wcds-header-secondary-navigation-background-color: var(--wcds-header-background-color);
  --wcds-header-secondary-navigation-stroke-color: var(--wcds-colors-divider-default);
  --wcds-header-top-nav-link-active-color: var(--wcds-colors-white);
  --wcds-header-top-nav-link-hover-color: var(--deprecated-legacy-colors-primary-blue-hover);

  /**
   * Web Core Design System: Footer Component Colors
   */
  --wcds-footer-background-color: var(--wcds-colors-black);
  --wcds-footer-link-active-color: var(--wcds-colors-white);
  --wcds-footer-link-hover-color: var(--wcds-colors-white);
  --wcds-footer-border-color: var(--wcds-colors-transparent);
  --wcds-footer-font-color: var(--wcds-colors-white);
  --wcds-footer-icon-color: var(--wcds-footer-font-color);
  --wcds-footer-icon-active-color: var(--wcds-footer-link-active-color);
  --wcds-footer-app-store-logo-background-color: var(--wcds-footer-background-color);

  /**
   * Web Core Design System: Accordion Menu Component Colors
   */
  --wcds-light-accordion-menu-background-color: var(--wcds-colors-white);
  --wcds-light-accordion-menu-border-color: var(--wcds-colors-divider-default);
  --wcds-dark-accordion-menu-background-color: var(--wcds-colors-black);
  --wcds-dark-accordion-menu-border-color: var(--wcds-colors-border-default-idle);

  /**
   * Proposed rgb alias colors
   */
  --wcds-colors-primary-rgb: var(--wcds-colors-black-rgb);

  /**
   * Proposed Colors
   */
  --wcds-colors-white-alpha-50: rgba(var(--wcds-colors-white-rgb), 0.5);

  /**
   * Proposed Alias Tokens
   */
  --wcds-colors-border-primary: var(--wcds-colors-black);
  --wcds-colors-border-cta-hover: var(--wcds-colors-blue-70);
  --wcds-colors-border-cta-active: var(--wcds-colors-blue-80);
  --wcds-colors-shadow-primary-rgb: var(--wcds-colors-primary-rgb);
  --wcds-colors-border-primary-rgb: var(--wcds-colors-primary-rgb);
  --wcds-ratings-star-color: #FF9D48;

  /* Language Switcher */
  --wcds-language-switcher-box-shadow-color: rgba(var(--wcds-colors-primary-rgb), 0.16);
  --wcds-dark-language-switcher-font-color-active: var(--wcds-colors-yellow-600);
  --wcds-dark-language-switcher-font-color-hover: var(--wcds-colors-yellow-600);
  --wcds-dark-language-switcher-font-color-idle: var(--wcds-colors-white);
  --wcds-light-language-switcher-font-color-active: var(--wcds-colors-text-default-active);
  --wcds-light-language-switcher-font-color-hover: var(--wcds-colors-text-default-hover);
  --wcds-light-language-switcher-font-color-idle: var(--wcds-colors-text-primary);

  /* packages/core (styled-components) */
  --wcds-accordion-item-background-color: rgba(var(--wcds-colors-primary-rgb), 0.05);
  --wcds-accordion-item-text-color: rgba(var(--wcds-colors-primary-rgb), 0.6);
  --wcds-account-picker-background-color: rgba(var(--wcds-colors-black-rgb), 0.6);
  --wcds-card-box-shadow-color: rgba(var(--wcds-colors-primary-rgb), 0.08);
  --wcds-dropdown-box-shadow-color: rgba(var(--wcds-colors-primary-rgb), 0.16);

  /* packages/shared/ui/page-sections/src/components/hero-with-logos/ButtonWithInput.tsx */
  --wcds-tooltip-background-color: var(--wcds-colors-black);
  --wcds-tooltip-border-color: var(--wcds-colors-black);
  --wcds-tooltip-text-color: var(--wcds-colors-blue-50);
  --wcds-tooltip-icon-color: var(--wcds-colors-white);

  /**
   * Design Tokens for Styled Components
   *
   * @deprecated - DO NOT USE IN NEW COMPONENTS
   */
  /* Legacy colors that have transparency */
  --deprecated-legacy-colors-blue-70-alpha-10: rgba(var(--wcds-colors-blue-800-rgb), 0.10);
  --deprecated-legacy-colors-indigo-90-alpha-10: rgba(var(--wcds-colors-black-rgb), 0.10);
  --deprecated-legacy-colors-indigo-90-alpha-20: rgba(var(--wcds-colors-black-rgb), 0.20);
  --deprecated-legacy-colors-indigo-90-alpha-3: rgba(var(--wcds-colors-black-rgb), 0.03);
  --deprecated-legacy-colors-indigo-90-alpha-40: rgba(var(--wcds-colors-black-rgb), 0.40);
  --deprecated-legacy-colors-indigo-90-alpha-60: rgba(var(--wcds-colors-black-rgb), 0.60);
  --deprecated-legacy-colors-indigo-90-alpha-90: rgba(var(--wcds-colors-black-rgb), 0.90);
  --deprecated-legacy-colors-pink-50-alpha-40: rgba(var(--wcds-colors-pink-50-rgb), 0.40);
  --deprecated-legacy-colors-primary-blue-alpha-6: rgba(66, 98, 255, 0.06);
  --deprecated-legacy-colors-white-alpha-10: rgba(var(--wcds-colors-white-rgb), 0.10);
  --deprecated-legacy-colors-white-alpha-40: rgba(var(--wcds-colors-white-rgb), 0.40);
  --deprecated-legacy-colors-white-alpha-75: rgba(var(--wcds-colors-white-rgb), 0.75);
  --deprecated-legacy-colors-white-alpha-90: rgba(var(--wcds-colors-white-rgb), 0.90);
  --deprecated-legacy-colors-yellow-60-alpha-30: rgba(var(--wcds-colors-yellow-60-rgb), 0.3);
  /* Replace with var(--wcds-colors-blue-60) */
  --deprecated-legacy-colors-primary-blue-idle: #4262FF;
  /* Replace with var(--wcds-colors-blue-70) */
  --deprecated-legacy-colors-primary-blue-hover: #455BED;
  /* Replace with var(--wcds-colors-blue-80) */
  --deprecated-legacy-colors-primary-blue-active: #3D51D4;
  /* Replace with var(--wcds-colors-gray-20) */
  --deprecated-legacy-colors-primary-grey: #F2F2F2;
  /* Replace with var(--wcds-colors-gray-30) */
  --deprecated-legacy-colors-primary-extended-grey: #F8F7F9;

  /* Unmapped legacy colors */
  --deprecated-legacy-blue-hover: #5a87e8;
  /* Replace with var(--wcds-colors-indigo-30) */
  --deprecated-legacy-dimmed-gray: #9B99AF;
  /* Replace with var(--wcds-colors-gray-30) */
  --deprecated-legacy-dimmest-gray: #E1E0E7;
  /* Replace with var(--wcds-colors-indigo-20) */
  --deprecated-legacy-solutions-gray: #C0BFCD;
  /* Replace with var(--wcds-colors-blue-20) */
  --deprecated-legacy-primary-40: #D9E0FF;
  /* Replace with var(--wcds-colors-blue-50) */
  --deprecated-legacy-primary-80: #6881FF;
  /* Replace with var(--wcds-colors-indigo-50) */
  --deprecated-legacy-placeholder-color: #5f5c80;

  /* Buttons */
  --deprecated-legacy-dsPrimary-background-active: var(--wcds-colors-background-btn-primary-down);
  --deprecated-legacy-dsPrimary-background-hover: var(--wcds-colors-background-btn-primary-hover);
  --deprecated-legacy-dsPrimary-background-idle: var(--wcds-colors-background-btn-primary-idle);
  --deprecated-legacy-dsPrimary-color-idle: var(--wcds-colors-text-btn-primary-idle);
  --deprecated-legacy-dsTransparent-background-active: var(--wcds-colors-background-default-idle);
  --deprecated-legacy-dsTransparent-background-hover: var(--wcds-colors-background-default-idle);
  --deprecated-legacy-dsTransparent-background-idle: var(--wcds-colors-background-default-idle);
  --deprecated-legacy-dsTransparent-border-active: var(--wcds-colors-border-cta-idle);
  --deprecated-legacy-dsTransparent-border-idle: var(--wcds-colors-border-cta-idle);
  --deprecated-legacy-dsTransparent-border-hover: var(--wcds-colors-border-cta-idle);
  --deprecated-legacy-dsTransparent-color-idle: var(--wcds-colors-blue-60);
  --deprecated-legacy-white-background-active: var(--deprecated-legacy-colors-white-alpha-90);
  --deprecated-legacy-white-background-hover: var(--deprecated-legacy-colors-white-alpha-90);
  --deprecated-legacy-white-background-idle: var(--wcds-colors-white);
  --deprecated-legacy-white-border-active: var(--wcds-colors-transparent);
  --deprecated-legacy-white-border-idle: var(--wcds-colors-white);
  --deprecated-legacy-white-border-hover: var(--wcds-colors-transparent);
  --deprecated-legacy-white-color-idle: var(--wcds-colors-black);
  --deprecated-legacy-transparent-background-active: var(--deprecated-legacy-colors-blue-70-alpha-10);
  --deprecated-legacy-transparent-background-hover: var(--deprecated-legacy-colors-blue-70-alpha-10);
  --deprecated-legacy-transparent-background-idle: var(--wcds-colors-white);
  --deprecated-legacy-transparent-border-active: var(--wcds-colors-text-default-hover);
  --deprecated-legacy-transparent-border-idle: var(--wcds-colors-text-default-idle);
  --deprecated-legacy-transparent-border-hover: var(--wcds-colors-text-default-hover);
  --deprecated-legacy-transparent-color-idle: var(--wcds-colors-text-default-idle);
  --deprecated-legacy-transparentWhite-background-active: var(--wcds-colors-transparent);
  --deprecated-legacy-transparentWhite-background-hover: var(--wcds-colors-transparent);
  --deprecated-legacy-transparentWhite-background-idle: var(--wcds-colors-transparent);
  --deprecated-legacy-transparentWhite-border-active: var(--deprecated-legacy-colors-white-alpha-75);
  --deprecated-legacy-transparentWhite-border-idle: var(--wcds-colors-white);
  --deprecated-legacy-transparentWhite-border-hover: var(--deprecated-legacy-colors-white-alpha-75);
  --deprecated-legacy-transparentWhite-color-idle: var(--wcds-colors-white);
  --deprecated-legacy-dark-background-active: var(--wcds-colors-transparent);
  --deprecated-legacy-dark-background-hover: var(--wcds-colors-transparent);
  --deprecated-legacy-dark-background-idle: var(--wcds-colors-transparent);
  --deprecated-legacy-dark-border-active: var(--deprecated-legacy-colors-white-alpha-10);
  --deprecated-legacy-dark-border-idle: var(--deprecated-legacy-colors-white-alpha-40);
  --deprecated-legacy-dark-border-hover: var(--deprecated-legacy-colors-white-alpha-10);
  --deprecated-legacy-dark-color-idle: var(--wcds-colors-white);
  --deprecated-legacy-dropdown-background-idle: var(--wcds-colors-white);
  --deprecated-legacy-dropdown-border-active: var(--wcds-colors-black);
  --deprecated-legacy-dropdown-border-hover: var(--deprecated-legacy-colors-indigo-90-alpha-40);
  --deprecated-legacy-dropdown-border-idle: var(--deprecated-legacy-colors-indigo-90-alpha-20);
  --deprecated-legacy-dropdown-color-idle: var(--wcds-colors-black);
  --deprecated-legacy-primary-background-active: var(--wcds-colors-background-btn-primary-down);
  --deprecated-legacy-primary-background-hover: var(--wcds-colors-background-btn-primary-hover);
  --deprecated-legacy-primary-background-idle: var(--wcds-colors-background-btn-primary-idle);
  --deprecated-legacy-primary-border-active: var(--wcds-colors-border-btn-primary-down);
  --deprecated-legacy-primary-border-hover: var(--wcds-colors-border-btn-primary-hover);
  --deprecated-legacy-primary-border-idle: var(--wcds-colors-border-btn-primary-idle);
  --deprecated-legacy-primary-color-idle: var(--wcds-colors-text-btn-primary-idle);
  --deprecated-legacy-secondary-background-idle: var(--wcds-colors-background-default-idle);
  --deprecated-legacy-secondary-border-idle: var(--wcds-colors-indigo-20);
  --deprecated-legacy-secondary-color-idle: var(--wcds-colors-black);
  --deprecated-legacy-secondaryBlue-background-active: var(--deprecated-legacy-colors-primary-blue-alpha-6);
  --deprecated-legacy-secondaryBlue-background-hover: var(--deprecated-legacy-colors-primary-blue-alpha-6);
  --deprecated-legacy-secondaryBlue-background-idle: var(--wcds-colors-white);
  --deprecated-legacy-secondaryBlue-border-idle: var(--wcds-colors-blue-60);
  --deprecated-legacy-secondaryBlue-color-idle: var(--wcds-colors-blue-60);

  /* Pricing pages from lp-builder-pages */
  --deprecated-legacy-pricing-background-accent: #f0f2ff;
  --deprecated-legacy-pricing-grey2: #f3f4f8;
  --deprecated-legacy-pricing-grey3: #E6E5EB;
  --deprecated-legacy-pricing-grey4: #F4F6FF;
  --deprecated-legacy-pricing-grey5: rgba(var(--wcds-colors-primary-rgb), 0.06);
  --deprecated-legacy-pricing-grey6: #CDCCD7;
  --deprecated-legacy-pricing-grey7: #9391A6;
  --deprecated-legacy-pricing-grey8: #F5F5F7;
  --deprecated-legacy-pricing-tooltip-box-shadow: rgba(var(--wcds-colors-primary-rgb), 0.16);
  --deprecated-legacy-pricing-tooltip-trigger-underline-color: rgba(155, 153, 175, 0.5);

  /* packages/shared/ui/page-sections/src/components/google-one-tap/GoogleOneTap.tsx */
  --deprecated-legacy-google-one-tap-wrapper-background-color: #f5f5f7;
  --deprecated-legacy-google-one-tap-wrapper-border-color: #DADCE0;
  --deprecated-legacy-google-one-tap-content-font-color: #686685;
  --deprecated-legacy-google-one-tap-check-mark-background-color: #3574E0;

  /* packages/shared/ui/page-sections/src/components/header/components/AccordionMenu.tsx */
  --deprecated-legacy-accordion-menu-background-color: #211D45;

  /* packages/shared/ui/page-sections/src/components/header/theme.ts */
  --deprecated-legacy-header-secondary-text-color: #686786;
  --deprecated-legacy-header-stroke-color: #F0F0F0;
  --deprecated-legacy-header-pink: #FBE6E5;
  --deprecated-legacy-header-blue: #4E6CFF;
  --deprecated-legacy-header-beige: #FAFAFA;

  /* packages/shared/ui/page-sections/src/components/hero-simplified/HeroSimplified.tsx */
  --deprecated-legacy-hero-with-logo-background-color: var(--deprecated-legacy-pricing-grey8);
  --deprecated-legacy-hero-with-typing-animation-cursor-color: #9d28b2;

  /**
   * Design Tokens for twig Components
   *
   * @deprecated - DO NOT USE IN NEW COMPONENTS
   */
  --deprecated-twig-grey-background-color: rgba(var(--wcds-colors-black-rgb), 0.03);
  --deprecated-twig-indigo-background-color: var(--wcds-colors-black);
  --deprecated-twig-blue-background-color: var(--wcds-colors-blue-70);
  --deprecated-twig-pink-background-color: var(--wcds-colors-pink-50);
  --deprecated-twig-red-background-color: var(--wcds-colors-red-50);
  --deprecated-twig-yellow-background-color: var(--wcds-colors-yellow-60);

  /* action-2.css */
  --deprecated-twig-action-2-background-color: var(--wcds-colors-black);

  /* card-3.css */
  --deprecated-twig-card-3-item-blue-background-color: rgba(var(--wcds-colors-blue-70-rgb), 0.1);
  --deprecated-twig-card-3-item-pink-background-color: rgba(var(--wcds-colors-red-50-rgb), 0.6);
  --deprecated-twig-card-3-item-pink-light-background-color: rgba(var(--wcds-colors-pink-50-rgb), 0.4);
  --deprecated-twig-card-3-item-yellow-background-color: rgba(var(--wcds-colors-yellow-60-rgb), 0.3);
  --deprecated-twig-card-3-icon-dark-fill-color: var(--wcds-colors-black);
  --deprecated-twig-card-3-icon-pink-fill-color: var(--wcds-colors-red-50);
  --deprecated-twig-card-3-icon-pink-light-fill-color: var(--wcds-colors-pink-50);
  --deprecated-twig-card-3-icon-yellow-fill-color: var(--wcds-colors-yellow-60);

  /* confidence-1.css */
  --deprecated-twig-confidence-1-background-color: var(--wcds-colors-white);
  --deprecated-twig-confidence-1-font-color: var(--wcds-colors-black);

  /* feature-2.css */
  --deprecated-twig-feature-2-background-color: var(--wcds-colors-white);
  --deprecated-twig-feature-2-font-color: var(--wcds-colors-black);
  --deprecated-twig-feature-2-top-left-section-background-color: var(--wcds-colors-yellow-60);
  --deprecated-twig-feature-2-bottom-left-section-background-color: var(--wcds-colors-blue-60);
  --deprecated-twig-feature-2-bottom-left-section-font-color: var(--wcds-colors-white);
  --deprecated-twig-feature-2-bottom-left-section-link-color-hover: var(--wcds-colors-gray-20);
  --deprecated-twig-feature-2-bottom-left-section-link-color-idle: var(--deprecated-twig-feature-2-bottom-left-section-font-color);
  --deprecated-twig-feature-2-bottom-left-section-link-border-color: var(--deprecated-twig-feature-2-bottom-left-section-font-color);
  --deprecated-twig-feature-2-bottom-right-section-background-color: var(--wcds-colors-black);
  --deprecated-twig-feature-2-bottom-right-section-font-color: var(--wcds-colors-white);
  --deprecated-twig-feature-2-bottom-right-section-link-color-hover: var(--wcds-colors-gray-20);
  --deprecated-twig-feature-2-bottom-right-section-link-border-color: var(--deprecated-twig-feature-2-bottom-right-section-font-color);
  --deprecated-twig-feature-2-bottom-right-section-link-color-idle: var(--deprecated-twig-feature-2-bottom-right-section-font-color);

  /**
   * Overrides for Stitches
   *
   * @deprecated - DO NOT USE IN NEW COMPONENTS
   */
  --colors-black: var(--wcds-colors-black);
  --colors-blue-10: var(--wcds-colors-blue-10);
  --colors-blue-20: var(--wcds-colors-blue-20);
  --colors-blue-50: var(--wcds-colors-blue-50);
  --colors-blue-60: var(--wcds-colors-blue-60);
  --colors-blue-70: var(--wcds-colors-blue-70);
  --colors-blue-80: var(--wcds-colors-blue-80);
  --colors-gray-20: var(--wcds-colors-gray-20);
  --colors-gray-30: var(--wcds-colors-gray-30);
  --colors-green-70: var(--wcds-colors-green-70);
  --colors-indigo-20: var(--wcds-colors-indigo-20);
  --colors-indigo-30: var(--wcds-colors-indigo-30);
  --colors-indigo-50: var(--wcds-colors-indigo-50);
  --colors-indigo-70: var(--wcds-colors-indigo-70);
  --colors-indigo-90: var(--wcds-colors-indigo-90);
  --colors-pink-20: var(--wcds-colors-pink-20);
  --colors-pink-50: var(--wcds-colors-pink-50);
  --colors-red-10: var(--wcds-colors-red-10);
  --colors-red-20: var(--wcds-colors-red-20);
  --colors-red-30: var(--wcds-colors-red-30);
  --colors-red-50: var(--wcds-colors-red-50);
  --colors-red-60: var(--wcds-colors-red-60);
  --colors-transparent: var(--wcds-colors-transparent);
  --colors-white: var(--wcds-colors-white);
  --colors-yellow-20: var(--wcds-colors-yellow-20);
  --colors-yellow-60: var(--wcds-colors-yellow-60);
  --colors-background-cta-active: var(--wcds-colors-background-btn-primary-down);
  --colors-background-cta-disabled: var(--wcds-colors-background-btn-disabled);
  --colors-background-cta-hover: var(--wcds-colors-background-btn-primary-hover);
  --colors-background-cta-idle: var(--wcds-colors-background-btn-primary-idle);
  --colors-background-danger-active: var(--wcds-colors-background-danger-active);
  --colors-background-danger-hover: var(--wcds-colors-background-danger-hover);
  --colors-background-danger-idle: var(--wcds-colors-background-danger-idle);
  --colors-background-default-active: var(--wcds-colors-background-btn-tertiary-down);
  --colors-background-default-disabled: var(--wcds-colors-background-btn-disabled);
  --colors-background-default-hover: var(--wcds-colors-background-btn-tertiary-hover);
  --colors-background-default-idle: var(--wcds-colors-background-btn-tertiary-idle);
  --colors-background-default-selected-active: var(--wcds-colors-background-default-selected-active);
  --colors-background-default-selected: var(--wcds-colors-background-default-selected);
  --colors-background-info-idle: var(--wcds-colors-background-info-idle);
  --colors-background-primary: var(--wcds-colors-background-primary);
  --colors-background-secondary: var(--wcds-colors-background-secondary);
  --colors-background-success-idle: var(--wcds-colors-background-success-idle);
  --colors-background-warning-idle: var(--wcds-colors-background-warning-idle);
  --colors-border-cta-idle: var(--wcds-colors-border-btn-primary-idle);
  --colors-border-default-active: var(--wcds-colors-border-default-active);
  --colors-border-default-error: var(--wcds-colors-border-default-error);
  --colors-border-default-hover: var(--wcds-colors-border-default-hover);
  --colors-border-default-idle: var(--wcds-colors-border-default-idle);
  --colors-border-default-selected: var(--wcds-colors-border-default-selected);
  --colors-canvas-primary: var(--wcds-colors-canvas-primary);
  --colors-divider-default: var(--wcds-colors-divider-default);
  --colors-focus-ring-default: var(--wcds-colors-focus-ring-default);
  --colors-font-cta-idle: var(--wcds-colors-text-btn-primary-idle);
  --colors-font-default-active: var(--wcds-colors-white);
  --colors-font-default-disabled: var(--wcds-colors-text-btn-disabled);
  --colors-font-default-error: var(--wcds-colors-text-default-error);
  --colors-font-default-hover: var(--wcds-colors-white);
  --colors-font-default-idle: var(--wcds-colors-black);
  --colors-font-default-selected: var(--wcds-colors-text-default-selected);
  --colors-font-default-visited: var(--wcds-colors-text-default-visited);
  --colors-font-primary: var(--wcds-colors-text-primary);
  --colors-font-secondary: var(--wcds-colors-text-secondary);
  --colors-font-tertiary: var(--wcds-colors-text-tertiary);
  --colors-icon-cta-idle: var(--wcds-colors-icon-cta-idle);
  --colors-icon-default-active: var(--wcds-colors-icon-default-active);
  --colors-icon-default-disabled: var(--wcds-colors-icon-default-disabled);
  --colors-icon-default-error: var(--wcds-colors-icon-default-error);
  --colors-icon-default-hover: var(--wcds-colors-icon-default-hover);
  --colors-icon-default-idle: var(--wcds-colors-icon-default-idle);
  --colors-icon-default-selected: var(--wcds-colors-icon-default-selected);
  --colors-icon-default: var(--wcds-colors-icon-default);
}

:root {
  /* Fonts weights */
  --wcds-h1-font-weight: 400;
  --wcds-h2-font-weight: 400;
  --wcds-h3-font-weight: 400;
  --wcds-h4-font-weight: 500;
  --wcds-h5-font-weight: 600;
  --wcds-h6-font-weight: 600;

  /* Fonts feature settings */
  --wcds-header-font-feature-settings: 'ss02', 'ss05';

  /**
   * Header logo
   */
  --wcds-new-company-logo: initial;
  --wcds-old-company-logo: none;
  --wcds-header-logo-width: 109px;
  --wcds-header-logo-height: 40px;
  --wcds-header-logo-top: 0;
  --wcds-standard-header-logo-top: 0;
  --wcds-header-logo-color: var(--wcds-colors-black);
  --wcds-header-logo-bg-color: var(--wcds-colors-yellow-600);

  /**
   * SEO templates - Use Case & Sub Use Case Page
   */
  --deprecated-seo-templates-sub-use-case-hero-background-color: var(--wcds-colors-transparent);
  --deprecated-seo-templates-sub-use-case-hero-input-border-color: var(--wcds-colors-indigo-30);
  --deprecated-seo-templates-sub-use-case-social-proof-logo-before-after-background-color: var(--wcds-colors-beige-100);
  --deprecated-seo-templates-sub-use-case-column-templates-border-color: var(--wcds-colors-gray-400);
  --deprecated-seo-templates-sub-use-case-column-templates-border-color-hover: var(--wcds-colors-black);
  --deprecated-seo-templates-sub-use-case-howto-background-color: var(--wcds-colors-white);
  --deprecated-seo-templates-sub-use-case-howto-font-color: var(--wcds-colors-text-primary);
  --deprecated-seo-templates-use-case-howto-item-border-color: var(--wcds-colors-gray-800);
  --deprecated-seo-templates-use-case-howto-arrow-color: var(--wcds-colors-text-primary);
  --deprecated-seo-templates-use-case-howto-border-color: var(--wcds-colors-gray-800);
  --deprecated-seo-templates-use-case-howto-item-number-text-color: var(--wcds-colors-gray-800);
  --deprecated-seo-templates-use-case-howto-item-number-text-active-color: var(--wcds-colors-black);
  --deprecated-seo-templates-use-case-howto-item-number-background-color: var(--wcds-colors-background-default-disabled); 
  --deprecated-seo-templates-use-case-howto-item-number-background-active-color: var(--wcds-colors-background-default-active);
  --deprecated-seo-templates-sub-use-case-spotlight-background-color: var(--wcds-colors-white);
  --deprecated-seo-templates-sub-use-case-faq-item-background-color: var(--wcds-colors-white);
  --deprecated-seo-templates-sub-use-case-read-more-item-default-card-color: var(--wcds-colors-white);
  --deprecated-seo-templates-sub-use-case-footer-background-color: var(--wcds-colors-black);
  --deprecated-seo-templates-sub-use-case-integrated-solutions-logo-background-color: #F1F3FD; /*This variable is depricated*/
  --deprecated-seo-templates-use-case-hero-background-color: var(--wcds-colors-transparent);
  --deprecated-seo-templates-use-case-hero-border-color: var(--wcds-colors-gray-800);
  --deprecated-seo-templates-use-case-other-solutions-border-color: #E7E7E7;
  --deprecated-seo-templates-sub-use-case-other-solutions-background-yellow: #ffd02f;
  --deprecated-seo-templates-sub-use-case-other-solutions-background-indigo: #050038;
  --deprecated-seo-templates-sub-use-case-other-solutions-background-red: #ff6575;
  --deprecated-seo-templates-sub-use-case-integrated-toold-border-color: #E7E7E7;
  --deprecated-seo-templates-use-case-card-border-color: var(--wcds-colors-gray-800);

  /**
   * Web Core Design System: Onboarding App Colors
   */
  --wcds-onboarding-description-text-color: var(--wcds-colors-gray-800);
  --wcds-onboarding-primary-text-color: var(--wcds-colors-text-primary);
  --wcds-onboarding-inactive-text-color: var(--wcds-colors-gray-700);
  --wcds-onboarding-indicator-active-color: var(--wcds-colors-black);
  --wcds-onboarding-indicator-inactive-color: var(--wcds-colors-gray-600);
  --wcds-onboarding-button-border-color: var(--wcds-colors-body-primary);

  /**
   * Web Core Design System: Website Templates
   */
  --wcds-search-input-background-color: var(--wcds-colors-white);
  --wcds-search-input-border-color: var(--wcds-colors-black);
  --wcds-templates-category-button-border-color: var(--wcds-colors-black);
  --wcds-templates-card-border-color: var(--wcds-colors-black);
  --wcds-templates-cta-background-color: var(--wcds-colors-white);
  --wcds-templates-cta-border-color: var(--wcds-colors-black);
  --wcds-legacy-heading-base-font-weight: var(--wcds-h1-font-weight);
  --wcds-legacy-paragraph-opacity: 1; /* to be deleted when VIS is a default */

  /**
   * twig-5 styles
   */
  --deprecated-twig-5-background-dark: var(--wcds-colors-beige-100);
  --deprecated-twig-5-background-dark-headline-text-color: var(--wcds-colors-text-primary);
  --deprecated-twig-5-background-dark-content-text-color: rgba(var(--wcds-colors-text-primary), 0.60);

  /**
   * slider-3 twig styles
   */
  --deprecated-slider-3-twig-background-defalult: var(--wcds-colors-beige-100);

  /**
   * feature-3 twig styles
   */
  --deprecated-feature-3-twig-workshops-color-indigo: var(--wcds-colors-beige-100);
  --deprecated-feature-3-twig-workshops-color-indigo-text-color: var(--wcds-colors-text-primary);

  /**
   * hero-6 twig styles
   */
  --deprecated-hero-6-twig-background-dark: var(--wcds-colors-beige-100);
  --deprecated-hero-6-twig-background-dark-headline-text-color: var(--wcds-colors-text-primary);
  --deprecated-hero-6-twig-background-dark-content-text-color: rgba(var(--wcds-colors-text-primary), 0.60);

  /**
   * Hero.tsx styles
   */
  --deprecated-hero-background-dark: var(--wcds-colors-black);
  --deprecated-hero-background-blue: var(--wcds-colors-beige-100);
  --deprecated-hero-background-pink: var(--wcds-colors-beige-100);
  --deprecated-hero-background-yellow: var(--wcds-colors-beige-100);

  /**
   * templates promo twig styles
   */
  --deprecated-templates-promo-background-indigo: var(--wcds-colors-white);
  --deprecated-templates-promo-background-indigo-text-color: var(--wcds-colors-text-primary);

  /**
   * Faq.tsx styles
   */
  --deprecated-faq-accordion-item-color: var(--wcds-colors-white);

  /**
   * Legacy link/button
   */
  --wcds-legacy-link-color-idle: var(--wcds-colors-black);
  --wcds-legacy-link-color-hover: var(--wcds-colors-black);
  --wcds-legacy-link-color-active: var(--wcds-colors-black);
  --wcds-legacy-button-color-idle: var(--wcds-colors-black);
  --wcds-legacy-button-color-hover: var(--wcds-colors-black);
  --wcds-legacy-button-color-active: var(--wcds-colors-black);

  /**
   * Marketo Form
   */
  --wcds-marketo-form-background-color: var(--wcds-colors-white);
  --wcds-marketo-form-border-color: var(--wcds-colors-border-default-idle);
  --wcds-marketo-form-icon-background-color: var(--wcds-colors-background-default-active);
  --wcds-marketo-form-icon-color: var(--wcds-colors-icon-default);

  /**
   * Related content styles
   */
  --deprecated-related-content-border-color: var(--wcds-colors-gray-800);
  --deprecated-auth-social-button-color: inherit;

  /**
   * TabsComponent - to be removed after the release of the new homepage
   */
  --deprecated-tab-component-border-color: var(--wcds-colors-black);
  --deprecated-tab-component-border-radius: 12px;
  --deprecated-tab-component-component-x-padding: 17px;
  --deprecated-tab-component-component-y-padding: 9px;

  /**
   * Templates Applications
   */
  --deprecated-transparent-link-border-color: var(--wcds-colors-gray-700);
  --deprecated-transparent-link-background-color: var(--wcds-colors-white);
  --deprecated-template-preview-image-border-color: var(--wcds-colors-gray-800);

  /**
   * Pricing Page
   */
  --wcds-new-pricing-logo: initial;
  --wcds-old-pricing-logo: none;
  --wcds-pricing-plan-header-font-size: 32px;
  --wcds-pricing-plan-header-line-height: 120%;
  --wcds-pricing-plan-price-font-size: 56px;
  --wcds-pricing-plan-price-line-height: 115%;
  --wcds-pricing-plan-currency-font-size: 32px;
  --wcds-pricing-plan-currency-line-height: 120%;
  --wcds-pricing-background-color: var(--wcds-colors-body-primary);
  --wcds-pricing-font-feature-settings: 'ss02', 'ss05';
  --wcds-pricing-description-text-opacity: 1.0;
  --wcds-pricing-plan-border-color: var(--wcds-colors-border-default-idle);
}

/**
 * @domain - space and size tokens
 *
 * NOTE: These are temporarily included here so that we can use the same tokens in other frameworks
 */
:root {
  /**
   * Border radius tokens
   */
  --wcds-border-radius-50: 0.25rem;
  --wcds-border-radius-100: 0.5rem;
  --wcds-border-radius-150: 0.75rem;
  --wcds-border-radius-200: 1rem;

  /**
   * Font size tokens
   */
  --fs-150: 0.75rem;
  --fs-175: 0.875rem;
  --fs-200: 1rem;
  --fs-225: 1.125rem;
  --fs-250: 1.25rem;
  --fs-275: 1.375rem;
  --fs-300: 1.5rem;
  --fs-400: 2rem;
  --fs-450: 2.25rem;
  --fs-550: 2.75rem;
  --fs-700: 3.5rem;
  --fs-800: 4rem;
}

/**
 * @domain - cookie banner styling
 */
:root {
  --wcds-cookie-banner-btn-border-radius-xxl: var(--wcds-border-radius-100);
  --wcds-cookie-banner-btn-border-radius-lg: var(--wcds-border-radius-100);
  --wcds-cookie-banner-btn-border-radius-md: var(--wcds-border-radius-100);
  --wcds-cookie-banner-btn-border-radius-sm: var(--wcds-border-radius-50);
  --wcds-cookie-banner-btn-border-radius-xs: var(--wcds-border-radius-50);

  --wcds-cookie-banner-text-color: var(--wcds-colors-text-primary);
  --wcds-cookie-banner-link-underline-color: var(--wcds-cookie-banner-text-color);
  --wcds-cookie-banner-body-background-color: var(--wcds-colors-white);

  --wcds-cookie-banner-primary-btn-hover-background-color: var(--wcds-colors-background-btn-primary-hover);
  --wcds-cookie-banner-primary-btn-hover-text-color: var(--wcds-colors-text-btn-primary-hover);
  --wcds-cookie-banner-primary-btn-idle-background-color: var(--wcds-colors-background-btn-primary-idle);
  --wcds-cookie-banner-primary-btn-idle-border-color: var(--wcds-colors-border-btn-primary-idle);
  --wcds-cookie-banner-primary-btn-idle-text-color: var(--wcds-colors-text-btn-primary-idle);

  --wcds-cookie-banner-link-btn-hover-background-color: var(--wcds-colors-background-btn-link-hover);
  --wcds-cookie-banner-link-btn-hover-text-color: var(--wcds-colors-text-btn-link-hover);
  --wcds-cookie-banner-link-btn-idle-background-color: var(--wcds-colors-background-btn-link-idle);
  --wcds-cookie-banner-link-btn-idle-text-color: var(--wcds-colors-text-btn-link-idle);

  --wcds-cookie-banner-secondary-btn-hover-background-color: var(--wcds-colors-background-btn-tertiary-hover);
  --wcds-cookie-banner-secondary-btn-hover-text-color: var(--wcds-colors-text-btn-tertiary-hover);
  --wcds-cookie-banner-secondary-btn-idle-border-color: var(--wcds-colors-border-btn-tertiary-idle);
  --wcds-cookie-banner-secondary-btn-idle-text-color: var(--wcds-colors-text-btn-tertiary-idle);

  --wcds-cookie-banner-toggle-active-background-color: var(--wcds-colors-black);
  --wcds-cookie-banner-toggle-hover-background-color: var(--wcds-colors-black-40);
  --wcds-cookie-banner-toggle-idle-background-color: var(--wcds-colors-black-30);
}

/**
 * @domain - Button component alias tokens
 */
:root {
  --wcds-global-border-radius: var(--wcds-border-radius-100);
  /**
   * Web Core Design System: Global Button Component Alias Tokens
   *
   * Note: These tokens are used by all button variants
   */
  --wcds-btn-border-color-focus: #CFD5F1;
  --wcds-btn-focus-width: 0.25rem;
  --wcds-btn-border-radius: var(--wcds-global-border-radius);
  --wcds-btn-squared-border-radius: var(--wcds-btn-border-radius);

  --wcds-focus-border-offset: -0.125rem;
  --wcds-focus-border-width: 0.063rem;
  --wcds-focus-extra-outer-border-width: 0.438rem;
  --wcds-focus-outer-border-width: 0.188rem;
  --wcds-focus-border-radius: calc(var(--wcds-focus-outer-border-width) + var(--wcds-focus-extra-outer-border-width) - var(--wcds-focus-border-width));

  --wcds-btn-padding-y-sm: 0.25rem;
  --wcds-btn-padding-x-sm: 0.25rem;
  --wcds-btn-font-size-sm: var(--fs-200);

  --wcds-btn-padding-y: 0.5rem;
  --wcds-btn-padding-x: 0.75rem;
  --wcds-btn-font-size: var(--fs-225);

  --wcds-btn-padding-x-lg: 1rem;
  --wcds-btn-padding-y-lg: 0.75rem;
  --wcds-btn-font-size-lg: var(--fs-225);

  --wcds-btn-line-height: 1.5rem;
  --deprecated-negative-margin-to-support-icon-in-buttons: -0.25rem;

  --wcds-colors-background-btn-disabled: var(--wcds-colors-gray-200);
  --wcds-colors-border-btn-disabled: var(--wcds-colors-background-btn-disabled);
  --wcds-colors-text-btn-disabled: var(--wcds-colors-gray-600);
  --wcds-colors-focus-ring-default: var(--wcds-colors-blue-700);

  /**
   * Web Core Design System: Primary Button Component Color Tokens
   */
  --wcds-colors-background-btn-primary-down: var(--wcds-colors-blue-900);
  --wcds-colors-background-btn-primary-focus: var(--wcds-colors-background-btn-primary-down);
  --wcds-colors-background-btn-primary-hover: var(--wcds-colors-blue-800);
  --wcds-colors-background-btn-primary-idle: var(--wcds-colors-blue-700);
  --wcds-colors-border-btn-primary-down: var(--wcds-colors-background-btn-primary-down);
  --wcds-colors-border-btn-primary-focus: var(--wcds-colors-border-btn-primary-idle);
  --wcds-colors-border-btn-primary-hover: var(--wcds-colors-background-btn-primary-hover);
  --wcds-colors-border-btn-primary-idle: var(--wcds-colors-background-btn-primary-idle);
  --wcds-colors-text-btn-primary-down: var(--wcds-colors-text-btn-primary-idle);
  --wcds-colors-text-btn-primary-focus: var(--wcds-colors-text-btn-primary-hover);
  --wcds-colors-text-btn-primary-hover: var(--wcds-colors-text-btn-primary-idle);
  --wcds-colors-text-btn-primary-idle: var(--wcds-colors-text-tertiary);

  /**
   * Web Core Design System: Outline Button Component Color Tokens
   */
  --wcds-colors-background-btn-outline-down: var(--wcds-colors-background-btn-secondary-down);
  --wcds-colors-background-btn-outline-focus: var(--wcds-colors-background-btn-secondary-focus);
  --wcds-colors-background-btn-outline-hover: var(--wcds-colors-background-btn-secondary-hover);
  --wcds-colors-background-btn-outline-idle: var(--wcds-colors-background-btn-secondary-idle);
  --wcds-colors-border-btn-outline-down: var(--wcds-colors-border-btn-secondary-down);
  --wcds-colors-border-btn-outline-hover: var(--wcds-colors-border-btn-secondary-hover);
  --wcds-colors-border-btn-outline-idle: var(--wcds-colors-border-btn-secondary-idle);
  --wcds-colors-text-btn-outline-down: var(--wcds-colors-text-btn-outline-hover);
  --wcds-colors-text-btn-outline-focus: var(--wcds-colors-text-btn-secondary-idle);
  --wcds-colors-text-btn-outline-hover: var(--wcds-colors-text-btn-secondary-hover);
  --wcds-colors-text-btn-outline-idle: var(--wcds-colors-text-btn-secondary-idle);

  /**
   * Web Core Design System: Secondary Button Component Color Tokens
   */
  --wcds-colors-background-btn-secondary-down: var(--wcds-colors-gray-800);
  --wcds-colors-background-btn-secondary-focus: var(--wcds-colors-background-btn-secondary-idle);
  --wcds-colors-background-btn-secondary-hover: var(--wcds-colors-black);
  --wcds-colors-background-btn-secondary-idle: var(--wcds-colors-white);
  --wcds-colors-border-btn-secondary-down: var(--wcds-colors-border-btn-secondary-idle);
  --wcds-colors-border-btn-secondary-focus: var(--wcds-colors-border-btn-secondary-idle);
  --wcds-colors-border-btn-secondary-hover: var(--wcds-colors-border-btn-secondary-idle);
  --wcds-colors-border-btn-secondary-idle: var(--wcds-colors-black);
  --wcds-colors-text-btn-secondary-down: var(--wcds-colors-text-btn-secondary-hover);
  --wcds-colors-text-btn-secondary-focus: var(--wcds-colors-text-btn-secondary-idle);
  --wcds-colors-text-btn-secondary-hover: var(--wcds-colors-text-tertiary);
  --wcds-colors-text-btn-secondary-idle: var(--wcds-colors-text-primary);

  /**
   * Web Core Design System: Tertiary Button Component Color Tokens
   */
  --wcds-colors-background-btn-tertiary-down: var(--wcds-colors-gray-900);
  --wcds-colors-background-btn-tertiary-hover: var(--wcds-colors-black);
  --wcds-colors-background-btn-tertiary-idle: var(--wcds-colors-white);
  --wcds-colors-border-btn-tertiary-down: var(--wcds-colors-border-btn-secondary-idle);
  --wcds-colors-border-btn-tertiary-hover: var(--wcds-colors-border-btn-secondary-idle);
  --wcds-colors-border-btn-tertiary-idle: var(--wcds-colors-black);
  --wcds-colors-text-btn-tertiary-hover: var(--wcds-colors-text-tertiary);
  --wcds-colors-text-btn-tertiary-idle: var(--wcds-colors-text-primary);

  /**
   * Web Core Design System: Ghost Button Component Color Tokens
   */
  --wcds-colors-background-btn-ghost-down: var(--wcds-colors-background-btn-tertiary-down);
  --wcds-colors-background-btn-ghost-hover: var(--wcds-colors-background-btn-tertiary-hover);
  --wcds-colors-background-btn-ghost-idle: var(--wcds-colors-background-btn-tertiary-idle);
  --wcds-colors-border-btn-ghost-down: var(--wcds-colors-border-btn-tertiary-down);
  --wcds-colors-border-btn-ghost-hover: var(--wcds-colors-border-btn-tertiary-hover);
  --wcds-colors-border-btn-ghost-idle: var(--wcds-colors-border-btn-tertiary-idle);
  --wcds-colors-text-btn-ghost-down: var(--wcds-colors-text-btn-tertiary-hover);
  --wcds-colors-text-btn-ghost-hover: var(--wcds-colors-text-btn-tertiary-hover);
  --wcds-colors-text-btn-ghost-idle: var(--wcds-colors-text-btn-tertiary-idle);

  /**
   * Web Core Design System: Link Button Component Color Tokens
   */
  --wcds-btn-link-padding-x: calc(0.5rem - 1px);
  --wcds-btn-link-padding-y: calc(0.5rem - 1px);
  --wcds-btn-link-focus-border-offset-y: calc(var(--wcds-btn-link-padding-y) - 1px);
  --wcds-btn-link-focus-border-offset-x: calc(var(--wcds-btn-link-padding-x) - 4px);
  --wcds-btn-link-focus-border-radius: calc(0.5rem - 3px);
  --wcds-btn-link-text-decoration: var(--wcds-btn-link-text-decoration-idle);
  --wcds-btn-link-text-decoration-idle: none;
  --wcds-btn-link-text-decoration-hover: underline;
  --wcds-colors-background-btn-link-active: var(--wcds-colors-background-default-active);
  --wcds-colors-background-btn-link-disabled: var(--wcds-colors-transparent);
  --wcds-colors-background-btn-link-focus: var(--wcds-colors-background-btn-link-idle);
  --wcds-colors-background-btn-link-hover: var(--wcds-colors-background-default-hover);
  --wcds-colors-background-btn-link-idle: var(--wcds-colors-transparent);
  --wcds-colors-border-btn-link-active: var(--wcds-colors-transparent);
  --wcds-colors-border-btn-link-disabled: var(--wcds-colors-transparent);
  --wcds-colors-border-btn-link-down: var(--wcds-colors-transparent);
  --wcds-colors-border-btn-link-hover: var(--wcds-colors-transparent);
  --wcds-colors-border-btn-link-idle: var(--wcds-colors-transparent);
  --wcds-colors-text-btn-link-active: var(--wcds-colors-text-btn-link-idle);
  --wcds-colors-text-btn-link-disabled: var(--wcds-colors-transparent);
  --wcds-colors-text-btn-link-down: var(--wcds-colors-text-btn-link-idle);
  --wcds-colors-text-btn-link-focus: var(--wcds-colors-text-btn-link-hover);
  --wcds-colors-text-btn-link-hover: var(--wcds-colors-text-btn-link-idle);
  --wcds-colors-text-btn-link-idle: var(--wcds-colors-text-primary);

  /**
   * Web Core Design System: Dropdown Component Color Tokens
   */
  --wcds-colors-background-btn-dropdown-active: var(--wcds-colors-background-btn-dropdown-idle);
  --wcds-colors-background-btn-dropdown-hover: var(--wcds-colors-gray-100);
  --wcds-colors-background-btn-dropdown-idle: var(--wcds-colors-white);
  --wcds-colors-border-btn-dropdown-active: var(--wcds-colors-gray-900);
  --wcds-colors-border-btn-dropdown-hover: var(--wcds-colors-gray-800);
  --wcds-colors-border-btn-dropdown-idle: var(--wcds-colors-black);
  --wcds-colors-text-btn-dropdown-active: var(--wcds-colors-text-btn-dropdown-idle);
  --wcds-colors-text-btn-dropdown-hover: var(--wcds-colors-text-btn-dropdown-idle);
  --wcds-colors-text-btn-dropdown-idle: var(--wcds-colors-black);

  /**
   * Web Core Design System: Card Component Color Tokens
   */
  --wcds-colors-background-card: var(--wcds-colors-white);
}

/**
 * @domain - anchor link styling
 */
:root {
  /**
   * Web Core Design System: Links
   */
  --wcds-link-text-decoration-idle: none;
  --wcds-link-text-decoration-active: none;
  --wcds-link-text-decoration-disabled: none;
  --wcds-link-text-decoration-focus: none;
  --wcds-link-text-decoration-hover: none;
  --wcds-link-text-color-idle: var(--wcds-colors-text-primary);
}

/**
 * @domain - Input component alias tokens
 */
:root {
  --wcds-input-border-radius: var(--wcds-border-radius-100);
  --wcds-input-padding-x: 0.75rem;
  --wcds-input-padding-y: 0.75rem;
}

/*
 * Overrides for the dark theme (AI page)
 */
.page-3HNXi1xdrIY9oOAeCuamjp {
  --wcds-colors-text-primary: var(--wcds-colors-white);
  --wcds-colors-body-primary: var(--wcds-colors-black);
  --colors-font-default-idle: var(--wcds-colors-black);

  --wcds-legacy-link-color-idle: var(--wcds-colors-black);
  --wcds-legacy-link-text-color-idle: var(--wcds-colors-black);

  --wcds-colors-text-btn-primary: var(--wcds-colors-white);
  --wcds-colors-text-btn-outline-idle: var(--wcds-colors-black);
  --wcds-colors-text-btn-link-hover: var(--wcds-colors-black);
  --wcds-colors-text-btn-link-idle: var(--wcds-colors-white);

  --wcds-header-text-color: var(--wcds-colors-black);

  /**
   * Web Core Design System: Card Component
   */
  --wcds-colors-background-card: var(--wcds-colors-gray-900);
  --wcds-colors-border-card-hover: var(--wcds-colors-white);

  /**
   * Web Core Design System: Accordion Component
   */
  --wcds-colors-background-accordion-idle: var(--wcds-colors-gray-900);
  --wcds-colors-border-accordion-idle: var(--wcds-colors-gray-800);
  --wcds-colors-accordion-link: var(--wcds-colors-yellow-600);
}