/**
 * Theme: Legacy
 */
:root {
  --wcds-colors-black: #090909;
  --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: #050038;
  --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-white: #ffffff;
  --wcds-colors-yellow-20: #fdf1c6;
  --wcds-colors-yellow-60: #ffd02f;
  --wcds-colors-beige-100: #fbf7ef;

  --wcds-colors-black-rgb: 9, 9, 9;
  --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: 5, 0, 56;
  --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-white-rgb: 255, 255, 255;
  --wcds-colors-yellow-20-rgb: 253, 241, 198;
  --wcds-colors-yellow-60-rgb: 255, 208, 47;

  --wcds-colors-background-cta-active: var(--wcds-colors-blue-80);
  --wcds-colors-background-cta-disabled: var(--wcds-colors-gray-20);
  --wcds-colors-background-cta-hover: var(--wcds-colors-blue-70);
  --wcds-colors-background-cta-idle: var(--wcds-colors-blue-60);
  --wcds-colors-background-danger-active: var(--wcds-colors-red-20);
  --wcds-colors-background-danger-hover: var(--wcds-colors-red-10);
  --wcds-colors-background-danger-idle: var(--wcds-colors-red-60);
  --wcds-colors-background-default-active: var(--wcds-colors-blue-20);
  --wcds-colors-background-default-disabled: var(--wcds-colors-gray-20);
  --wcds-colors-background-default-hover: var(--wcds-colors-blue-10);
  --wcds-colors-background-default-idle: var(--wcds-colors-white);
  --wcds-colors-background-default-selected: var(--wcds-colors-blue-10);
  --wcds-colors-background-default-selected-active: var(--wcds-colors-blue-20);
  --wcds-colors-background-info-idle: var(--wcds-colors-indigo-90);
  --wcds-colors-background-primary: var(--wcds-colors-white);
  --wcds-colors-background-secondary: var(--wcds-colors-indigo-90);
  --wcds-colors-background-success-idle: var(--wcds-colors-green-70);
  --wcds-colors-background-warning-idle: var(--wcds-colors-yellow-60);
  --wcds-colors-border-cta-idle: var(--wcds-colors-blue-60);
  --wcds-colors-border-default-active: var(--wcds-colors-blue-80);
  --wcds-colors-border-default-error: var(--wcds-colors-red-60);
  --wcds-colors-border-default-hover: var(--wcds-colors-blue-70);
  --wcds-colors-border-default-idle: var(--wcds-colors-indigo-30);
  --wcds-colors-border-default-selected: var(--wcds-colors-blue-60);
  --wcds-colors-canvas-primary: var(--wcds-colors-gray-20);
  --wcds-colors-divider-default: var(--wcds-colors-gray-30);
  --wcds-colors-focus-ring-default: var(--wcds-colors-blue-50);
  --wcds-colors-text-cta-idle: var(--wcds-colors-white);
  --wcds-colors-text-default-active: var(--wcds-colors-blue-80);
  --wcds-colors-text-default-disabled: var(--wcds-colors-indigo-30);
  --wcds-colors-text-default-error: var(--wcds-colors-red-60);
  --wcds-colors-text-default-hover: var(--wcds-colors-blue-70);
  --wcds-colors-text-default-idle: var(--wcds-colors-blue-60);
  --wcds-colors-text-default-selected: var(--wcds-colors-blue-60);
  --wcds-colors-text-default-visited: var(--wcds-colors-blue-60);
  --wcds-colors-text-primary: var(--wcds-colors-indigo-90);
  --wcds-colors-text-secondary: var(--wcds-colors-indigo-50);
  --wcds-colors-text-tertiary: var(--wcds-colors-white);
  --wcds-colors-icon-cta-idle: var(--wcds-colors-white);
  --wcds-colors-icon-default: var(--wcds-colors-indigo-90);
  --wcds-colors-icon-default-active: var(--wcds-colors-blue-80);
  --wcds-colors-icon-default-disabled: var(--wcds-colors-indigo-30);
  --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);

  /**
   * Web Core Design System: Global Button Component Color Tokens
   */
  --wcds-colors-background-btn-disabled: var(--wcds-colors-background-cta-disabled);
  --wcds-colors-border-btn-disabled: var(--wcds-colors-border-cta-idle);
  --wcds-colors-text-btn-disabled: var(--wcds-colors-text-default-disabled);

  /**
   * Web Core Design System: Primary Button Component Color Tokens
   */
  --wcds-colors-background-btn-primary-down: var(--wcds-colors-background-cta-active);
  --wcds-colors-background-btn-primary-hover: var(--wcds-colors-background-cta-hover);
  --wcds-colors-background-btn-primary-idle: var(--wcds-colors-background-cta-idle);
  --wcds-colors-border-btn-primary-down: var(--wcds-colors-background-cta-active);
  --wcds-colors-border-btn-primary-hover: var(--wcds-colors-background-cta-hover);
  --wcds-colors-border-btn-primary-idle: var(--wcds-colors-border-cta-idle);
  --wcds-colors-text-btn-primary-idle: var(--wcds-colors-text-cta-idle);

  /**
   * Web Core Design System: Secondary Button Component Color Tokens
   */
  --wcds-colors-background-btn-secondary-down: var(--wcds-colors-transparent);
  --wcds-colors-background-btn-secondary-hover: var(--wcds-colors-transparent);
  --wcds-colors-background-btn-secondary-idle: var(--wcds-colors-background-secondary);
  --wcds-colors-border-btn-secondary-down: 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-background-secondary);
  --wcds-colors-text-btn-secondary-idle: var(--wcds-colors-text-tertiary);
  --wcds-colors-text-btn-secondary-hover: var(--wcds-colors-text-primary);

  /**
   * Web Core Design System: Tertiary Button Component Color Tokens
   */
  --wcds-colors-background-btn-tertiary-down: var(--wcds-colors-transparent);
  --wcds-colors-background-btn-tertiary-hover: var(--wcds-colors-background-secondary);
  --wcds-colors-background-btn-tertiary-idle: var(--wcds-colors-background-secondary);
  --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-background-secondary);
  --wcds-colors-text-btn-tertiary-idle: var(--wcds-colors-text-primary);
  --wcds-colors-text-btn-tertiary-hover: var(--wcds-colors-text-tertiary);

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

  /**
   * 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-indigo-90);
}

/**
 * Design Tokens for the Web Core Design System and
 * Proposed extra design tokens
 */
