/**
 * Theme: Legacy theme from CDN
 */
: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);
}