:root {
  /**
   * Proposed rgb alias colors
   */
  --wcds-colors-primary-rgb: var(--wcds-colors-indigo-90-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-indigo-90);
  --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;

  /* Footer */
  --wcds-footer-background-color: var(--wcds-colors-indigo-90);
  --wcds-footer-link-active-color: var(--wcds-colors-yellow-60);
  --wcds-footer-link-hover-color: var(--wcds-colors-yellow-60);
  --wcds-footer-border-color: var(--wcds-colors-indigo-30);
  --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);

  /* 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-60);
  --wcds-dark-language-switcher-font-color-hover: var(--wcds-colors-yellow-60);
  --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-indigo-90);
  --wcds-tooltip-border-color: var(--wcds-colors-indigo-90);
  --wcds-tooltip-text-color: var(--wcds-colors-blue-50);
  --wcds-tooltip-icon-color: var(--wcds-colors-white);

  /* Fonts */
  --wcds-font-primary: 'Spoof', Helvetica, Arial, sans-serif;
  --wcds-font-secondary: 'Formular', 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;
}

/**
 * Design Tokens for Styled Components
 *
 * @deprecated - DO NOT USE IN NEW COMPONENTS
 */
:root {
  /* Legacy colors that have transparency */
  --deprecated-legacy-colors-blue-70-alpha-10: rgba(var(--wcds-colors-blue-70-rgb), 0.10);
  --deprecated-legacy-colors-indigo-90-alpha-10: rgba(var(--wcds-colors-indigo-90-rgb), 0.10);
  --deprecated-legacy-colors-indigo-90-alpha-20: rgba(var(--wcds-colors-indigo-90-rgb), 0.20);
  --deprecated-legacy-colors-indigo-90-alpha-3: rgba(var(--wcds-colors-indigo-90-rgb), 0.03);
  --deprecated-legacy-colors-indigo-90-alpha-40: rgba(var(--wcds-colors-indigo-90-rgb), 0.40);
  --deprecated-legacy-colors-indigo-90-alpha-60: rgba(var(--wcds-colors-indigo-90-rgb), 0.60);
  --deprecated-legacy-colors-indigo-90-alpha-90: rgba(var(--wcds-colors-indigo-90-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-indigo-90);
  --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-blue-70);
  --deprecated-legacy-transparent-border-idle: var(--wcds-colors-blue-60);
  --deprecated-legacy-transparent-border-hover: var(--wcds-colors-blue-70);
  --deprecated-legacy-transparent-color-idle: var(--wcds-colors-blue-60);
  --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-indigo-90);
  --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-indigo-90);
  --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-indigo-90);
  --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
 */
:root {
  --deprecated-twig-grey-background-color: rgba(var(--wcds-colors-indigo-90-rgb), 0.03);
  --deprecated-twig-indigo-background-color: var(--wcds-colors-indigo-90);
  --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-indigo-90);

  /* 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-indigo-90);
  --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-indigo-90);

  /* feature-2.css */
  --deprecated-twig-feature-2-background-color: var(--wcds-colors-white);
  --deprecated-twig-feature-2-font-color: var(--wcds-colors-indigo-90);
  --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-indigo-90);
  --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
 */
:root {
  --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-border-cta-idle: var(--wcds-colors-border-btn-primary-idle);
  --colors-font-cta-idle: var(--wcds-colors-text-btn-primary-idle);
  --colors-font-default-disabled: var(--wcds-colors-text-btn-disabled);

  --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-default-active);
  --colors-background-default-disabled: var(--wcds-colors-background-default-disabled);
  --colors-background-default-hover: var(--wcds-colors-background-default-hover);
  --colors-background-default-idle: var(--wcds-colors-background-default-idle);
  --colors-background-default-selected: var(--wcds-colors-background-default-selected);
  --colors-background-default-selected-active: var(--wcds-colors-background-default-selected-active);
  --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-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-default-active: var(--wcds-colors-text-default-active);
  --colors-font-default-error: var(--wcds-colors-text-default-error);
  --colors-font-default-hover: var(--wcds-colors-text-default-hover);
  --colors-font-default-idle: var(--wcds-colors-text-default-idle);
  --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: var(--wcds-colors-icon-default);
  --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);
}