diff --git a/.github/actions/audit-accessibility/main.js b/.github/actions/audit-accessibility/main.js
index fbb1b3d3ac..b476aeac6a 100644
--- a/.github/actions/audit-accessibility/main.js
+++ b/.github/actions/audit-accessibility/main.js
@@ -246,7 +246,7 @@ const main = async () => {
     }
 
     const stories = getStories().filter((story) => !STORIES_BLACKLIST.has(story));
-    const skins = ['Movistar-new', 'O2-new', 'Vivo-new', 'Blau'];
+    const skins = ['Movistar-new', 'O2-new', 'Vivo', 'Vivo-evolution', 'Blau'];
 
     /**
      * @type Array<[story: string, skin: string]>
diff --git a/.storybook/colors.ts b/.storybook/colors.ts
index a49b5ea567..f584fcf83b 100644
--- a/.storybook/colors.ts
+++ b/.storybook/colors.ts
@@ -5,8 +5,8 @@ export const AVAILABLE_SKINS = [
     'Movistar',
     'O2-new',
     'O2',
-    'Vivo-new',
     'Vivo',
+    'Vivo-evolution',
     'Telefonica',
     'Blau',
     'Esimflag',
@@ -37,7 +37,7 @@ export const getColors = (skin: Skin): SkinTheme => {
                 textSecondary: '#605e5c',
             };
         case 'Vivo':
-        case 'Vivo-new':
+        case 'Vivo-evolution':
             return {
                 primary: '#660099',
                 textPrimary: '#000000',
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index dae1448ddb..8e63864e94 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -11,7 +11,7 @@ import {
     MOVISTAR_SKIN,
     MOVISTAR_NEW_SKIN,
     VIVO_SKIN,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     O2_SKIN,
     O2_NEW_SKIN,
     TELEFONICA_SKIN,
@@ -39,7 +39,7 @@ const getSkin = (searchParams: URLSearchParams) => {
         O2_SKIN,
         O2_NEW_SKIN,
         VIVO_SKIN,
-        VIVO_NEW_SKIN,
+        VIVO_EVOLUTION_SKIN,
         TELEFONICA_SKIN,
         BLAU_SKIN,
         TU_SKIN,
@@ -133,7 +133,9 @@ const MisticaThemeProvider = ({
             {((skin && colorScheme && platform) || isStoryOnNewTab) && (
                 <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
                     <OverscrollColorProvider>
-                        {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
+                        {(skin === VIVO_SKIN || skin === VIVO_EVOLUTION_SKIN) && (
+                            <style>{`body {font-family: "Vivo Type"}`}</style>
+                        )}
                         {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && (
                             <style>{`body {font-family: "Telefonica Sans"}`}</style>
                         )}
diff --git a/.storybook/themes.tsx b/.storybook/themes.tsx
index cf588c3c08..19211951d7 100644
--- a/.storybook/themes.tsx
+++ b/.storybook/themes.tsx
@@ -4,7 +4,7 @@ import {
     getO2Skin,
     getO2NewSkin,
     getVivoSkin,
-    getVivoNewSkin,
+    getVivoEvolutionSkin,
     getTelefonicaSkin,
     getBlauSkin,
     getTuSkin,
@@ -37,9 +37,9 @@ export const Vivo = {
     skin: getVivoSkin(),
 } as const;
 
-export const Vivo_New = {
+export const Vivo_Evolution = {
     i18n: {locale: 'pt-BR', phoneNumberFormattingRegionCode: 'BR'},
-    skin: getVivoNewSkin(),
+    skin: getVivoEvolutionSkin(),
 } as const;
 
 export const Telefonica = {
@@ -73,7 +73,7 @@ export const AVAILABLE_THEMES = [
     O2,
     O2_New,
     Vivo,
-    Vivo_New,
+    Vivo_Evolution,
     Telefonica,
     Blau,
     Tu,
diff --git a/css/vivo-evolution.css b/css/vivo-evolution.css
new file mode 100644
index 0000000000..3dcdf8ddaa
--- /dev/null
+++ b/css/vivo-evolution.css
@@ -0,0 +1,1542 @@
+[data-mistica-skin='vivo-evolution'] {
+    /* Palette colors */
+    --mistica-vivo-evolution-white: #ffffff;
+    --mistica-vivo-evolution-grey1: #f6f6f6;
+    --mistica-vivo-evolution-vivoPurple: #660099;
+    --mistica-vivo-evolution-vivoPurpleDark: #461e5f;
+    --mistica-vivo-evolution-vivoPurpleLight80: #8433ad;
+    --mistica-vivo-evolution-pepperLight10: #fce4ef;
+    --mistica-vivo-evolution-grey3: #dddddd;
+    --mistica-vivo-evolution-vivoPurpleLight10: #efe5f4;
+    --mistica-vivo-evolution-grey2: #eeeeee;
+    --mistica-vivo-evolution-grey5: #666666;
+    --mistica-vivo-evolution-pepper: #cc1f59;
+    --mistica-vivo-evolution-pepperDark: #b71d63;
+    --mistica-vivo-evolution-vivoPurpleLight20: #e0cceb;
+    --mistica-vivo-evolution-grey4: #8a8c90;
+    --mistica-vivo-evolution-vivoPurpleLight50: #b280cc;
+    --mistica-vivo-evolution-grey6: #000000;
+    --mistica-vivo-evolution-vivoGreen: #99cc33;
+    --mistica-vivo-evolution-orange: #ff9900;
+    --mistica-vivo-evolution-pink: #eb3d7d;
+    --mistica-vivo-evolution-vivoGreenLight10: #edf8e8;
+    --mistica-vivo-evolution-orangeLight10: #ffefe1;
+    --mistica-vivo-evolution-vivoGreenDark: #225c3d;
+    --mistica-vivo-evolution-orangeDark: #972a1d;
+    --mistica-vivo-evolution-pepperDark80: #8f2052;
+    --mistica-vivo-evolution-darkModeBlack: #191919;
+    --mistica-vivo-evolution-darkModeGrey: #242424;
+    --mistica-vivo-evolution-darkModeGrey6: #313235;
+    --mistica-vivo-evolution-darkModeGrey5: #6d7d88;
+    --mistica-vivo-evolution-vivoGreenLight30: #91ae9e;
+    --mistica-vivo-evolution-orangeLight40: #ffb84c;
+    --mistica-vivo-evolution-pepperLight40: #db628b;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-vivo-evolution-raw-darkModeBlack: 25, 25, 25;
+    --mistica-vivo-evolution-raw-grey6: 0, 0, 0;
+    --mistica-vivo-evolution-raw-vivoPurple: 102, 0, 153;
+    --mistica-vivo-evolution-raw-vivoPurpleDark: 70, 30, 95;
+    --mistica-vivo-evolution-raw-white: 255, 255, 255;
+    --mistica-vivo-evolution-raw-darkModeGrey: 36, 36, 36;
+
+    /* Colors */
+    --mistica-color-background: var(--mistica-vivo-evolution-white);
+    --mistica-color-backgroundAlternative: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-backgroundBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-backgroundNegative: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-backgroundContainer: var(--mistica-vivo-evolution-white);
+    --mistica-color-backgroundContainerError: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.05);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.08);
+    --mistica-color-backgroundContainerBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(
+        var(--mistica-vivo-evolution-raw-darkModeBlack),
+        0.4
+    );
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.6);
+    --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.2);
+    --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-backgroundBrandTop: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-backgroundBrandBottom: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-appBarBackground: var(--mistica-vivo-evolution-white);
+    --mistica-color-navigationBarBackground: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-evolution-raw-vivoPurple), 0.06);
+    --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-evolution-raw-vivoPurpleDark), 0.3);
+    --mistica-color-backgroundDropZoneBrandDragover: rgba(
+        var(--mistica-vivo-evolution-raw-vivoPurpleDark),
+        0.5
+    );
+    --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+    --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.17);
+    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-evolution-raw-vivoPurpleDark), 0.3);
+    --mistica-color-backgroundDropZoneMediaDragover: rgba(
+        var(--mistica-vivo-evolution-raw-vivoPurpleDark),
+        0.5
+    );
+    --mistica-color-skeletonWave: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-borderLow: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-border: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-borderHigh: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-borderSelected: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-evolution-pepperDark);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-evolution-pepperDark);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+    --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+    --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-textButtonPrimary: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonSecondary: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLink: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textLinkInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLinkNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLinkBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLinkMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLinkDanger: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textLinkDangerMedia: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textLinkSnackbar: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-textActivated: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-inputBorder: var(--mistica-vivo-evolution-grey4);
+    --mistica-color-inputBorderInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-inputBorderNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-inputBorderBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-completedStep: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-completedStepInverse: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-completedStepNegative: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-completedStepBrand: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-control: var(--mistica-vivo-evolution-grey4);
+    --mistica-color-controlActivated: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-controlInverse: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-controlNegative: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-controlBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-controlActivatedInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-controlActivatedNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-controlActivatedBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-controlError: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-chevronIndicator: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-barTrack: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0.5);
+    --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0.5);
+    --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0.5);
+    --mistica-color-loadingBar: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-loadingBarBackground: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-toggleAndroidInactive: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-iosControlKnob: var(--mistica-vivo-evolution-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-controlKnobNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-controlKnobBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-divider: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-dividerInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0.2);
+    --mistica-color-dividerNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0.2);
+    --mistica-color-dividerBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-badge: var(--mistica-vivo-evolution-pepperDark);
+    --mistica-color-feedbackErrorBackground: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-brand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-brandHigh: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-inverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-negative: var(--mistica-vivo-evolution-white);
+    --mistica-color-neutralHigh: var(--mistica-vivo-evolution-grey6);
+    --mistica-color-neutralHighNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-neutralHighBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-neutralMedium: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralMediumNegative: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralMediumBrand: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralLow: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textPrimary: var(--mistica-vivo-evolution-grey6);
+    --mistica-color-textPrimaryInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-textPrimaryNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-textPrimaryBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-textSecondary: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-textSecondaryNegative: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-textSecondaryBrand: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-textSecondaryMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-success: var(--mistica-vivo-evolution-vivoGreen);
+    --mistica-color-warning: var(--mistica-vivo-evolution-orange);
+    --mistica-color-error: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textError: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textErrorInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-textErrorNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-textErrorBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-promo: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-highlight: var(--mistica-vivo-evolution-pink);
+    --mistica-color-successLow: var(--mistica-vivo-evolution-vivoGreenLight10);
+    --mistica-color-warningLow: var(--mistica-vivo-evolution-orangeLight10);
+    --mistica-color-errorLow: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-promoLow: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-brandLow: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-successHigh: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-warningHigh: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-errorHigh: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-promoHigh: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-successHighInverse: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-successHighNegative: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-successHighBrand: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-warningHighInverse: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-warningHighNegative: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-warningHighBrand: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-errorHighInverse: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-errorHighNegative: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-errorHighBrand: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-promoHighInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-promoHighNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-promoHighBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-evolution-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-evolution-white);
+    --mistica-color-textAppBar: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-iosGlassAppBar: var(--mistica-vivo-evolution-grey6);
+    --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-customTabsBackground: var(--mistica-vivo-evolution-white);
+    --mistica-color-tagTextPromo: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextActive: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextInactive: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInfo: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextSuccess: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-tagTextWarning: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-tagTextError: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-tagBackgroundPromo: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActive: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-tagBackgroundInactive: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-tagBackgroundInfo: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-evolution-vivoGreenLight10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-evolution-orangeLight10);
+    --mistica-color-tagBackgroundError: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-tagTextPromoInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextPromoNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextPromoBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextActiveInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextActiveNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextActiveBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInfoInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextInfoNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextInfoBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-tagTextWarningInverse: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-tagTextWarningNegative: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-tagTextWarningBrand: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-tagTextErrorInverse: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-tagTextErrorNegative: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-tagTextErrorBrand: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-evolution-grey1);
+    --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-evolution-vivoGreenLight10);
+    --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-evolution-vivoGreenLight10);
+    --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-evolution-vivoGreenLight10);
+    --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-evolution-orangeLight10);
+    --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-evolution-orangeLight10);
+    --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-evolution-orangeLight10);
+    --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-vivo-evolution-raw-grey6), 0) 0%,
+        rgba(var(--mistica-vivo-evolution-raw-grey6), 0.4) 30%,
+        rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7) 100%
+    );
+    --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7);
+
+    /* Border radius */
+    --mistica-border-radius-avatar: 50%;
+    --mistica-border-radius-bar: 999px;
+    --mistica-border-radius-button: 32px;
+    --mistica-border-radius-checkbox: 4px;
+    --mistica-border-radius-container: 24px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 10px;
+    --mistica-border-radius-input: 16px;
+    --mistica-border-radius-legacyDisplay: 24px;
+    --mistica-border-radius-popup: 16px;
+    --mistica-border-radius-sheet: 24px;
+    --mistica-border-radius-mediaSmall: 12px;
+
+    /* Text */
+    --mistica-font-size-1: 0.75rem;
+    --mistica-line-height-1: 1rem;
+    --mistica-font-size-2: 0.875rem;
+    --mistica-line-height-2: 1.25rem;
+    --mistica-font-size-3: 1rem;
+    --mistica-line-height-3: 1.5rem;
+    --mistica-font-size-4: 1.125rem;
+    --mistica-line-height-4: 1.5rem;
+    --mistica-font-size-5: 1.25rem;
+    --mistica-line-height-5: 1.5rem;
+    --mistica-font-weight-5: 500;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 500;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 500;
+    --mistica-font-size-8: 2rem;
+    --mistica-line-height-8: 2.5rem;
+    --mistica-font-weight-8: 400;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 400;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 400;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 500;
+    --mistica-font-size-drawerTitle: 1.25rem;
+    --mistica-line-height-drawerTitle: 1.5rem;
+    --mistica-font-weight-drawerTitle: 500;
+    --mistica-font-weight-rowTitle: 400;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1.125rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-size-title1: 0.75rem;
+    --mistica-line-height-title1: 1rem;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 500;
+    --mistica-font-size-title3: 1.125rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 500;
+    --mistica-font-size-title4: 1.5rem;
+    --mistica-line-height-title4: 2rem;
+    --mistica-font-weight-title4: 500;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 400;
+    --mistica-font-size-chipLabel: 0.875rem;
+    --mistica-line-height-chipLabel: 1.25rem;
+    --mistica-font-weight-chipLabel: 500;
+    --mistica-font-size-cardPretitleSnap: 0.875rem;
+    --mistica-line-height-cardPretitleSnap: 1.25rem;
+    --mistica-font-size-cardTitleSnap: 0.875rem;
+    --mistica-line-height-cardTitleSnap: 1.25rem;
+    --mistica-font-size-cardSubtitleSnap: 0.875rem;
+    --mistica-line-height-cardSubtitleSnap: 1.25rem;
+    --mistica-font-size-cardDescriptionSnap: 0.875rem;
+    --mistica-line-height-cardDescriptionSnap: 1.25rem;
+    --mistica-font-size-cardPretitleDefault: 0.875rem;
+    --mistica-line-height-cardPretitleDefault: 1.25rem;
+    --mistica-font-size-cardTitleDefault: 1.125rem;
+    --mistica-line-height-cardTitleDefault: 1.5rem;
+    --mistica-font-size-cardSubtitleDefault: 0.875rem;
+    --mistica-line-height-cardSubtitleDefault: 1.25rem;
+    --mistica-font-size-cardDescriptionDefault: 0.875rem;
+    --mistica-line-height-cardDescriptionDefault: 1.25rem;
+    --mistica-font-size-inputLabel: 0.75rem;
+    --mistica-line-height-inputLabel: 1rem;
+    --mistica-font-size-inputValue: 1rem;
+    --mistica-line-height-inputValue: 1.5rem;
+    --mistica-font-size-inputHelperText: 0.75rem;
+    --mistica-line-height-inputHelperText: 1rem;
+    --mistica-font-size-stepperStepLabel: 0.875rem;
+    --mistica-line-height-stepperStepLabel: 1.25rem;
+    --mistica-font-size-loadingScreenTitle: 1.125rem;
+    --mistica-line-height-loadingScreenTitle: 1.5rem;
+}
+
+[data-mistica-skin='vivo-evolution'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundNegative: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-backgroundContainerBrand: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundContainerNegative: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-backgroundSkeletonNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+    --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-skeletonWave: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-borderLow: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-border: var(--mistica-vivo-evolution-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-borderSelected: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-evolution-pepperDark);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-evolution-pepperDark);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.08
+    );
+    --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.08
+    );
+    --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.08
+    );
+    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-evolution-pepperLight10);
+    --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(
+        var(--mistica-vivo-evolution-raw-white),
+        0.15
+    );
+    --mistica-color-textButtonPrimary: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textButtonSecondary: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLink: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textLinkInverse: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textLinkNegative: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textLinkBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textLinkMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-textLinkDanger: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textLinkDangerMedia: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textLinkSnackbar: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-textActivated: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-textBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-inputBorder: var(--mistica-vivo-evolution-darkModeGrey5);
+    --mistica-color-inputBorderInverse: var(--mistica-vivo-evolution-darkModeGrey5);
+    --mistica-color-inputBorderNegative: var(--mistica-vivo-evolution-darkModeGrey5);
+    --mistica-color-inputBorderBrand: var(--mistica-vivo-evolution-darkModeGrey5);
+    --mistica-color-completedStep: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-completedStepInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-completedStepNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-completedStepBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-control: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-controlInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-controlNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-controlBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-controlActivatedNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-controlActivatedBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-controlError: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-chevronIndicator: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-barTrack: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-barTrackNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-barTrackBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-loadingBarBackground: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-toggleAndroidInactive: var(--mistica-vivo-evolution-grey4);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-evolution-grey4);
+    --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-iosControlKnob: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-controlKnobNegative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-controlKnobBrand: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-divider: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-dividerInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-dividerNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-dividerBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-badge: var(--mistica-vivo-evolution-pepperDark);
+    --mistica-color-feedbackErrorBackground: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-evolution-grey6);
+    --mistica-color-brand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-brandHigh: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-negative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-neutralHigh: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-neutralHighBrand: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-neutralHighNegative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-neutralMedium: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralMediumNegative: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralMediumBrand: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-neutralLow: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textPrimaryNegative: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textPrimaryBrand: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textPrimaryMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-textSecondary: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-textSecondaryNegative: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-textSecondaryBrand: var(--mistica-vivo-evolution-grey3);
+    --mistica-color-textSecondaryMedia: var(--mistica-vivo-evolution-white);
+    --mistica-color-success: var(--mistica-vivo-evolution-vivoGreen);
+    --mistica-color-warning: var(--mistica-vivo-evolution-orange);
+    --mistica-color-error: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textError: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textErrorInverse: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textErrorNegative: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-textErrorBrand: var(--mistica-vivo-evolution-pepper);
+    --mistica-color-promo: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-highlight: var(--mistica-vivo-evolution-pink);
+    --mistica-color-successLow: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-vivo-evolution-vivoGreenLight30);
+    --mistica-color-warningHigh: var(--mistica-vivo-evolution-orangeLight40);
+    --mistica-color-errorHigh: var(--mistica-vivo-evolution-pepperLight40);
+    --mistica-color-promoHigh: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-successHighInverse: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-successHighNegative: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-successHighBrand: var(--mistica-vivo-evolution-vivoGreenDark);
+    --mistica-color-warningHighInverse: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-warningHighNegative: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-warningHighBrand: var(--mistica-vivo-evolution-orangeDark);
+    --mistica-color-errorHighInverse: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-errorHighNegative: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-errorHighBrand: var(--mistica-vivo-evolution-pepperDark80);
+    --mistica-color-promoHighInverse: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-promoHighNegative: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-promoHighBrand: var(--mistica-vivo-evolution-vivoPurple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-evolution-grey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-evolution-grey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-textAppBar: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-vivo-evolution-grey2);
+    --mistica-color-iosGlassAppBar: var(--mistica-vivo-evolution-white);
+    --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-evolution-vivoPurpleLight20);
+    --mistica-color-customTabsBackground: var(--mistica-vivo-evolution-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-tagTextActive: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextInactive: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInfo: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextSuccess: var(--mistica-vivo-evolution-vivoGreenLight30);
+    --mistica-color-tagTextWarning: var(--mistica-vivo-evolution-orangeLight40);
+    --mistica-color-tagTextError: var(--mistica-vivo-evolution-pepperLight40);
+    --mistica-color-tagBackgroundPromo: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInfo: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagTextPromoInverse: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-tagTextPromoNegative: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-tagTextPromoBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+    --mistica-color-tagTextActiveInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextActiveNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-evolution-grey5);
+    --mistica-color-tagTextInfoInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextInfoNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextInfoBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+    --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-evolution-vivoGreenLight30);
+    --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-evolution-vivoGreenLight30);
+    --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-evolution-vivoGreenLight30);
+    --mistica-color-tagTextWarningInverse: var(--mistica-vivo-evolution-orangeLight40);
+    --mistica-color-tagTextWarningNegative: var(--mistica-vivo-evolution-orangeLight40);
+    --mistica-color-tagTextWarningBrand: var(--mistica-vivo-evolution-orangeLight40);
+    --mistica-color-tagTextErrorInverse: var(--mistica-vivo-evolution-pepperLight40);
+    --mistica-color-tagTextErrorNegative: var(--mistica-vivo-evolution-pepperLight40);
+    --mistica-color-tagTextErrorBrand: var(--mistica-vivo-evolution-pepperLight40);
+    --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-vivo-evolution-raw-grey6), 0) 0%,
+        rgba(var(--mistica-vivo-evolution-raw-grey6), 0.4) 30%,
+        rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7) 100%
+    );
+    --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='vivo-evolution'] {
+        --mistica-color-background: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundNegative: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+        --mistica-color-backgroundContainerBrand: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundContainerNegative: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-backgroundSkeletonNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+        --mistica-color-backgroundDropZoneNegativeDragover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.05
+        );
+        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.03);
+        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-skeletonWave: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-borderLow: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-border: var(--mistica-vivo-evolution-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-borderSelected: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-evolution-pepperDark);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-evolution-pepperDark);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkBackgroundNegativePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-textButtonPrimary: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonSecondary: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLink: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textLinkInverse: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textLinkNegative: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textLinkBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textLinkMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLinkDanger: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textLinkDangerMedia: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textLinkSnackbar: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textActivated: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-textBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-inputBorder: var(--mistica-vivo-evolution-darkModeGrey5);
+        --mistica-color-inputBorderInverse: var(--mistica-vivo-evolution-darkModeGrey5);
+        --mistica-color-inputBorderNegative: var(--mistica-vivo-evolution-darkModeGrey5);
+        --mistica-color-inputBorderBrand: var(--mistica-vivo-evolution-darkModeGrey5);
+        --mistica-color-completedStep: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-completedStepInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-completedStepNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-completedStepBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-control: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-controlInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-controlNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-controlBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-controlActivatedNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-controlActivatedBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-controlError: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-chevronIndicator: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-barTrack: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-barTrackNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-barTrackBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-loadingBarBackground: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-toggleAndroidInactive: var(--mistica-vivo-evolution-grey4);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-evolution-grey4);
+        --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-iosControlKnob: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-controlKnobNegative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-controlKnobBrand: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-divider: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-dividerInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-dividerNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-dividerBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-badge: var(--mistica-vivo-evolution-pepperDark);
+        --mistica-color-feedbackErrorBackground: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-evolution-grey6);
+        --mistica-color-brand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-brandHigh: rgba(var(--mistica-vivo-evolution-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-negative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-neutralHigh: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-neutralHighBrand: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-neutralHighNegative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-neutralMedium: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralMediumNegative: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralMediumBrand: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralLow: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textPrimaryNegative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textPrimaryBrand: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textPrimaryMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-textSecondary: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-textSecondaryNegative: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-textSecondaryBrand: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-textSecondaryMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-success: var(--mistica-vivo-evolution-vivoGreen);
+        --mistica-color-warning: var(--mistica-vivo-evolution-orange);
+        --mistica-color-error: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textError: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textErrorInverse: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textErrorNegative: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textErrorBrand: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-promo: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-highlight: var(--mistica-vivo-evolution-pink);
+        --mistica-color-successLow: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-vivo-evolution-vivoGreenLight30);
+        --mistica-color-warningHigh: var(--mistica-vivo-evolution-orangeLight40);
+        --mistica-color-errorHigh: var(--mistica-vivo-evolution-pepperLight40);
+        --mistica-color-promoHigh: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-successHighInverse: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-successHighNegative: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-successHighBrand: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-warningHighInverse: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-warningHighNegative: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-warningHighBrand: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-errorHighInverse: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-errorHighNegative: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-errorHighBrand: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-promoHighInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-promoHighNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-promoHighBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-evolution-grey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-evolution-grey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textAppBar: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-iosGlassAppBar: var(--mistica-vivo-evolution-white);
+        --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-customTabsBackground: var(--mistica-vivo-evolution-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-tagTextActive: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextInactive: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInfo: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextSuccess: var(--mistica-vivo-evolution-vivoGreenLight30);
+        --mistica-color-tagTextWarning: var(--mistica-vivo-evolution-orangeLight40);
+        --mistica-color-tagTextError: var(--mistica-vivo-evolution-pepperLight40);
+        --mistica-color-tagBackgroundPromo: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInfo: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagTextPromoInverse: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-tagTextPromoNegative: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-tagTextPromoBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-tagTextActiveInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextActiveNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInfoInverse: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextInfoNegative: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextInfoBrand: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-evolution-vivoGreenLight30);
+        --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-evolution-vivoGreenLight30);
+        --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-evolution-vivoGreenLight30);
+        --mistica-color-tagTextWarningInverse: var(--mistica-vivo-evolution-orangeLight40);
+        --mistica-color-tagTextWarningNegative: var(--mistica-vivo-evolution-orangeLight40);
+        --mistica-color-tagTextWarningBrand: var(--mistica-vivo-evolution-orangeLight40);
+        --mistica-color-tagTextErrorInverse: var(--mistica-vivo-evolution-pepperLight40);
+        --mistica-color-tagTextErrorNegative: var(--mistica-vivo-evolution-pepperLight40);
+        --mistica-color-tagTextErrorBrand: var(--mistica-vivo-evolution-pepperLight40);
+        --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-evolution-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-vivo-evolution-raw-grey6), 0) 0%,
+            rgba(var(--mistica-vivo-evolution-raw-grey6), 0.4) 30%,
+            rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7) 100%
+        );
+        --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7);
+    }
+
+    [data-mistica-skin='vivo-evolution'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-vivo-evolution-white);
+        --mistica-color-backgroundAlternative: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-backgroundBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-backgroundNegative: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-evolution-vivoPurpleLight80);
+        --mistica-color-backgroundContainer: var(--mistica-vivo-evolution-white);
+        --mistica-color-backgroundContainerError: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.05);
+        --mistica-color-backgroundContainerPressed: rgba(
+            var(--mistica-vivo-evolution-raw-darkModeBlack),
+            0.08
+        );
+        --mistica-color-backgroundContainerBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-backgroundContainerBrandHover: rgba(
+            var(--mistica-vivo-evolution-raw-darkModeBlack),
+            0.2
+        );
+        --mistica-color-backgroundContainerBrandPressed: rgba(
+            var(--mistica-vivo-evolution-raw-darkModeBlack),
+            0.4
+        );
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-backgroundContainerNegative: rgba(
+            var(--mistica-vivo-evolution-raw-darkModeBlack),
+            0.4
+        );
+        --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.6);
+        --mistica-color-backgroundSkeleton: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.2);
+        --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-backgroundBrandTop: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-backgroundBrandBottom: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-appBarBackground: var(--mistica-vivo-evolution-white);
+        --mistica-color-navigationBarBackground: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-evolution-raw-vivoPurple), 0.06);
+        --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-backgroundDropZoneBrandHover: rgba(
+            var(--mistica-vivo-evolution-raw-vivoPurpleDark),
+            0.3
+        );
+        --mistica-color-backgroundDropZoneBrandDragover: rgba(
+            var(--mistica-vivo-evolution-raw-vivoPurpleDark),
+            0.5
+        );
+        --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+        --mistica-color-backgroundDropZoneNegativeDragover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.17
+        );
+        --mistica-color-backgroundDropZoneMediaHover: rgba(
+            var(--mistica-vivo-evolution-raw-vivoPurpleDark),
+            0.3
+        );
+        --mistica-color-backgroundDropZoneMediaDragover: rgba(
+            var(--mistica-vivo-evolution-raw-vivoPurpleDark),
+            0.5
+        );
+        --mistica-color-skeletonWave: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-borderLow: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-border: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-borderHigh: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-borderSelected: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-evolution-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-evolution-pepperDark);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-evolution-pepperDark);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(
+            --mistica-vivo-evolution-pepperLight10
+        );
+        --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.1
+        );
+        --mistica-color-buttonLinkBackgroundNegativePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.1
+        );
+        --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-evolution-raw-white), 0.1);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(
+            --mistica-vivo-evolution-vivoPurpleLight20
+        );
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(
+            --mistica-vivo-evolution-vivoPurpleLight20
+        );
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(
+            var(--mistica-vivo-evolution-raw-white),
+            0.15
+        );
+        --mistica-color-textButtonPrimary: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonSecondary: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLink: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textLinkInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLinkNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLinkBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLinkMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-textLinkDanger: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textLinkDangerMedia: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textLinkSnackbar: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-textActivated: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-inputBorder: var(--mistica-vivo-evolution-grey4);
+        --mistica-color-inputBorderInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-inputBorderNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-inputBorderBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-completedStep: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-completedStepInverse: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-completedStepNegative: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-completedStepBrand: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-control: var(--mistica-vivo-evolution-grey4);
+        --mistica-color-controlActivated: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-controlInverse: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-controlNegative: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-controlBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-controlActivatedInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-controlActivatedNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-controlActivatedBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-controlError: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-chevronIndicator: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-barTrack: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0.5);
+        --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0.5);
+        --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0.5);
+        --mistica-color-loadingBar: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-loadingBarBackground: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-toggleAndroidInactive: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-iosControlKnob: var(--mistica-vivo-evolution-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-controlKnobNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-controlKnobBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-divider: var(--mistica-vivo-evolution-grey3);
+        --mistica-color-dividerInverse: rgba(var(--mistica-vivo-evolution-raw-white), 0.2);
+        --mistica-color-dividerNegative: rgba(var(--mistica-vivo-evolution-raw-white), 0.2);
+        --mistica-color-dividerBrand: rgba(var(--mistica-vivo-evolution-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-badge: var(--mistica-vivo-evolution-pepperDark);
+        --mistica-color-feedbackErrorBackground: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-brand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-brandHigh: var(--mistica-vivo-evolution-vivoPurpleDark);
+        --mistica-color-inverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-negative: var(--mistica-vivo-evolution-white);
+        --mistica-color-neutralHigh: var(--mistica-vivo-evolution-grey6);
+        --mistica-color-neutralHighBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-neutralHighNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-neutralMedium: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralMediumNegative: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralMediumBrand: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-neutralLow: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-vivo-evolution-grey2);
+        --mistica-color-textPrimary: var(--mistica-vivo-evolution-grey6);
+        --mistica-color-textPrimaryInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-textPrimaryNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-textPrimaryBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-textSecondary: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-textSecondaryNegative: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-textSecondaryBrand: var(--mistica-vivo-evolution-vivoPurpleLight20);
+        --mistica-color-textSecondaryMedia: var(--mistica-vivo-evolution-white);
+        --mistica-color-success: var(--mistica-vivo-evolution-vivoGreen);
+        --mistica-color-warning: var(--mistica-vivo-evolution-orange);
+        --mistica-color-error: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textError: var(--mistica-vivo-evolution-pepper);
+        --mistica-color-textErrorInverse: var(--mistica-vivo-evolution-white);
+        --mistica-color-textErrorNegative: var(--mistica-vivo-evolution-white);
+        --mistica-color-textErrorBrand: var(--mistica-vivo-evolution-white);
+        --mistica-color-promo: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-highlight: var(--mistica-vivo-evolution-pink);
+        --mistica-color-successLow: var(--mistica-vivo-evolution-vivoGreenLight10);
+        --mistica-color-warningLow: var(--mistica-vivo-evolution-orangeLight10);
+        --mistica-color-errorLow: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-promoLow: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-brandLow: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-successHigh: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-warningHigh: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-errorHigh: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-promoHigh: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-successHighInverse: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-successHighNegative: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-successHighBrand: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-warningHighInverse: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-warningHighNegative: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-warningHighBrand: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-errorHighInverse: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-errorHighNegative: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-errorHighBrand: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-promoHighInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-promoHighNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-promoHighBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-evolution-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-evolution-vivoPurpleLight50);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-evolution-white);
+        --mistica-color-textAppBar: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-iosGlassAppBar: var(--mistica-vivo-evolution-grey6);
+        --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-customTabsBackground: var(--mistica-vivo-evolution-white);
+        --mistica-color-tagTextPromo: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextActive: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextInactive: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInfo: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextSuccess: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-tagTextWarning: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-tagTextError: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-tagBackgroundPromo: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActive: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-tagBackgroundInactive: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-tagBackgroundInfo: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-evolution-vivoGreenLight10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-evolution-orangeLight10);
+        --mistica-color-tagBackgroundError: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-tagTextPromoInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextPromoNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextPromoBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextActiveInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextActiveNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextActiveBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-evolution-grey5);
+        --mistica-color-tagTextInfoInverse: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextInfoNegative: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextInfoBrand: var(--mistica-vivo-evolution-vivoPurple);
+        --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-evolution-vivoGreenDark);
+        --mistica-color-tagTextWarningInverse: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-tagTextWarningNegative: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-tagTextWarningBrand: var(--mistica-vivo-evolution-orangeDark);
+        --mistica-color-tagTextErrorInverse: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-tagTextErrorNegative: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-tagTextErrorBrand: var(--mistica-vivo-evolution-pepperDark80);
+        --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-evolution-grey1);
+        --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-evolution-vivoPurpleLight10);
+        --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-evolution-vivoGreenLight10);
+        --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-evolution-vivoGreenLight10);
+        --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-evolution-vivoGreenLight10);
+        --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-evolution-orangeLight10);
+        --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-evolution-orangeLight10);
+        --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-evolution-orangeLight10);
+        --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-evolution-pepperLight10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-vivo-evolution-raw-grey6), 0) 0%,
+            rgba(var(--mistica-vivo-evolution-raw-grey6), 0.4) 30%,
+            rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7) 100%
+        );
+        --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-evolution-raw-grey6), 0.7);
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='vivo-evolution'] {
+        /* Text */
+        --mistica-font-size-1: 0.875rem;
+        --mistica-line-height-1: 1.25rem;
+        --mistica-font-size-2: 1rem;
+        --mistica-line-height-2: 1.5rem;
+        --mistica-font-size-3: 1.125rem;
+        --mistica-line-height-3: 1.5rem;
+        --mistica-font-size-4: 1.5rem;
+        --mistica-line-height-4: 1.75rem;
+        --mistica-font-size-5: 1.75rem;
+        --mistica-line-height-5: 2rem;
+        --mistica-font-size-6: 2rem;
+        --mistica-line-height-6: 2.5rem;
+        --mistica-font-size-7: 2.5rem;
+        --mistica-line-height-7: 3rem;
+        --mistica-font-size-8: 3rem;
+        --mistica-line-height-8: 3.5rem;
+        --mistica-font-size-9: 3.5rem;
+        --mistica-line-height-9: 4rem;
+        --mistica-font-size-10: 4rem;
+        --mistica-line-height-10: 4.5rem;
+        --mistica-font-size-cardTitle: 1.5rem;
+        --mistica-line-height-cardTitle: 1.75rem;
+        --mistica-font-size-drawerTitle: 1.75rem;
+        --mistica-line-height-drawerTitle: 2rem;
+
+        --mistica-font-size-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title1: 0.875rem;
+        --mistica-line-height-title1: 1.25rem;
+        --mistica-font-size-title2: 1.125rem;
+        --mistica-line-height-title2: 1.5rem;
+        --mistica-font-size-title3: 1.5rem;
+        --mistica-line-height-title3: 1.75rem;
+        --mistica-font-size-title4: 2rem;
+        --mistica-line-height-title4: 2.5rem;
+
+        --mistica-font-size-chipLabel: 1rem;
+        --mistica-line-height-chipLabel: 1.5rem;
+        --mistica-font-size-cardPretitleSnap: 1rem;
+        --mistica-line-height-cardPretitleSnap: 1.5rem;
+        --mistica-font-size-cardTitleSnap: 1rem;
+        --mistica-line-height-cardTitleSnap: 1.5rem;
+        --mistica-font-size-cardSubtitleSnap: 1rem;
+        --mistica-line-height-cardSubtitleSnap: 1.5rem;
+        --mistica-font-size-cardDescriptionSnap: 1rem;
+        --mistica-line-height-cardDescriptionSnap: 1.5rem;
+        --mistica-font-size-cardPretitleDefault: 1rem;
+        --mistica-line-height-cardPretitleDefault: 1.5rem;
+        --mistica-font-size-cardTitleDefault: 1.5rem;
+        --mistica-line-height-cardTitleDefault: 1.75rem;
+        --mistica-font-size-cardSubtitleDefault: 1rem;
+        --mistica-line-height-cardSubtitleDefault: 1.5rem;
+        --mistica-font-size-cardDescriptionDefault: 1rem;
+        --mistica-line-height-cardDescriptionDefault: 1.5rem;
+        --mistica-font-size-inputLabel: 0.875rem;
+        --mistica-line-height-inputLabel: 1.25rem;
+        --mistica-font-size-inputValue: 1.125rem;
+        --mistica-line-height-inputValue: 1.5rem;
+        --mistica-font-size-inputHelperText: 0.875rem;
+        --mistica-line-height-inputHelperText: 1.25rem;
+        --mistica-font-size-stepperStepLabel: 1rem;
+        --mistica-line-height-stepperStepLabel: 1.5rem;
+        --mistica-font-size-loadingScreenTitle: 1.5rem;
+        --mistica-line-height-loadingScreenTitle: 1.75rem;
+    }
+}
diff --git a/css/vivo-new.css b/css/vivo-new.css
deleted file mode 100644
index 32d0625a28..0000000000
--- a/css/vivo-new.css
+++ /dev/null
@@ -1,1404 +0,0 @@
-[data-mistica-skin='vivo-new'] {
-    /* Palette colors */
-    --mistica-vivo-new-white: #ffffff;
-    --mistica-vivo-new-grey1: #f6f6f6;
-    --mistica-vivo-new-vivoPurple: #660099;
-    --mistica-vivo-new-vivoPurpleDark: #461e5f;
-    --mistica-vivo-new-vivoPurpleLight80: #8433ad;
-    --mistica-vivo-new-pepperLight10: #fce4ef;
-    --mistica-vivo-new-grey3: #dddddd;
-    --mistica-vivo-new-vivoPurpleLight10: #efe5f4;
-    --mistica-vivo-new-grey2: #eeeeee;
-    --mistica-vivo-new-grey5: #666666;
-    --mistica-vivo-new-pepper: #cc1f59;
-    --mistica-vivo-new-pepperDark: #b71d63;
-    --mistica-vivo-new-vivoPurpleLight20: #e0cceb;
-    --mistica-vivo-new-grey4: #8a8c90;
-    --mistica-vivo-new-vivoPurpleLight50: #b280cc;
-    --mistica-vivo-new-grey6: #000000;
-    --mistica-vivo-new-vivoGreen: #99cc33;
-    --mistica-vivo-new-orange: #ff9900;
-    --mistica-vivo-new-pink: #eb3d7d;
-    --mistica-vivo-new-vivoGreenLight10: #edf8e8;
-    --mistica-vivo-new-orangeLight10: #ffefe1;
-    --mistica-vivo-new-vivoGreenDark: #225c3d;
-    --mistica-vivo-new-orangeDark: #972a1d;
-    --mistica-vivo-new-pepperDark80: #8f2052;
-    --mistica-vivo-new-darkModeBlack: #191919;
-    --mistica-vivo-new-darkModeGrey: #242424;
-    --mistica-vivo-new-darkModeGrey6: #313235;
-    --mistica-vivo-new-darkModeGrey5: #6d7d88;
-    --mistica-vivo-new-vivoGreenLight30: #91ae9e;
-    --mistica-vivo-new-orangeLight40: #ffb84c;
-    --mistica-vivo-new-pepperLight40: #db628b;
-
-    /* Raw palette colors, for use with rgba() */
-    --mistica-vivo-new-raw-darkModeBlack: 25, 25, 25;
-    --mistica-vivo-new-raw-grey6: 0, 0, 0;
-    --mistica-vivo-new-raw-vivoPurple: 102, 0, 153;
-    --mistica-vivo-new-raw-vivoPurpleDark: 70, 30, 95;
-    --mistica-vivo-new-raw-white: 255, 255, 255;
-    --mistica-vivo-new-raw-darkModeGrey: 36, 36, 36;
-
-    /* Colors */
-    --mistica-color-background: var(--mistica-vivo-new-white);
-    --mistica-color-backgroundAlternative: var(--mistica-vivo-new-grey1);
-    --mistica-color-backgroundBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-backgroundNegative: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-backgroundContainer: var(--mistica-vivo-new-white);
-    --mistica-color-backgroundContainerError: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.05);
-    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.08);
-    --mistica-color-backgroundContainerBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.2);
-    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.4);
-    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.4);
-    --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-new-grey1);
-    --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.6);
-    --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-grey3);
-    --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-new-raw-grey6), 0.2);
-    --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-backgroundBrandTop: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-appBarBackground: var(--mistica-vivo-new-white);
-    --mistica-color-navigationBarBackground: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-vivoPurple), 0.06);
-    --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
-    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.5);
-    --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-    --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.17);
-    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
-    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.5);
-    --mistica-color-skeletonWave: var(--mistica-vivo-new-grey2);
-    --mistica-color-borderLow: var(--mistica-vivo-new-grey1);
-    --mistica-color-border: var(--mistica-vivo-new-grey3);
-    --mistica-color-borderHigh: var(--mistica-vivo-new-grey5);
-    --mistica-color-borderSelected: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.25);
-    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.35);
-    --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
-    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
-    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
-    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-new-white);
-    --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-vivo-new-white);
-    --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-vivo-new-white);
-    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
-    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-    --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-    --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-white);
-    --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-new-white);
-    --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-new-white);
-    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
-    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
-    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-textButtonPrimary: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonSecondary: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
-    --mistica-color-textLink: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textLinkInverse: var(--mistica-vivo-new-white);
-    --mistica-color-textLinkNegative: var(--mistica-vivo-new-white);
-    --mistica-color-textLinkBrand: var(--mistica-vivo-new-white);
-    --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
-    --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
-    --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
-    --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-inputBorder: var(--mistica-vivo-new-grey4);
-    --mistica-color-inputBorderInverse: var(--mistica-vivo-new-white);
-    --mistica-color-inputBorderNegative: var(--mistica-vivo-new-white);
-    --mistica-color-inputBorderBrand: var(--mistica-vivo-new-white);
-    --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-completedStepNegative: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-completedStepBrand: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-control: var(--mistica-vivo-new-grey4);
-    --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-controlInverse: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-controlNegative: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-controlBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
-    --mistica-color-controlActivatedNegative: var(--mistica-vivo-new-white);
-    --mistica-color-controlActivatedBrand: var(--mistica-vivo-new-white);
-    --mistica-color-controlError: var(--mistica-vivo-new-pepper);
-    --mistica-color-chevronIndicator: var(--mistica-vivo-new-grey5);
-    --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
-    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
-    --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-new-raw-white), 0.5);
-    --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-new-raw-white), 0.5);
-    --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
-    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-new-white);
-    --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-new-grey2);
-    --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
-    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-controlKnobNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-controlKnobBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-divider: var(--mistica-vivo-new-grey3);
-    --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
-    --mistica-color-dividerNegative: rgba(var(--mistica-vivo-new-raw-white), 0.2);
-    --mistica-color-dividerBrand: rgba(var(--mistica-vivo-new-raw-white), 0.2);
-    --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-badge: var(--mistica-vivo-new-pepperDark);
-    --mistica-color-feedbackErrorBackground: var(--mistica-vivo-new-pepper);
-    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-brand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-brandHigh: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-inverse: var(--mistica-vivo-new-white);
-    --mistica-color-negative: var(--mistica-vivo-new-white);
-    --mistica-color-neutralHigh: var(--mistica-vivo-new-grey6);
-    --mistica-color-neutralHighNegative: var(--mistica-vivo-new-white);
-    --mistica-color-neutralHighBrand: var(--mistica-vivo-new-white);
-    --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralMediumInverse: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralMediumNegative: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralMediumBrand: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralLow: var(--mistica-vivo-new-grey1);
-    --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-grey2);
-    --mistica-color-textPrimary: var(--mistica-vivo-new-grey6);
-    --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-white);
-    --mistica-color-textPrimaryNegative: var(--mistica-vivo-new-white);
-    --mistica-color-textPrimaryBrand: var(--mistica-vivo-new-white);
-    --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
-    --mistica-color-textSecondary: var(--mistica-vivo-new-grey5);
-    --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-textSecondaryNegative: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-textSecondaryBrand: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
-    --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
-    --mistica-color-warning: var(--mistica-vivo-new-orange);
-    --mistica-color-error: var(--mistica-vivo-new-pepper);
-    --mistica-color-textError: var(--mistica-vivo-new-pepper);
-    --mistica-color-textErrorInverse: var(--mistica-vivo-new-white);
-    --mistica-color-textErrorNegative: var(--mistica-vivo-new-white);
-    --mistica-color-textErrorBrand: var(--mistica-vivo-new-white);
-    --mistica-color-promo: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-highlight: var(--mistica-vivo-new-pink);
-    --mistica-color-successLow: var(--mistica-vivo-new-vivoGreenLight10);
-    --mistica-color-warningLow: var(--mistica-vivo-new-orangeLight10);
-    --mistica-color-errorLow: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-promoLow: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-brandLow: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-successHigh: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-warningHigh: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-errorHigh: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-promoHigh: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-successHighInverse: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-successHighNegative: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-successHighBrand: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-warningHighInverse: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-warningHighNegative: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-warningHighBrand: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-errorHighNegative: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-errorHighBrand: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-promoHighInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-promoHighNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-promoHighBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-new-white);
-    --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-white);
-    --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
-    --mistica-color-textAppBarSelected: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-grey6);
-    --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-customTabsBackground: var(--mistica-vivo-new-white);
-    --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextActive: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextInactive: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInfo: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextSuccess: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-tagTextWarning: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-tagTextError: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-tagBackgroundPromo: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-grey1);
-    --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-grey1);
-    --mistica-color-tagBackgroundInfo: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-new-vivoGreenLight10);
-    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-new-orangeLight10);
-    --mistica-color-tagBackgroundError: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-tagTextPromoInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextPromoNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextPromoBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextActiveInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextActiveNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextActiveBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInfoInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextInfoNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextInfoBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-tagTextWarningInverse: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-tagTextWarningNegative: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-tagTextWarningBrand: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-tagTextErrorInverse: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-tagTextErrorNegative: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-tagTextErrorBrand: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-new-grey1);
-    --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-new-grey1);
-    --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-new-grey1);
-    --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-new-vivoGreenLight10);
-    --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-new-vivoGreenLight10);
-    --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-new-vivoGreenLight10);
-    --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-new-orangeLight10);
-    --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-new-orangeLight10);
-    --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-new-orangeLight10);
-    --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-cardContentOverlay: linear-gradient(
-        180deg,
-        rgba(var(--mistica-vivo-new-raw-grey6), 0) 0%,
-        rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
-        rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
-    );
-    --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
-
-    /* Border radius */
-    --mistica-border-radius-avatar: 50%;
-    --mistica-border-radius-bar: 999px;
-    --mistica-border-radius-button: 32px;
-    --mistica-border-radius-checkbox: 4px;
-    --mistica-border-radius-container: 24px;
-    --mistica-border-radius-indicator: 24px;
-    --mistica-border-radius-chip: 24px;
-    --mistica-border-radius-tag: 10px;
-    --mistica-border-radius-input: 16px;
-    --mistica-border-radius-legacyDisplay: 24px;
-    --mistica-border-radius-popup: 16px;
-    --mistica-border-radius-sheet: 24px;
-    --mistica-border-radius-mediaSmall: 12px;
-
-    /* Text */
-    --mistica-font-size-1: 0.75rem;
-    --mistica-line-height-1: 1rem;
-    --mistica-font-size-2: 0.875rem;
-    --mistica-line-height-2: 1.25rem;
-    --mistica-font-size-3: 1rem;
-    --mistica-line-height-3: 1.5rem;
-    --mistica-font-size-4: 1.125rem;
-    --mistica-line-height-4: 1.5rem;
-    --mistica-font-size-5: 1.25rem;
-    --mistica-line-height-5: 1.5rem;
-    --mistica-font-weight-5: 500;
-    --mistica-font-size-6: 1.5rem;
-    --mistica-line-height-6: 2rem;
-    --mistica-font-weight-6: 500;
-    --mistica-font-size-7: 1.75rem;
-    --mistica-line-height-7: 2rem;
-    --mistica-font-weight-7: 500;
-    --mistica-font-size-8: 2rem;
-    --mistica-line-height-8: 2.5rem;
-    --mistica-font-weight-8: 400;
-    --mistica-font-size-9: 2.5rem;
-    --mistica-line-height-9: 3rem;
-    --mistica-font-weight-9: 400;
-    --mistica-font-size-10: 3rem;
-    --mistica-line-height-10: 3.5rem;
-    --mistica-font-weight-10: 400;
-    --mistica-font-size-cardTitle: 1.25rem;
-    --mistica-line-height-cardTitle: 1.5rem;
-    --mistica-font-weight-cardTitle: 500;
-    --mistica-font-size-drawerTitle: 1.25rem;
-    --mistica-line-height-drawerTitle: 1.5rem;
-    --mistica-font-weight-drawerTitle: 500;
-    --mistica-font-weight-rowTitle: 400;
-    --mistica-font-weight-button: 500;
-    --mistica-font-size-tabsLabel: 1.125rem;
-    --mistica-line-height-tabsLabel: 1.5rem;
-    --mistica-font-weight-tabsLabel: 500;
-    --mistica-font-weight-link: 500;
-    --mistica-font-size-title1: 0.75rem;
-    --mistica-line-height-title1: 1rem;
-    --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1rem;
-    --mistica-line-height-title2: 1.5rem;
-    --mistica-font-weight-title2: 500;
-    --mistica-font-size-title3: 1.125rem;
-    --mistica-line-height-title3: 1.5rem;
-    --mistica-font-weight-title3: 500;
-    --mistica-font-size-title4: 1.5rem;
-    --mistica-line-height-title4: 2rem;
-    --mistica-font-weight-title4: 500;
-    --mistica-font-weight-indicator: 500;
-    --mistica-font-weight-navigationBar: 400;
-    --mistica-font-size-chipLabel: 0.875rem;
-    --mistica-line-height-chipLabel: 1.25rem;
-    --mistica-font-weight-chipLabel: 500;
-    --mistica-font-size-cardPretitleSnap: 0.875rem;
-    --mistica-line-height-cardPretitleSnap: 1.25rem;
-    --mistica-font-size-cardTitleSnap: 0.875rem;
-    --mistica-line-height-cardTitleSnap: 1.25rem;
-    --mistica-font-size-cardSubtitleSnap: 0.875rem;
-    --mistica-line-height-cardSubtitleSnap: 1.25rem;
-    --mistica-font-size-cardDescriptionSnap: 0.875rem;
-    --mistica-line-height-cardDescriptionSnap: 1.25rem;
-    --mistica-font-size-cardPretitleDefault: 0.875rem;
-    --mistica-line-height-cardPretitleDefault: 1.25rem;
-    --mistica-font-size-cardTitleDefault: 1.125rem;
-    --mistica-line-height-cardTitleDefault: 1.5rem;
-    --mistica-font-size-cardSubtitleDefault: 0.875rem;
-    --mistica-line-height-cardSubtitleDefault: 1.25rem;
-    --mistica-font-size-cardDescriptionDefault: 0.875rem;
-    --mistica-line-height-cardDescriptionDefault: 1.25rem;
-    --mistica-font-size-inputLabel: 0.75rem;
-    --mistica-line-height-inputLabel: 1rem;
-    --mistica-font-size-inputValue: 1rem;
-    --mistica-line-height-inputValue: 1.5rem;
-    --mistica-font-size-inputHelperText: 0.75rem;
-    --mistica-line-height-inputHelperText: 1rem;
-    --mistica-font-size-stepperStepLabel: 0.875rem;
-    --mistica-line-height-stepperStepLabel: 1.25rem;
-    --mistica-font-size-loadingScreenTitle: 1.125rem;
-    --mistica-line-height-loadingScreenTitle: 1.5rem;
-}
-
-[data-mistica-skin='vivo-new'][data-mistica-color-scheme='dark'] {
-    --mistica-color-background: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundAlternative: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundBrand: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundNegative: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundContainer: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundContainerError: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-backgroundContainerBrand: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundContainerNegative: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-new-raw-darkModeGrey), 0.8);
-    --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-backgroundSkeletonNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-backgroundBrandTop: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-appBarBackground: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-navigationBarBackground: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-    --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-skeletonWave: var(--mistica-vivo-new-grey5);
-    --mistica-color-borderLow: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-border: var(--mistica-vivo-new-darkModeGrey);
-    --mistica-color-borderHigh: var(--mistica-vivo-new-grey5);
-    --mistica-color-borderSelected: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.25);
-    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.35);
-    --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
-    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
-    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
-    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-new-raw-white), 0);
-    --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-vivo-new-raw-white), 0);
-    --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
-    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
-    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
-    --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
-    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
-    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
-    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
-    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-    --mistica-color-textButtonPrimary: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textButtonSecondary: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
-    --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-new-grey2);
-    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
-    --mistica-color-textLink: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textLinkInverse: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textLinkNegative: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textLinkBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
-    --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
-    --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
-    --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-inputBorder: var(--mistica-vivo-new-darkModeGrey5);
-    --mistica-color-inputBorderInverse: var(--mistica-vivo-new-darkModeGrey5);
-    --mistica-color-inputBorderNegative: var(--mistica-vivo-new-darkModeGrey5);
-    --mistica-color-inputBorderBrand: var(--mistica-vivo-new-darkModeGrey5);
-    --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-completedStepNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-completedStepBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-control: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-controlInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-controlNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-controlBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-controlActivatedNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-controlActivatedBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-controlError: var(--mistica-vivo-new-pepper);
-    --mistica-color-chevronIndicator: var(--mistica-vivo-new-grey5);
-    --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-barTrackNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-barTrackBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
-    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-new-grey4);
-    --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
-    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
-    --mistica-color-controlKnobNegative: var(--mistica-vivo-new-grey2);
-    --mistica-color-controlKnobBrand: var(--mistica-vivo-new-grey2);
-    --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-dividerNegative: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-dividerBrand: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-badge: var(--mistica-vivo-new-pepperDark);
-    --mistica-color-feedbackErrorBackground: var(--mistica-vivo-new-pepper);
-    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-new-grey6);
-    --mistica-color-brand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-brandHigh: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-    --mistica-color-inverse: var(--mistica-vivo-new-grey2);
-    --mistica-color-negative: var(--mistica-vivo-new-grey2);
-    --mistica-color-neutralHigh: var(--mistica-vivo-new-grey2);
-    --mistica-color-neutralHighBrand: var(--mistica-vivo-new-grey2);
-    --mistica-color-neutralHighNegative: var(--mistica-vivo-new-grey2);
-    --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralMediumInverse: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralMediumNegative: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralMediumBrand: var(--mistica-vivo-new-grey5);
-    --mistica-color-neutralLow: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-textPrimary: var(--mistica-vivo-new-grey2);
-    --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-grey2);
-    --mistica-color-textPrimaryNegative: var(--mistica-vivo-new-grey2);
-    --mistica-color-textPrimaryBrand: var(--mistica-vivo-new-grey2);
-    --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
-    --mistica-color-textSecondary: var(--mistica-vivo-new-grey3);
-    --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-grey3);
-    --mistica-color-textSecondaryNegative: var(--mistica-vivo-new-grey3);
-    --mistica-color-textSecondaryBrand: var(--mistica-vivo-new-grey3);
-    --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
-    --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
-    --mistica-color-warning: var(--mistica-vivo-new-orange);
-    --mistica-color-error: var(--mistica-vivo-new-pepper);
-    --mistica-color-textError: var(--mistica-vivo-new-pepper);
-    --mistica-color-textErrorInverse: var(--mistica-vivo-new-pepper);
-    --mistica-color-textErrorNegative: var(--mistica-vivo-new-pepper);
-    --mistica-color-textErrorBrand: var(--mistica-vivo-new-pepper);
-    --mistica-color-promo: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-highlight: var(--mistica-vivo-new-pink);
-    --mistica-color-successLow: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-warningLow: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-errorLow: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-promoLow: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-brandLow: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-successHigh: var(--mistica-vivo-new-vivoGreenLight30);
-    --mistica-color-warningHigh: var(--mistica-vivo-new-orangeLight40);
-    --mistica-color-errorHigh: var(--mistica-vivo-new-pepperLight40);
-    --mistica-color-promoHigh: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-successHighInverse: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-successHighNegative: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-successHighBrand: var(--mistica-vivo-new-vivoGreenDark);
-    --mistica-color-warningHighInverse: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-warningHighNegative: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-warningHighBrand: var(--mistica-vivo-new-orangeDark);
-    --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-errorHighNegative: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-errorHighBrand: var(--mistica-vivo-new-pepperDark80);
-    --mistica-color-promoHighInverse: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-promoHighNegative: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-promoHighBrand: var(--mistica-vivo-new-vivoPurple);
-    --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-new-grey2);
-    --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-new-grey4);
-    --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-new-grey4);
-    --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-grey2);
-    --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
-    --mistica-color-textAppBarSelected: var(--mistica-vivo-new-grey2);
-    --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-white);
-    --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurpleLight20);
-    --mistica-color-customTabsBackground: var(--mistica-vivo-new-darkModeBlack);
-    --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-tagTextActive: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextInactive: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInfo: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextSuccess: var(--mistica-vivo-new-vivoGreenLight30);
-    --mistica-color-tagTextWarning: var(--mistica-vivo-new-orangeLight40);
-    --mistica-color-tagTextError: var(--mistica-vivo-new-pepperLight40);
-    --mistica-color-tagBackgroundPromo: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInfo: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundError: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagTextPromoInverse: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-tagTextPromoNegative: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-tagTextPromoBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-    --mistica-color-tagTextActiveInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextActiveNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextActiveBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-new-grey5);
-    --mistica-color-tagTextInfoInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextInfoNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextInfoBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-    --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-new-vivoGreenLight30);
-    --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-new-vivoGreenLight30);
-    --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-new-vivoGreenLight30);
-    --mistica-color-tagTextWarningInverse: var(--mistica-vivo-new-orangeLight40);
-    --mistica-color-tagTextWarningNegative: var(--mistica-vivo-new-orangeLight40);
-    --mistica-color-tagTextWarningBrand: var(--mistica-vivo-new-orangeLight40);
-    --mistica-color-tagTextErrorInverse: var(--mistica-vivo-new-pepperLight40);
-    --mistica-color-tagTextErrorNegative: var(--mistica-vivo-new-pepperLight40);
-    --mistica-color-tagTextErrorBrand: var(--mistica-vivo-new-pepperLight40);
-    --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-new-darkModeGrey6);
-    --mistica-color-cardContentOverlay: linear-gradient(
-        180deg,
-        rgba(var(--mistica-vivo-new-raw-grey6), 0) 0%,
-        rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
-        rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
-    );
-    --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
-}
-
-@media (prefers-color-scheme: dark) {
-    [data-mistica-skin='vivo-new'] {
-        --mistica-color-background: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundAlternative: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundBrand: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundNegative: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundContainer: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundContainerError: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-backgroundContainerBrand: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundContainerNegative: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-new-raw-darkModeGrey), 0.8);
-        --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-backgroundSkeletonNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-backgroundBrandTop: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-appBarBackground: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-navigationBarBackground: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-        --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.03);
-        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-skeletonWave: var(--mistica-vivo-new-grey5);
-        --mistica-color-borderLow: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-border: var(--mistica-vivo-new-darkModeGrey);
-        --mistica-color-borderHigh: var(--mistica-vivo-new-grey5);
-        --mistica-color-borderSelected: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.25);
-        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.35);
-        --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
-        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
-        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
-        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-new-raw-white), 0);
-        --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-vivo-new-raw-white), 0);
-        --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
-        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
-        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(
-            var(--mistica-vivo-new-raw-white),
-            0.08
-        );
-        --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(
-            var(--mistica-vivo-new-raw-white),
-            0.08
-        );
-        --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.08);
-        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
-        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
-        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
-            var(--mistica-vivo-new-raw-white),
-            0.15
-        );
-        --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(
-            var(--mistica-vivo-new-raw-white),
-            0.15
-        );
-        --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-textButtonPrimary: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonSecondary: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-new-grey2);
-        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
-        --mistica-color-textLink: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textLinkInverse: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textLinkNegative: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textLinkBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
-        --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
-        --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
-        --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-inputBorder: var(--mistica-vivo-new-darkModeGrey5);
-        --mistica-color-inputBorderInverse: var(--mistica-vivo-new-darkModeGrey5);
-        --mistica-color-inputBorderNegative: var(--mistica-vivo-new-darkModeGrey5);
-        --mistica-color-inputBorderBrand: var(--mistica-vivo-new-darkModeGrey5);
-        --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-completedStepNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-completedStepBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-control: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-controlInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-controlNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-controlBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-controlActivatedNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-controlActivatedBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-controlError: var(--mistica-vivo-new-pepper);
-        --mistica-color-chevronIndicator: var(--mistica-vivo-new-grey5);
-        --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-barTrackNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-barTrackBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
-        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-new-grey4);
-        --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
-        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
-        --mistica-color-controlKnobNegative: var(--mistica-vivo-new-grey2);
-        --mistica-color-controlKnobBrand: var(--mistica-vivo-new-grey2);
-        --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-dividerNegative: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-dividerBrand: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-badge: var(--mistica-vivo-new-pepperDark);
-        --mistica-color-feedbackErrorBackground: var(--mistica-vivo-new-pepper);
-        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-new-grey6);
-        --mistica-color-brand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-brandHigh: rgba(var(--mistica-vivo-new-raw-white), 0.05);
-        --mistica-color-inverse: var(--mistica-vivo-new-grey2);
-        --mistica-color-negative: var(--mistica-vivo-new-grey2);
-        --mistica-color-neutralHigh: var(--mistica-vivo-new-grey2);
-        --mistica-color-neutralHighBrand: var(--mistica-vivo-new-grey2);
-        --mistica-color-neutralHighNegative: var(--mistica-vivo-new-grey2);
-        --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralMediumInverse: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralMediumNegative: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralMediumBrand: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralLow: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-textPrimary: var(--mistica-vivo-new-grey2);
-        --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-grey2);
-        --mistica-color-textPrimaryNegative: var(--mistica-vivo-new-grey2);
-        --mistica-color-textPrimaryBrand: var(--mistica-vivo-new-grey2);
-        --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
-        --mistica-color-textSecondary: var(--mistica-vivo-new-grey3);
-        --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-grey3);
-        --mistica-color-textSecondaryNegative: var(--mistica-vivo-new-grey3);
-        --mistica-color-textSecondaryBrand: var(--mistica-vivo-new-grey3);
-        --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
-        --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
-        --mistica-color-warning: var(--mistica-vivo-new-orange);
-        --mistica-color-error: var(--mistica-vivo-new-pepper);
-        --mistica-color-textError: var(--mistica-vivo-new-pepper);
-        --mistica-color-textErrorInverse: var(--mistica-vivo-new-pepper);
-        --mistica-color-textErrorNegative: var(--mistica-vivo-new-pepper);
-        --mistica-color-textErrorBrand: var(--mistica-vivo-new-pepper);
-        --mistica-color-promo: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-highlight: var(--mistica-vivo-new-pink);
-        --mistica-color-successLow: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-warningLow: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-errorLow: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-promoLow: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-brandLow: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-successHigh: var(--mistica-vivo-new-vivoGreenLight30);
-        --mistica-color-warningHigh: var(--mistica-vivo-new-orangeLight40);
-        --mistica-color-errorHigh: var(--mistica-vivo-new-pepperLight40);
-        --mistica-color-promoHigh: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-successHighInverse: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-successHighNegative: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-successHighBrand: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-warningHighInverse: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-warningHighNegative: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-warningHighBrand: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-errorHighNegative: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-errorHighBrand: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-promoHighInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-promoHighNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-promoHighBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-new-grey2);
-        --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-new-grey4);
-        --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-new-grey4);
-        --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-grey2);
-        --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
-        --mistica-color-textAppBarSelected: var(--mistica-vivo-new-grey2);
-        --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-white);
-        --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-customTabsBackground: var(--mistica-vivo-new-darkModeBlack);
-        --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-tagTextActive: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextInactive: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInfo: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextSuccess: var(--mistica-vivo-new-vivoGreenLight30);
-        --mistica-color-tagTextWarning: var(--mistica-vivo-new-orangeLight40);
-        --mistica-color-tagTextError: var(--mistica-vivo-new-pepperLight40);
-        --mistica-color-tagBackgroundPromo: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInfo: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundError: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagTextPromoInverse: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-tagTextPromoNegative: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-tagTextPromoBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-tagTextActiveInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextActiveNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextActiveBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInfoInverse: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextInfoNegative: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextInfoBrand: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-new-vivoGreenLight30);
-        --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-new-vivoGreenLight30);
-        --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-new-vivoGreenLight30);
-        --mistica-color-tagTextWarningInverse: var(--mistica-vivo-new-orangeLight40);
-        --mistica-color-tagTextWarningNegative: var(--mistica-vivo-new-orangeLight40);
-        --mistica-color-tagTextWarningBrand: var(--mistica-vivo-new-orangeLight40);
-        --mistica-color-tagTextErrorInverse: var(--mistica-vivo-new-pepperLight40);
-        --mistica-color-tagTextErrorNegative: var(--mistica-vivo-new-pepperLight40);
-        --mistica-color-tagTextErrorBrand: var(--mistica-vivo-new-pepperLight40);
-        --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-new-darkModeGrey6);
-        --mistica-color-cardContentOverlay: linear-gradient(
-            180deg,
-            rgba(var(--mistica-vivo-new-raw-grey6), 0) 0%,
-            rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
-            rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
-        );
-        --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
-    }
-
-    [data-mistica-skin='vivo-new'][data-mistica-color-scheme='light'] {
-        --mistica-color-background: var(--mistica-vivo-new-white);
-        --mistica-color-backgroundAlternative: var(--mistica-vivo-new-grey1);
-        --mistica-color-backgroundBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-backgroundNegative: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-new-vivoPurpleLight80);
-        --mistica-color-backgroundContainer: var(--mistica-vivo-new-white);
-        --mistica-color-backgroundContainerError: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.05);
-        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.08);
-        --mistica-color-backgroundContainerBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.2);
-        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.4);
-        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.4);
-        --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-new-grey1);
-        --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.6);
-        --mistica-color-backgroundSkeleton: var(--mistica-vivo-new-grey3);
-        --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-new-raw-grey6), 0.2);
-        --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-backgroundBrandTop: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-backgroundBrandBottom: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-appBarBackground: var(--mistica-vivo-new-white);
-        --mistica-color-navigationBarBackground: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-new-raw-vivoPurple), 0.06);
-        --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
-        --mistica-color-backgroundDropZoneBrandDragover: rgba(
-            var(--mistica-vivo-new-raw-vivoPurpleDark),
-            0.5
-        );
-        --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-        --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-new-raw-white), 0.17);
-        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-new-raw-vivoPurpleDark), 0.3);
-        --mistica-color-backgroundDropZoneMediaDragover: rgba(
-            var(--mistica-vivo-new-raw-vivoPurpleDark),
-            0.5
-        );
-        --mistica-color-skeletonWave: var(--mistica-vivo-new-grey2);
-        --mistica-color-borderLow: var(--mistica-vivo-new-grey1);
-        --mistica-color-border: var(--mistica-vivo-new-grey3);
-        --mistica-color-borderHigh: var(--mistica-vivo-new-grey5);
-        --mistica-color-borderSelected: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.25);
-        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.35);
-        --mistica-color-buttonDangerBackground: var(--mistica-vivo-new-pepper);
-        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-vivo-new-pepperDark);
-        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
-        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-new-white);
-        --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-vivo-new-white);
-        --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-vivo-new-white);
-        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-vivo-new-white);
-        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-buttonLinkBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-        --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-        --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.1);
-        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-white);
-        --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-new-white);
-        --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-new-white);
-        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-new-white);
-        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-new-raw-white), 0);
-        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderNegative: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderBrand: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-vivo-new-white);
-        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(
-            var(--mistica-vivo-new-raw-white),
-            0.15
-        );
-        --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(
-            var(--mistica-vivo-new-raw-white),
-            0.15
-        );
-        --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-vivo-new-raw-white), 0.15);
-        --mistica-color-textButtonPrimary: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryMedia: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonSecondary: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryNegative: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryBrand: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryMedia: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryPressed: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-vivo-new-white);
-        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-vivo-new-white);
-        --mistica-color-textLink: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textLinkInverse: var(--mistica-vivo-new-white);
-        --mistica-color-textLinkNegative: var(--mistica-vivo-new-white);
-        --mistica-color-textLinkBrand: var(--mistica-vivo-new-white);
-        --mistica-color-textLinkMedia: var(--mistica-vivo-new-white);
-        --mistica-color-textLinkDanger: var(--mistica-vivo-new-pepper);
-        --mistica-color-textLinkDangerMedia: var(--mistica-vivo-new-pepper);
-        --mistica-color-textLinkSnackbar: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-textActivated: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-inputBorder: var(--mistica-vivo-new-grey4);
-        --mistica-color-inputBorderInverse: var(--mistica-vivo-new-white);
-        --mistica-color-inputBorderNegative: var(--mistica-vivo-new-white);
-        --mistica-color-inputBorderBrand: var(--mistica-vivo-new-white);
-        --mistica-color-completedStep: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-completedStepInverse: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-completedStepNegative: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-completedStepBrand: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-control: var(--mistica-vivo-new-grey4);
-        --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-controlInverse: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-controlNegative: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-controlBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
-        --mistica-color-controlActivatedNegative: var(--mistica-vivo-new-white);
-        --mistica-color-controlActivatedBrand: var(--mistica-vivo-new-white);
-        --mistica-color-controlError: var(--mistica-vivo-new-pepper);
-        --mistica-color-chevronIndicator: var(--mistica-vivo-new-grey5);
-        --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
-        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
-        --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-new-raw-white), 0.5);
-        --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-new-raw-white), 0.5);
-        --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
-        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-new-white);
-        --mistica-color-toggleAndroidInactiveBrand: var(--mistica-vivo-new-grey2);
-        --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
-        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-controlKnobNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-controlKnobBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-divider: var(--mistica-vivo-new-grey3);
-        --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
-        --mistica-color-dividerNegative: rgba(var(--mistica-vivo-new-raw-white), 0.2);
-        --mistica-color-dividerBrand: rgba(var(--mistica-vivo-new-raw-white), 0.2);
-        --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-badge: var(--mistica-vivo-new-pepperDark);
-        --mistica-color-feedbackErrorBackground: var(--mistica-vivo-new-pepper);
-        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-brand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-brandHigh: var(--mistica-vivo-new-vivoPurpleDark);
-        --mistica-color-inverse: var(--mistica-vivo-new-white);
-        --mistica-color-negative: var(--mistica-vivo-new-white);
-        --mistica-color-neutralHigh: var(--mistica-vivo-new-grey6);
-        --mistica-color-neutralHighBrand: var(--mistica-vivo-new-white);
-        --mistica-color-neutralHighNegative: var(--mistica-vivo-new-white);
-        --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralMediumInverse: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralMediumNegative: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralMediumBrand: var(--mistica-vivo-new-grey5);
-        --mistica-color-neutralLow: var(--mistica-vivo-new-grey1);
-        --mistica-color-neutralLowAlternative: var(--mistica-vivo-new-grey2);
-        --mistica-color-textPrimary: var(--mistica-vivo-new-grey6);
-        --mistica-color-textPrimaryInverse: var(--mistica-vivo-new-white);
-        --mistica-color-textPrimaryNegative: var(--mistica-vivo-new-white);
-        --mistica-color-textPrimaryBrand: var(--mistica-vivo-new-white);
-        --mistica-color-textPrimaryMedia: var(--mistica-vivo-new-white);
-        --mistica-color-textSecondary: var(--mistica-vivo-new-grey5);
-        --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-textSecondaryNegative: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-textSecondaryBrand: var(--mistica-vivo-new-vivoPurpleLight20);
-        --mistica-color-textSecondaryMedia: var(--mistica-vivo-new-white);
-        --mistica-color-success: var(--mistica-vivo-new-vivoGreen);
-        --mistica-color-warning: var(--mistica-vivo-new-orange);
-        --mistica-color-error: var(--mistica-vivo-new-pepper);
-        --mistica-color-textError: var(--mistica-vivo-new-pepper);
-        --mistica-color-textErrorInverse: var(--mistica-vivo-new-white);
-        --mistica-color-textErrorNegative: var(--mistica-vivo-new-white);
-        --mistica-color-textErrorBrand: var(--mistica-vivo-new-white);
-        --mistica-color-promo: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-highlight: var(--mistica-vivo-new-pink);
-        --mistica-color-successLow: var(--mistica-vivo-new-vivoGreenLight10);
-        --mistica-color-warningLow: var(--mistica-vivo-new-orangeLight10);
-        --mistica-color-errorLow: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-promoLow: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-brandLow: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-successHigh: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-warningHigh: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-errorHigh: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-promoHigh: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-successHighInverse: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-successHighNegative: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-successHighBrand: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-warningHighInverse: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-warningHighNegative: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-warningHighBrand: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-errorHighNegative: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-errorHighBrand: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-promoHighInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-promoHighNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-promoHighBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-new-white);
-        --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-new-vivoPurpleLight50);
-        --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-new-white);
-        --mistica-color-textAppBar: var(--mistica-vivo-new-grey5);
-        --mistica-color-textAppBarSelected: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-iosGlassAppBar: var(--mistica-vivo-new-grey6);
-        --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-customTabsBackground: var(--mistica-vivo-new-white);
-        --mistica-color-tagTextPromo: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextActive: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextInactive: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInfo: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextSuccess: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-tagTextWarning: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-tagTextError: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-tagBackgroundPromo: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActive: var(--mistica-vivo-new-grey1);
-        --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-grey1);
-        --mistica-color-tagBackgroundInfo: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-new-vivoGreenLight10);
-        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-new-orangeLight10);
-        --mistica-color-tagBackgroundError: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-tagTextPromoInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextPromoNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextPromoBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextActiveInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextActiveNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextActiveBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextInactiveInverse: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInactiveNegative: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInactiveBrand: var(--mistica-vivo-new-grey5);
-        --mistica-color-tagTextInfoInverse: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextInfoNegative: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextInfoBrand: var(--mistica-vivo-new-vivoPurple);
-        --mistica-color-tagTextSuccessInverse: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-tagTextSuccessNegative: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-tagTextSuccessBrand: var(--mistica-vivo-new-vivoGreenDark);
-        --mistica-color-tagTextWarningInverse: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-tagTextWarningNegative: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-tagTextWarningBrand: var(--mistica-vivo-new-orangeDark);
-        --mistica-color-tagTextErrorInverse: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-tagTextErrorNegative: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-tagTextErrorBrand: var(--mistica-vivo-new-pepperDark80);
-        --mistica-color-tagBackgroundPromoInverse: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundPromoNegative: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundPromoBrand: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActiveInverse: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActiveNegative: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActiveBrand: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundInactiveInverse: var(--mistica-vivo-new-grey1);
-        --mistica-color-tagBackgroundInactiveNegative: var(--mistica-vivo-new-grey1);
-        --mistica-color-tagBackgroundInactiveBrand: var(--mistica-vivo-new-grey1);
-        --mistica-color-tagBackgroundInfoInverse: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundInfoNegative: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundInfoBrand: var(--mistica-vivo-new-vivoPurpleLight10);
-        --mistica-color-tagBackgroundSuccessInverse: var(--mistica-vivo-new-vivoGreenLight10);
-        --mistica-color-tagBackgroundSuccessNegative: var(--mistica-vivo-new-vivoGreenLight10);
-        --mistica-color-tagBackgroundSuccessBrand: var(--mistica-vivo-new-vivoGreenLight10);
-        --mistica-color-tagBackgroundWarningInverse: var(--mistica-vivo-new-orangeLight10);
-        --mistica-color-tagBackgroundWarningNegative: var(--mistica-vivo-new-orangeLight10);
-        --mistica-color-tagBackgroundWarningBrand: var(--mistica-vivo-new-orangeLight10);
-        --mistica-color-tagBackgroundErrorInverse: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-tagBackgroundErrorNegative: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-tagBackgroundErrorBrand: var(--mistica-vivo-new-pepperLight10);
-        --mistica-color-cardContentOverlay: linear-gradient(
-            180deg,
-            rgba(var(--mistica-vivo-new-raw-grey6), 0) 0%,
-            rgba(var(--mistica-vivo-new-raw-grey6), 0.4) 30%,
-            rgba(var(--mistica-vivo-new-raw-grey6), 0.7) 100%
-        );
-        --mistica-color-cardFooterOverlay: rgba(var(--mistica-vivo-new-raw-grey6), 0.7);
-    }
-}
-
-@media (min-width: 1024px) {
-    [data-mistica-skin='vivo-new'] {
-        /* Text */
-        --mistica-font-size-1: 0.875rem;
-        --mistica-line-height-1: 1.25rem;
-        --mistica-font-size-2: 1rem;
-        --mistica-line-height-2: 1.5rem;
-        --mistica-font-size-3: 1.125rem;
-        --mistica-line-height-3: 1.5rem;
-        --mistica-font-size-4: 1.5rem;
-        --mistica-line-height-4: 1.75rem;
-        --mistica-font-size-5: 1.75rem;
-        --mistica-line-height-5: 2rem;
-        --mistica-font-size-6: 2rem;
-        --mistica-line-height-6: 2.5rem;
-        --mistica-font-size-7: 2.5rem;
-        --mistica-line-height-7: 3rem;
-        --mistica-font-size-8: 3rem;
-        --mistica-line-height-8: 3.5rem;
-        --mistica-font-size-9: 3.5rem;
-        --mistica-line-height-9: 4rem;
-        --mistica-font-size-10: 4rem;
-        --mistica-line-height-10: 4.5rem;
-        --mistica-font-size-cardTitle: 1.5rem;
-        --mistica-line-height-cardTitle: 1.75rem;
-        --mistica-font-size-drawerTitle: 1.75rem;
-        --mistica-line-height-drawerTitle: 2rem;
-
-        --mistica-font-size-tabsLabel: 1.125rem;
-        --mistica-line-height-tabsLabel: 1.5rem;
-
-        --mistica-font-size-title1: 0.875rem;
-        --mistica-line-height-title1: 1.25rem;
-        --mistica-font-size-title2: 1.125rem;
-        --mistica-line-height-title2: 1.5rem;
-        --mistica-font-size-title3: 1.5rem;
-        --mistica-line-height-title3: 1.75rem;
-        --mistica-font-size-title4: 2rem;
-        --mistica-line-height-title4: 2.5rem;
-
-        --mistica-font-size-chipLabel: 1rem;
-        --mistica-line-height-chipLabel: 1.5rem;
-        --mistica-font-size-cardPretitleSnap: 1rem;
-        --mistica-line-height-cardPretitleSnap: 1.5rem;
-        --mistica-font-size-cardTitleSnap: 1rem;
-        --mistica-line-height-cardTitleSnap: 1.5rem;
-        --mistica-font-size-cardSubtitleSnap: 1rem;
-        --mistica-line-height-cardSubtitleSnap: 1.5rem;
-        --mistica-font-size-cardDescriptionSnap: 1rem;
-        --mistica-line-height-cardDescriptionSnap: 1.5rem;
-        --mistica-font-size-cardPretitleDefault: 1rem;
-        --mistica-line-height-cardPretitleDefault: 1.5rem;
-        --mistica-font-size-cardTitleDefault: 1.5rem;
-        --mistica-line-height-cardTitleDefault: 1.75rem;
-        --mistica-font-size-cardSubtitleDefault: 1rem;
-        --mistica-line-height-cardSubtitleDefault: 1.5rem;
-        --mistica-font-size-cardDescriptionDefault: 1rem;
-        --mistica-line-height-cardDescriptionDefault: 1.5rem;
-        --mistica-font-size-inputLabel: 0.875rem;
-        --mistica-line-height-inputLabel: 1.25rem;
-        --mistica-font-size-inputValue: 1.125rem;
-        --mistica-line-height-inputValue: 1.5rem;
-        --mistica-font-size-inputHelperText: 0.875rem;
-        --mistica-line-height-inputHelperText: 1.25rem;
-        --mistica-font-size-stepperStepLabel: 1rem;
-        --mistica-line-height-stepperStepLabel: 1.5rem;
-        --mistica-font-size-loadingScreenTitle: 1.5rem;
-        --mistica-line-height-loadingScreenTitle: 1.75rem;
-    }
-}
diff --git a/css/vivo.css b/css/vivo.css
index 75d3244faf..3bfb78760a 100644
--- a/css/vivo.css
+++ b/css/vivo.css
@@ -4,30 +4,30 @@
     --mistica-vivo-grey1: #f6f6f6;
     --mistica-vivo-vivoPurple: #660099;
     --mistica-vivo-vivoPurpleDark: #461e5f;
+    --mistica-vivo-vivoPurpleLight80: #8433ad;
     --mistica-vivo-pepperLight10: #fce4ef;
-    --mistica-vivo-grey2: #eeeeee;
     --mistica-vivo-grey3: #dddddd;
+    --mistica-vivo-vivoPurpleLight10: #efe5f4;
+    --mistica-vivo-grey2: #eeeeee;
     --mistica-vivo-grey5: #666666;
     --mistica-vivo-pepper: #cc1f59;
     --mistica-vivo-pepperDark: #b71d63;
-    --mistica-vivo-vivoPurpleLight10: #efe5f4;
-    --mistica-vivo-vivoPurpleLight50: #b280cc;
-    --mistica-vivo-pink: #eb3d7d;
-    --mistica-vivo-pepperLight30: #f7b1cb;
     --mistica-vivo-vivoPurpleLight20: #e0cceb;
+    --mistica-vivo-grey4: #8a8c90;
+    --mistica-vivo-vivoPurpleLight50: #b280cc;
     --mistica-vivo-grey6: #000000;
     --mistica-vivo-vivoGreen: #99cc33;
     --mistica-vivo-orange: #ff9900;
+    --mistica-vivo-pink: #eb3d7d;
     --mistica-vivo-vivoGreenLight10: #edf8e8;
     --mistica-vivo-orangeLight10: #ffefe1;
     --mistica-vivo-vivoGreenDark: #225c3d;
     --mistica-vivo-orangeDark: #972a1d;
     --mistica-vivo-pepperDark80: #8f2052;
-    --mistica-vivo-grey4: #999999;
     --mistica-vivo-darkModeBlack: #191919;
     --mistica-vivo-darkModeGrey: #242424;
     --mistica-vivo-darkModeGrey6: #313235;
-    --mistica-vivo-vivoPurpleLight80: #8433ad;
+    --mistica-vivo-darkModeGrey5: #6d7d88;
     --mistica-vivo-vivoGreenLight30: #91ae9e;
     --mistica-vivo-orangeLight40: #ffb84c;
     --mistica-vivo-pepperLight40: #db628b;
@@ -35,6 +35,7 @@
     /* Raw palette colors, for use with rgba() */
     --mistica-vivo-raw-darkModeBlack: 25, 25, 25;
     --mistica-vivo-raw-grey6: 0, 0, 0;
+    --mistica-vivo-raw-vivoPurple: 102, 0, 153;
     --mistica-vivo-raw-vivoPurpleDark: 70, 30, 95;
     --mistica-vivo-raw-white: 255, 255, 255;
     --mistica-vivo-raw-darkModeGrey: 36, 36, 36;
@@ -44,7 +45,7 @@
     --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
     --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
     --mistica-color-backgroundNegative: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurple);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-backgroundContainer: var(--mistica-vivo-white);
     --mistica-color-backgroundContainerError: var(--mistica-vivo-pepperLight10);
     --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.05);
@@ -57,7 +58,7 @@
     --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
     --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
-    --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey2);
+    --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
     --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-raw-grey6), 0.2);
     --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-vivoPurpleDark);
@@ -65,14 +66,14 @@
     --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
     --mistica-color-appBarBackground: var(--mistica-vivo-white);
     --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
-    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.07);
-    --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.12);
-    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurple), 0.06);
+    --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
     --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
-    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
     --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
     --mistica-color-borderLow: var(--mistica-vivo-grey1);
     --mistica-color-border: var(--mistica-vivo-grey3);
@@ -103,15 +104,15 @@
     --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight50);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -159,10 +160,10 @@
     --mistica-color-textLinkMedia: var(--mistica-vivo-white);
     --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
     --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
-    --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
-    --mistica-color-inputBorder: var(--mistica-vivo-grey3);
+    --mistica-color-inputBorder: var(--mistica-vivo-grey4);
     --mistica-color-inputBorderInverse: var(--mistica-vivo-white);
     --mistica-color-inputBorderNegative: var(--mistica-vivo-white);
     --mistica-color-inputBorderBrand: var(--mistica-vivo-white);
@@ -170,7 +171,7 @@
     --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-completedStepBrand: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-control: var(--mistica-vivo-grey3);
+    --mistica-color-control: var(--mistica-vivo-grey4);
     --mistica-color-controlActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-controlInverse: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-controlNegative: var(--mistica-vivo-vivoPurpleLight50);
@@ -184,8 +185,8 @@
     --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-raw-white), 0.5);
-    --mistica-color-loadingBar: var(--mistica-vivo-pink);
-    --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
+    --mistica-color-loadingBar: var(--mistica-vivo-vivoPurple);
+    --mistica-color-loadingBarBackground: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-white);
@@ -196,14 +197,14 @@
     --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
     --mistica-color-controlKnobNegative: var(--mistica-vivo-vivoPurple);
     --mistica-color-controlKnobBrand: var(--mistica-vivo-vivoPurple);
-    --mistica-color-divider: var(--mistica-vivo-grey2);
+    --mistica-color-divider: var(--mistica-vivo-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-dividerNegative: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-dividerBrand: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
     --mistica-color-badge: var(--mistica-vivo-pepperDark);
     --mistica-color-feedbackErrorBackground: var(--mistica-vivo-pepper);
-    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-grey6);
+    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-brand: var(--mistica-vivo-vivoPurple);
     --mistica-color-brandHigh: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-inverse: var(--mistica-vivo-white);
@@ -261,11 +262,11 @@
     --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-white);
-    --mistica-color-textAppBar: var(--mistica-vivo-grey4);
+    --mistica-color-textAppBar: var(--mistica-vivo-grey5);
     --mistica-color-textAppBarSelected: var(--mistica-vivo-vivoPurple);
     --mistica-color-iosGlassAppBar: var(--mistica-vivo-grey6);
     --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurple);
-    --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
+    --mistica-color-customTabsBackground: var(--mistica-vivo-white);
     --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
     --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurple);
     --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
@@ -274,7 +275,7 @@
     --mistica-color-tagTextWarning: var(--mistica-vivo-orangeDark);
     --mistica-color-tagTextError: var(--mistica-vivo-pepperDark80);
     --mistica-color-tagBackgroundPromo: var(--mistica-vivo-vivoPurpleLight10);
-    --mistica-color-tagBackgroundActive: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-tagBackgroundActive: var(--mistica-vivo-grey1);
     --mistica-color-tagBackgroundInactive: var(--mistica-vivo-grey1);
     --mistica-color-tagBackgroundInfo: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-vivoGreenLight10);
@@ -333,17 +334,17 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
     --mistica-border-radius-bar: 999px;
-    --mistica-border-radius-button: 4px;
-    --mistica-border-radius-checkbox: 2px;
-    --mistica-border-radius-container: 8px;
+    --mistica-border-radius-button: 32px;
+    --mistica-border-radius-checkbox: 4px;
+    --mistica-border-radius-container: 24px;
     --mistica-border-radius-indicator: 24px;
     --mistica-border-radius-chip: 24px;
-    --mistica-border-radius-tag: 24px;
-    --mistica-border-radius-input: 8px;
-    --mistica-border-radius-legacyDisplay: 16px;
-    --mistica-border-radius-popup: 8px;
-    --mistica-border-radius-sheet: 8px;
-    --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-tag: 10px;
+    --mistica-border-radius-input: 16px;
+    --mistica-border-radius-legacyDisplay: 24px;
+    --mistica-border-radius-popup: 16px;
+    --mistica-border-radius-sheet: 24px;
+    --mistica-border-radius-mediaSmall: 12px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -356,31 +357,31 @@
     --mistica-line-height-4: 1.5rem;
     --mistica-font-size-5: 1.25rem;
     --mistica-line-height-5: 1.5rem;
-    --mistica-font-weight-5: 300;
+    --mistica-font-weight-5: 500;
     --mistica-font-size-6: 1.5rem;
     --mistica-line-height-6: 2rem;
-    --mistica-font-weight-6: 300;
+    --mistica-font-weight-6: 500;
     --mistica-font-size-7: 1.75rem;
     --mistica-line-height-7: 2rem;
-    --mistica-font-weight-7: 300;
+    --mistica-font-weight-7: 500;
     --mistica-font-size-8: 2rem;
     --mistica-line-height-8: 2.5rem;
-    --mistica-font-weight-8: 300;
+    --mistica-font-weight-8: 400;
     --mistica-font-size-9: 2.5rem;
     --mistica-line-height-9: 3rem;
-    --mistica-font-weight-9: 300;
+    --mistica-font-weight-9: 400;
     --mistica-font-size-10: 3rem;
     --mistica-line-height-10: 3.5rem;
-    --mistica-font-weight-10: 300;
+    --mistica-font-weight-10: 400;
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
-    --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-cardTitle: 500;
     --mistica-font-size-drawerTitle: 1.25rem;
     --mistica-line-height-drawerTitle: 1.5rem;
-    --mistica-font-weight-drawerTitle: 300;
+    --mistica-font-weight-drawerTitle: 500;
     --mistica-font-weight-rowTitle: 400;
     --mistica-font-weight-button: 500;
-    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-font-size-tabsLabel: 1.125rem;
     --mistica-line-height-tabsLabel: 1.5rem;
     --mistica-font-weight-tabsLabel: 500;
     --mistica-font-weight-link: 500;
@@ -389,15 +390,15 @@
     --mistica-font-weight-title1: 500;
     --mistica-font-size-title2: 1rem;
     --mistica-line-height-title2: 1.5rem;
-    --mistica-font-weight-title2: 300;
-    --mistica-font-size-title3: 1.25rem;
+    --mistica-font-weight-title2: 500;
+    --mistica-font-size-title3: 1.125rem;
     --mistica-line-height-title3: 1.5rem;
-    --mistica-font-weight-title3: 300;
+    --mistica-font-weight-title3: 500;
     --mistica-font-size-title4: 1.5rem;
     --mistica-line-height-title4: 2rem;
-    --mistica-font-weight-title4: 300;
+    --mistica-font-weight-title4: 500;
     --mistica-font-weight-indicator: 500;
-    --mistica-font-weight-navigationBar: 500;
+    --mistica-font-weight-navigationBar: 400;
     --mistica-font-size-chipLabel: 0.875rem;
     --mistica-line-height-chipLabel: 1.25rem;
     --mistica-font-weight-chipLabel: 500;
@@ -496,12 +497,12 @@
     --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
     --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleDark);
-    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
     --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
     --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -552,10 +553,10 @@
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
-    --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey6);
-    --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey6);
-    --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey6);
-    --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey5);
+    --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey5);
+    --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey5);
+    --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey5);
     --mistica-color-completedStep: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleLight80);
@@ -612,10 +613,10 @@
     --mistica-color-textPrimaryNegative: var(--mistica-vivo-grey2);
     --mistica-color-textPrimaryBrand: var(--mistica-vivo-grey2);
     --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
-    --mistica-color-textSecondary: var(--mistica-vivo-grey4);
-    --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
-    --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey4);
-    --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey4);
+    --mistica-color-textSecondary: var(--mistica-vivo-grey3);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey3);
+    --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey3);
+    --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey3);
     --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
     --mistica-color-success: var(--mistica-vivo-vivoGreen);
     --mistica-color-warning: var(--mistica-vivo-orange);
@@ -789,12 +790,12 @@
         --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -845,10 +846,10 @@
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
-        --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey6);
-        --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey6);
-        --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey6);
-        --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-inputBorder: var(--mistica-vivo-darkModeGrey5);
+        --mistica-color-inputBorderInverse: var(--mistica-vivo-darkModeGrey5);
+        --mistica-color-inputBorderNegative: var(--mistica-vivo-darkModeGrey5);
+        --mistica-color-inputBorderBrand: var(--mistica-vivo-darkModeGrey5);
         --mistica-color-completedStep: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleLight80);
@@ -905,10 +906,10 @@
         --mistica-color-textPrimaryNegative: var(--mistica-vivo-grey2);
         --mistica-color-textPrimaryBrand: var(--mistica-vivo-grey2);
         --mistica-color-textPrimaryMedia: var(--mistica-vivo-white);
-        --mistica-color-textSecondary: var(--mistica-vivo-grey4);
-        --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
-        --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey4);
-        --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey4);
+        --mistica-color-textSecondary: var(--mistica-vivo-grey3);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey3);
+        --mistica-color-textSecondaryNegative: var(--mistica-vivo-grey3);
+        --mistica-color-textSecondaryBrand: var(--mistica-vivo-grey3);
         --mistica-color-textSecondaryMedia: var(--mistica-vivo-white);
         --mistica-color-success: var(--mistica-vivo-vivoGreen);
         --mistica-color-warning: var(--mistica-vivo-orange);
@@ -1019,7 +1020,7 @@
         --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
         --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
         --mistica-color-backgroundNegative: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurple);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-backgroundContainer: var(--mistica-vivo-white);
         --mistica-color-backgroundContainerError: var(--mistica-vivo-pepperLight10);
         --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.05);
@@ -1032,7 +1033,7 @@
         --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
         --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
-        --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey2);
+        --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
         --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-vivo-raw-grey6), 0.2);
         --mistica-color-backgroundSkeletonBrand: var(--mistica-vivo-vivoPurpleDark);
@@ -1040,14 +1041,14 @@
         --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
         --mistica-color-appBarBackground: var(--mistica-vivo-white);
         --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
-        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.07);
-        --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.12);
-        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-vivo-raw-vivoPurple), 0.06);
+        --mistica-color-backgroundDropZoneDragover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
         --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
-        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.2);
-        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.4);
+        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
+        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
         --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
         --mistica-color-borderLow: var(--mistica-vivo-grey1);
         --mistica-color-border: var(--mistica-vivo-grey3);
@@ -1078,15 +1079,15 @@
         --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight50);
-        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
         --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
         --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
@@ -1134,10 +1135,10 @@
         --mistica-color-textLinkMedia: var(--mistica-vivo-white);
         --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
         --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
-        --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
-        --mistica-color-inputBorder: var(--mistica-vivo-grey3);
+        --mistica-color-inputBorder: var(--mistica-vivo-grey4);
         --mistica-color-inputBorderInverse: var(--mistica-vivo-white);
         --mistica-color-inputBorderNegative: var(--mistica-vivo-white);
         --mistica-color-inputBorderBrand: var(--mistica-vivo-white);
@@ -1145,7 +1146,7 @@
         --mistica-color-completedStepInverse: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-completedStepNegative: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-completedStepBrand: var(--mistica-vivo-vivoPurpleDark);
-        --mistica-color-control: var(--mistica-vivo-grey3);
+        --mistica-color-control: var(--mistica-vivo-grey4);
         --mistica-color-controlActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-controlInverse: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-controlNegative: var(--mistica-vivo-vivoPurpleLight50);
@@ -1159,8 +1160,8 @@
         --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-barTrackNegative: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-barTrackBrand: rgba(var(--mistica-vivo-raw-white), 0.5);
-        --mistica-color-loadingBar: var(--mistica-vivo-pink);
-        --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
+        --mistica-color-loadingBar: var(--mistica-vivo-vivoPurple);
+        --mistica-color-loadingBarBackground: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-toggleAndroidActiveBrand: var(--mistica-vivo-white);
@@ -1171,14 +1172,14 @@
         --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
         --mistica-color-controlKnobNegative: var(--mistica-vivo-vivoPurple);
         --mistica-color-controlKnobBrand: var(--mistica-vivo-vivoPurple);
-        --mistica-color-divider: var(--mistica-vivo-grey2);
+        --mistica-color-divider: var(--mistica-vivo-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-dividerNegative: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-dividerBrand: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
         --mistica-color-badge: var(--mistica-vivo-pepperDark);
         --mistica-color-feedbackErrorBackground: var(--mistica-vivo-pepper);
-        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-grey6);
+        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-brand: var(--mistica-vivo-vivoPurple);
         --mistica-color-brandHigh: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-inverse: var(--mistica-vivo-white);
@@ -1236,11 +1237,11 @@
         --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-white);
-        --mistica-color-textAppBar: var(--mistica-vivo-grey4);
+        --mistica-color-textAppBar: var(--mistica-vivo-grey5);
         --mistica-color-textAppBarSelected: var(--mistica-vivo-vivoPurple);
         --mistica-color-iosGlassAppBar: var(--mistica-vivo-grey6);
         --mistica-color-iosGlassAppBarSelected: var(--mistica-vivo-vivoPurple);
-        --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
+        --mistica-color-customTabsBackground: var(--mistica-vivo-white);
         --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
         --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurple);
         --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
@@ -1249,7 +1250,7 @@
         --mistica-color-tagTextWarning: var(--mistica-vivo-orangeDark);
         --mistica-color-tagTextError: var(--mistica-vivo-pepperDark80);
         --mistica-color-tagBackgroundPromo: var(--mistica-vivo-vivoPurpleLight10);
-        --mistica-color-tagBackgroundActive: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-tagBackgroundActive: var(--mistica-vivo-grey1);
         --mistica-color-tagBackgroundInactive: var(--mistica-vivo-grey1);
         --mistica-color-tagBackgroundInfo: var(--mistica-vivo-vivoPurpleLight10);
         --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-vivoGreenLight10);
@@ -1316,7 +1317,7 @@
         --mistica-line-height-2: 1.5rem;
         --mistica-font-size-3: 1.125rem;
         --mistica-line-height-3: 1.5rem;
-        --mistica-font-size-4: 1.25rem;
+        --mistica-font-size-4: 1.5rem;
         --mistica-line-height-4: 1.75rem;
         --mistica-font-size-5: 1.75rem;
         --mistica-line-height-5: 2rem;
@@ -1342,8 +1343,8 @@
         --mistica-line-height-title1: 1.25rem;
         --mistica-font-size-title2: 1.125rem;
         --mistica-line-height-title2: 1.5rem;
-        --mistica-font-size-title3: 1.75rem;
-        --mistica-line-height-title3: 2rem;
+        --mistica-font-size-title3: 1.5rem;
+        --mistica-line-height-title3: 1.75rem;
         --mistica-font-size-title4: 2rem;
         --mistica-line-height-title4: 2.5rem;
 
@@ -1359,7 +1360,7 @@
         --mistica-line-height-cardDescriptionSnap: 1.5rem;
         --mistica-font-size-cardPretitleDefault: 1rem;
         --mistica-line-height-cardPretitleDefault: 1.5rem;
-        --mistica-font-size-cardTitleDefault: 1.25rem;
+        --mistica-font-size-cardTitleDefault: 1.5rem;
         --mistica-line-height-cardTitleDefault: 1.75rem;
         --mistica-font-size-cardSubtitleDefault: 1rem;
         --mistica-line-height-cardSubtitleDefault: 1.5rem;
@@ -1373,7 +1374,7 @@
         --mistica-line-height-inputHelperText: 1.25rem;
         --mistica-font-size-stepperStepLabel: 1rem;
         --mistica-line-height-stepperStepLabel: 1.5rem;
-        --mistica-font-size-loadingScreenTitle: 1.25rem;
+        --mistica-font-size-loadingScreenTitle: 1.5rem;
         --mistica-line-height-loadingScreenTitle: 1.75rem;
     }
 }
diff --git a/doc/fonts.md b/doc/fonts.md
index d6e01a39dd..8b82136e10 100644
--- a/doc/fonts.md
+++ b/doc/fonts.md
@@ -8,18 +8,18 @@ default serif font (Times New Roman on desktop). You must declare `@font-face` r
 
 Each skin has a designated font family. Use the correct one for the skin your app is using:
 
-| Skin                         | Getter function        | Font family         |
-| ---------------------------- | ---------------------- | ------------------- |
-| `movistar-new` _(preferred)_ | `getMovistarNewSkin()` | `'Movistar Sans'`   |
-| `movistar` _(legacy)_        | `getMovistarSkin()`    | `'On Air'`          |
-| `o2-new` _(preferred)_       | `getO2NewSkin()`       | `'On Air'`          |
-| `o2` _(legacy)_              | `getO2Skin()`          | `'On Air'`          |
-| `vivo-new` _(preferred)_     | `getVivoNewSkin()`     | `'Vivo Type'`       |
-| `vivo` _(legacy)_            | `getVivoSkin()`        | `'Roboto'`          |
-| `telefonica`                 | `getTelefonicaSkin()`  | `'Telefonica Sans'` |
-| `blau`                       | `getBlauSkin()`        | `'Roboto'`          |
-| `tu`                         | `getTuSkin()`          | `'Telefonica Sans'` |
-| `esimflag`                   | `getEsimflagSkin()`    | `'On Air'`          |
+| Skin                         | Getter function          | Font family         |
+| ---------------------------- | ------------------------ | ------------------- |
+| `movistar-new` _(preferred)_ | `getMovistarNewSkin()`   | `'Movistar Sans'`   |
+| `movistar` _(legacy)_        | `getMovistarSkin()`      | `'On Air'`          |
+| `o2-new` _(preferred)_       | `getO2NewSkin()`         | `'On Air'`          |
+| `o2` _(legacy)_              | `getO2Skin()`            | `'On Air'`          |
+| `vivo`                       | `getVivoSkin()`          | `'Vivo Type'`       |
+| `vivo-evolution`             | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
+| `telefonica`                 | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
+| `blau`                       | `getBlauSkin()`          | `'Roboto'`          |
+| `tu`                         | `getTuSkin()`            | `'Telefonica Sans'` |
+| `esimflag`                   | `getEsimflagSkin()`      | `'On Air'`          |
 
 ## Setting font-family
 
diff --git a/doc/llms/llms.md b/doc/llms/llms.md
index 3330c3a690..1675803d84 100644
--- a/doc/llms/llms.md
+++ b/doc/llms/llms.md
@@ -152,13 +152,13 @@ type ThemeConfig = {
 };
 ```
 
-Available skins: `getMovistarNewSkin()`, `getVivoNewSkin()`, `getO2NewSkin()`, `getTelefonicaSkin()`,
-`getBlauSkin()`, `getTuSkin()`, and others via `getSkinByName()`. Legacy variants without the `New` suffix
-also exist (`getMovistarSkin()`, `getVivoSkin()`, `getO2Skin()`); prefer the `New` versions for new projects.
-You can also create a custom skin. If you need to customize default component colors, radii, or other visual
-tokens beyond the props exposed by a component, prefer extending a skin over overriding component styles.
-Built-in palette exports such as `movistarNewPalette`, `o2NewPalette`, `vivoNewPalette`, etc. are available
-for skin authoring, and custom skins may also define their own palette colors from scratch.
+Available skins: `getMovistarNewSkin()`, `getVivoSkin()`, `getVivoEvolutionSkin()`, `getO2NewSkin()`,
+`getTelefonicaSkin()`, `getBlauSkin()`, `getTuSkin()`, and others via `getSkinByName()`. Legacy variants
+without the `New` suffix also exist (`getMovistarSkin()`, `getO2Skin()`); prefer the `New` versions for new
+projects. You can also create a custom skin. If you need to customize default component colors, radii, or
+other visual tokens beyond the props exposed by a component, prefer extending a skin over overriding component
+styles. Built-in palette exports such as `movistarNewPalette`, `o2NewPalette`, `vivoPalette`, etc. are
+available for skin authoring, and custom skins may also define their own palette colors from scratch.
 
 Built-in Link integrations: `Next12`, `Next13`, `Next14`, `ReactRouter5`, `ReactRouter6`.
 
@@ -289,7 +289,7 @@ All tokens via `skinVars` from `@telefonica/mistica`:
 - **Colors**: `skinVars.colors.*` (286 tokens for backgrounds, text, borders, controls, status, tags)
 - **Raw colors**: `skinVars.rawColors.*` (same tokens as RGB values, for use with `applyAlpha`)
 - **Palettes for skin authoring**: built-in palette exports such as `movistarNewPalette`, `o2NewPalette`,
-  `vivoNewPalette`, etc. Use these only when creating/extending a `Skin`, not for styling app components
+  `vivoPalette`, etc. Use these only when creating/extending a `Skin`, not for styling app components
   directly.
 - **Border radii**: `skinVars.borderRadii.*` (container, button, input, popup, chip, sheet, avatar, tag, etc.)
 - **Spacing**: `skinVars.spacing.*` (button, card, input, tag, feedback, hero, header, drawer padding tokens)
diff --git a/examples/css/index.html b/examples/css/index.html
index e09ef87ff8..535fcfee0b 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -17,7 +17,8 @@ <h1 class="mistica-text-title4">Mística CSS</h1>
                     <select id="skin-select">
                         <option value="movistar">movistar</option>
                         <option value="o2-new">o2-new</option>
-                        <option value="vivo-new">vivo-new</option>
+                        <option value="vivo">vivo</option>
+                        <option value="vivo-evolution">vivo-evolution</option>
                         <option value="blau">blau</option>
                         <option value="telefonica">telefonica</option>
                         <option value="tu">tu</option>
diff --git a/examples/css/style.css b/examples/css/style.css
index 5b4355be83..4bcfdf83ad 100644
--- a/examples/css/style.css
+++ b/examples/css/style.css
@@ -7,7 +7,8 @@
 /* Different skins */
 @import url('../../css/o2-new.css');
 @import url('../../css/blau.css');
-@import url('../../css/vivo-new.css');
+@import url('../../css/vivo.css');
+@import url('../../css/vivo-evolution.css');
 @import url('../../css/movistar.css');
 @import url('../../css/telefonica.css');
 @import url('../../css/tu.css');
diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js
index db4dc70114..7ebed52a5e 100644
--- a/packages/generate-design-tokens/index.js
+++ b/packages/generate-design-tokens/index.js
@@ -33,7 +33,7 @@ const KNOWN_SKINS = [
     'o2-new',
     'telefonica',
     'vivo',
-    'vivo-new',
+    'vivo-evolution',
     'tu',
     'esimflag',
 ];
diff --git a/packages/import-mistica-icons/index.js b/packages/import-mistica-icons/index.js
index e5ef4ea206..616d5768f5 100644
--- a/packages/import-mistica-icons/index.js
+++ b/packages/import-mistica-icons/index.js
@@ -161,7 +161,7 @@ const createIconComponentSource = async (name, componentName, svgIconsInfo) => {
         let result = '';
         for (let i = 0; i < availableIcons.length; i++) {
             const [skin, filename] = availableIcons[i];
-            // using a match because we want "vivo" to match with "Vivo" and "Vivo-new"
+            // using a match because we want "vivo" to match with "Vivo" and "Vivo-evolution"
             const ifStr = i < availableIcons.length - 1 ? `if (skinName.match(/^${skin}/i))` : '';
             const elseStr = i > 0 ? 'else' : '';
             result += `${elseStr} ${ifStr} {return ${getIconJsx(filename)}}`;
diff --git a/playroom/components/index.tsx b/playroom/components/index.tsx
index 156d3f2877..5c89a8149c 100644
--- a/playroom/components/index.tsx
+++ b/playroom/components/index.tsx
@@ -21,7 +21,7 @@ import {
     O2NewLogo,
     EsimflagLogo,
 } from '../../src';
-import {Movistar_New, Telefonica, Blau, Vivo_New, O2_New, Esimflag} from '../themes';
+import {Movistar_New, Telefonica, Blau, Vivo, Vivo_Evolution, O2_New, Esimflag} from '../themes';
 import {useOverrideTheme} from '../frame-component';
 import IconSun from '../icons/icon-sun';
 import IconMoon from '../icons/icon-moon';
@@ -39,7 +39,7 @@ export * from '../../src/community';
 export {default as Loader} from './loader';
 export {default as Animation} from './animation';
 
-type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo' | 'Movistar' | 'Tu'>;
+type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Movistar' | 'Tu'>;
 
 const BrandIcon = ({Logo}: {Logo: React.ComponentType<{size: number; color?: string}>}) => {
     const {isDarkMode} = useTheme();
@@ -58,9 +58,14 @@ const themesMap: {
         themeConfig: Movistar_New,
         Icon: () => <BrandIcon Logo={MovistarNewLogo} />,
     },
-    'Vivo-new': {
+    Vivo: {
         text: 'Vivo',
-        themeConfig: Vivo_New,
+        themeConfig: Vivo,
+        Icon: () => <BrandIcon Logo={VivoLogo} />,
+    },
+    'Vivo-evolution': {
+        text: 'Vivo Evolution',
+        themeConfig: Vivo_Evolution,
         Icon: () => <BrandIcon Logo={VivoLogo} />,
     },
     'O2-new': {
diff --git a/playroom/frame-component.tsx b/playroom/frame-component.tsx
index 88d098dd65..2376a0bc4e 100644
--- a/playroom/frame-component.tsx
+++ b/playroom/frame-component.tsx
@@ -11,7 +11,7 @@ import {
     useModalState,
     OverscrollColorProvider,
     skinVars,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     TELEFONICA_SKIN,
     O2_SKIN,
     O2_NEW_SKIN,
@@ -53,8 +53,8 @@ export const useOverrideTheme = (): OverrideTheme => React.useContext(ThemeOverr
  * The only OB that has shown interest in having their own lang is Vivo,
  */
 const skinToLang: Record<string, string> = {
-    [VIVO_NEW_SKIN]: 'pt-BR',
     [VIVO_SKIN]: 'pt-BR',
+    [VIVO_EVOLUTION_SKIN]: 'pt-BR',
     [BLAU_SKIN]: 'de-DE',
     [TELEFONICA_SKIN]: 'es-ES',
     [MOVISTAR_SKIN]: 'es-ES',
@@ -91,7 +91,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
     const styles = `
         body {background: ${skinVars.colors.background}}
 
-        ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
+        ${skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
         ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
         ${
             skinName === MOVISTAR_SKIN ||
diff --git a/playroom/themes.tsx b/playroom/themes.tsx
index 0017ad49ed..50afad0544 100644
--- a/playroom/themes.tsx
+++ b/playroom/themes.tsx
@@ -11,7 +11,8 @@ const common: Partial<ThemeConfig> = {
 } as const;
 
 export const Movistar_New: ThemeConfig = {...themes.Movistar_New, ...common};
-export const Vivo_New: ThemeConfig = {...themes.Vivo_New, ...common};
+export const Vivo: ThemeConfig = {...themes.Vivo, ...common};
+export const Vivo_Evolution: ThemeConfig = {...themes.Vivo_Evolution, ...common};
 export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
@@ -19,7 +20,8 @@ export const Esimflag: ThemeConfig = {...themes.Esimflag, ...common};
 export const Community_Cyber: ThemeConfig = {...themes.Cyber, ...common};
 
 export const Movistar_New_iOS: ThemeConfig = {...Movistar_New, platformOverrides: {platform: 'ios'}};
-export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
+export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}};
+export const Vivo_Evolution_iOS: ThemeConfig = {...Vivo_Evolution, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};
diff --git a/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-1-snap.png
index e4e36564a6..5d87ffac7b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-evolution-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-evolution-1-snap.png
new file mode 100644
index 0000000000..5d87ffac7b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-evolution-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-new-1-snap.png
deleted file mode 100644
index f8f26785b1..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-cover-footer-with-image-background-vivo-new-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-1-snap.png
similarity index 95%
rename from src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-1-snap.png
index a0ffc5dfc3..807a0e0685 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-2-snap.png
similarity index 91%
rename from src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-2-snap.png
index 7f80880dae..93af25a1da 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-1-snap.png
index b50ed3aebc..18ae13acab 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-evolution-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-evolution-1-snap.png
new file mode 100644
index 0000000000..18ae13acab
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-evolution-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-new-1-snap.png
deleted file mode 100644
index ad7867d709..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-default-skin-vivo-new-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-false-1-snap.png
index 480a3dff17..db13ed1229 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-true-1-snap.png
index df2d4d7df9..ad7617e966 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-true-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-true-disabled-false-1-snap.png
index 480a3dff17..db13ed1229 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-true-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-20-default-value-10-removable-true-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png
index c30f346250..2f0c5a2dbe 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png
index d7fecd4aa8..68fa852107 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png
index 468ba20f6c..590f362278 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-false-1-snap.png
index ac40c89225..d21cc05423 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-true-1-snap.png
index 476badf3c2..0fd61ec0fc 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-4-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-false-1-snap.png
index aaad46489e..25a3b27da6 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-true-1-snap.png
index 257320bb16..7324500298 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-true-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-true-disabled-false-1-snap.png
index f6b9792e30..080c228b90 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-true-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-1-max-1-default-value-1-removable-true-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png
index cde451ce9e..3730609d27 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png
index c5124485c2..cabfc50413 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png
index b2d955b367..3d0cbc3941 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-and-desktop-1-snap.png
index 3ae66d942c..493ff31577 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-and-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-and-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-and-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-and-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png
deleted file mode 100644
index 493ff31577..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-and-desktop-1-snap.png
index ae65a7770b..9c4c9bf2ca 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-and-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-and-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-and-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-and-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png
deleted file mode 100644
index 9c4c9bf2ca..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-and-desktop-1-snap.png
index d45fa3bc65..4401e90186 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-and-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-and-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-and-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-and-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png
deleted file mode 100644
index 4401e90186..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-skin-on-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-appears-properly-on-vivo-new-and-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-skin-on-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-skin-on-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-skin-on-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-2145678901-in-vivo-skin-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-2145678901-in-vivo-skin-1-snap.png
index ab94512581..150fe6362e 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-2145678901-in-vivo-skin-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-2145678901-in-vivo-skin-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-34654834455-in-vivo-skin-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-34654834455-in-vivo-skin-1-snap.png
index 82d849552a..8d804a7915 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-34654834455-in-vivo-skin-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-34654834455-in-vivo-skin-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-2145678901-in-vivo-skin-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-2145678901-in-vivo-skin-1-snap.png
index ab94512581..c6d55fd69c 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-2145678901-in-vivo-skin-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-2145678901-in-vivo-skin-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-34654834455-in-vivo-skin-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-34654834455-in-vivo-skin-1-snap.png
index 82d849552a..f1d9e0f2de 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-34654834455-in-vivo-skin-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-phone-number-field-lite-34654834455-in-vivo-skin-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-vivo-evolution-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-vivo-new-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-vivo-evolution-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-evolution-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-new-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-evolution-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-1-snap.png
new file mode 100644
index 0000000000..532b818f94
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-2-snap.png
new file mode 100644
index 0000000000..65654c6863
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-3-snap.png
new file mode 100644
index 0000000000..39bcb8ec29
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-4-snap.png
new file mode 100644
index 0000000000..c7d9818fb8
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-1-snap.png
new file mode 100644
index 0000000000..99e751ba49
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-2-snap.png
new file mode 100644
index 0000000000..62015783af
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-3-snap.png
new file mode 100644
index 0000000000..66e2d4aad6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-4-snap.png
new file mode 100644
index 0000000000..da20426901
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-alternative-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-1-snap.png
new file mode 100644
index 0000000000..bb5bd46168
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-2-snap.png
new file mode 100644
index 0000000000..bbbb83caa0
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-3-snap.png
new file mode 100644
index 0000000000..699321c9cc
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-4-snap.png
new file mode 100644
index 0000000000..ad02fca5de
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-dark-mode-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-1-snap.png
new file mode 100644
index 0000000000..c2c02bbf27
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-2-snap.png
new file mode 100644
index 0000000000..9aba592155
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-3-snap.png
new file mode 100644
index 0000000000..466272be1b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-4-snap.png
new file mode 100644
index 0000000000..533923ed39
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-1-snap.png
new file mode 100644
index 0000000000..52080943a2
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-2-snap.png
new file mode 100644
index 0000000000..4c5fd5fe0d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-3-snap.png
new file mode 100644
index 0000000000..9864381cc4
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-4-snap.png
new file mode 100644
index 0000000000..d5e62de0b5
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-inverse-and-dark-mode-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png
deleted file mode 100644
index f5a26e73bc..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png
deleted file mode 100644
index 005e2aeddc..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png
deleted file mode 100644
index 7cbe0c3f98..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png
deleted file mode 100644
index 7a1e9168b7..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png
deleted file mode 100644
index fbdc9d62ac..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png
deleted file mode 100644
index 358680f6c4..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png
deleted file mode 100644
index a5c1415686..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png
deleted file mode 100644
index b819b5f291..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png
deleted file mode 100644
index a72d58764b..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png
deleted file mode 100644
index c888099312..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png
deleted file mode 100644
index 3f5cdb7cec..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png
deleted file mode 100644
index 0c8a5dbcd1..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png
deleted file mode 100644
index 37fa7d0671..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png
deleted file mode 100644
index 4b8975794d..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png
deleted file mode 100644
index bc271417c3..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png
deleted file mode 100644
index 88d14bc625..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png
deleted file mode 100644
index 5758e074b2..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png
deleted file mode 100644
index bd67485dbe..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png
deleted file mode 100644
index ede6d7fdc3..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png
deleted file mode 100644
index 493fc58b75..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-new-and-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-and-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-new-and-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-and-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-and-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-new-and-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-on-vivo-and-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-skin-on-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-skin-on-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-skin-on-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-skin-on-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-with-vivo-new-skin-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-with-vivo-skin-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-with-vivo-new-skin-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-with-vivo-skin-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-with-vivo-new-skin-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-with-vivo-skin-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-with-vivo-new-skin-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-with-vivo-skin-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png
deleted file mode 100644
index cbe311dae1..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-skin-when-target-is-close-to-viewport-edges-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-skin-when-target-is-close-to-viewport-edges-1-snap.png
new file mode 100644
index 0000000000..f5cfb9b3cd
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-skin-when-target-is-close-to-viewport-edges-1-snap.png differ
diff --git a/src/__screenshot_tests__/button-screenshot-test.tsx b/src/__screenshot_tests__/button-screenshot-test.tsx
index 7415960ce6..78bf09f93b 100644
--- a/src/__screenshot_tests__/button-screenshot-test.tsx
+++ b/src/__screenshot_tests__/button-screenshot-test.tsx
@@ -151,7 +151,7 @@ test('Buttons - Link button - with chevron in Vivo', async () => {
     await openStoryPage({
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
-        skin: 'Vivo-new',
+        skin: 'Vivo',
         args: {
             chevron: true,
         },
@@ -184,7 +184,7 @@ test('Buttons - Link button with chevron and big font size in Vivo', async () =>
     await openStoryPage({
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
-        skin: 'Vivo-new',
+        skin: 'Vivo',
         args: {
             chevron: true,
         },
diff --git a/src/__screenshot_tests__/card-screenshot-test.tsx b/src/__screenshot_tests__/card-screenshot-test.tsx
index 0f49b62df3..de6f327e1e 100644
--- a/src/__screenshot_tests__/card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/card-screenshot-test.tsx
@@ -6,7 +6,7 @@ import {
     O2_SKIN,
     TELEFONICA_SKIN,
     TU_SKIN,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     VIVO_SKIN,
 } from '../skins/constants';
 import {openStoryPage, screen} from '../test-utils';
@@ -323,7 +323,7 @@ test.each`
     ${O2_SKIN}
     ${O2_NEW_SKIN}
     ${VIVO_SKIN}
-    ${VIVO_NEW_SKIN}
+    ${VIVO_EVOLUTION_SKIN}
     ${TELEFONICA_SKIN}
     ${BLAU_SKIN}
     ${TU_SKIN}
diff --git a/src/__screenshot_tests__/carousel-screenshot-test.tsx b/src/__screenshot_tests__/carousel-screenshot-test.tsx
index 79d81ca3f7..406330ce55 100644
--- a/src/__screenshot_tests__/carousel-screenshot-test.tsx
+++ b/src/__screenshot_tests__/carousel-screenshot-test.tsx
@@ -1,5 +1,5 @@
 import {openStoryPage, screen} from '../test-utils';
-import {VIVO_NEW_SKIN} from '../skins/constants';
+import {VIVO_SKIN} from '../skins/constants';
 
 import type {ElementHandle} from 'puppeteer';
 
@@ -75,11 +75,11 @@ test('Carousel mobile with controls and autoplay', async () => {
     expect(await page.screenshot()).toMatchImageSnapshot();
 });
 
-test('Carousel mobile in Vivo new', async () => {
+test('Carousel mobile in Vivo', async () => {
     const page = await openStoryPage({
         id: 'components-carousels-carousel--default',
         device: 'MOBILE_IOS',
-        skin: VIVO_NEW_SKIN,
+        skin: VIVO_SKIN,
     });
 
     expect(await page.screenshot()).toMatchImageSnapshot();
diff --git a/src/__screenshot_tests__/counter-screenshot-test.tsx b/src/__screenshot_tests__/counter-screenshot-test.tsx
index 549866dc2e..7c66d28d52 100644
--- a/src/__screenshot_tests__/counter-screenshot-test.tsx
+++ b/src/__screenshot_tests__/counter-screenshot-test.tsx
@@ -1,6 +1,6 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-evolution', 'Telefonica', 'Blau'] as const;
 
 test.each(SKINS)('Counter default. skin={%s}', async (skin) => {
     await openStoryPage({
@@ -66,7 +66,7 @@ test.each`
             id: 'components-counter--default',
             device: 'DESKTOP',
             args: {min, max, defaultValue, removable, disabled},
-            skin: 'Vivo-new',
+            skin: 'Vivo',
         });
 
         const counter = await screen.findByTestId('counter');
diff --git a/src/__screenshot_tests__/feedback-screenshot-test.tsx b/src/__screenshot_tests__/feedback-screenshot-test.tsx
index 064e223b55..362e1159fe 100644
--- a/src/__screenshot_tests__/feedback-screenshot-test.tsx
+++ b/src/__screenshot_tests__/feedback-screenshot-test.tsx
@@ -1,9 +1,9 @@
 import {openStoryPage, setRootFontSize} from '../test-utils';
-import {BLAU_SKIN, MOVISTAR_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {BLAU_SKIN, MOVISTAR_SKIN, O2_NEW_SKIN, VIVO_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, VIVO_NEW_SKIN, O2_NEW_SKIN, BLAU_SKIN] as const;
+const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_NEW_SKIN, BLAU_SKIN] as const;
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 const feedbackTypes = [
     'successfeedbackscreen--success',
@@ -87,11 +87,11 @@ test('Info feedback screen with custom icon', async () => {
 });
 
 test.each(testableDevices)(
-    'Success feedback screen appears properly with Vivo New skin on %s',
+    'Success feedback screen appears properly with Vivo skin on %s',
     async (device) => {
         const page = await openStoryPage({
             id: 'patterns-feedback-successfeedbackscreen--success',
-            skin: VIVO_NEW_SKIN,
+            skin: VIVO_SKIN,
             device,
         });
 
diff --git a/src/__screenshot_tests__/logo-screenshot-test.tsx b/src/__screenshot_tests__/logo-screenshot-test.tsx
index cf2ddb3508..eb9b493527 100644
--- a/src/__screenshot_tests__/logo-screenshot-test.tsx
+++ b/src/__screenshot_tests__/logo-screenshot-test.tsx
@@ -8,7 +8,7 @@ const SKINS: Array<KnownSkinName> = [
     'O2',
     'O2-new',
     'Vivo',
-    'Vivo-new',
+    'Vivo-evolution',
     'Telefonica',
     'Blau',
     'Esimflag',
@@ -20,7 +20,7 @@ const DARK_MODE_VALUES = [false, true];
 const getBrandLogoCases = () => {
     const cases = [];
     for (const skin of SKINS) {
-        if (skin !== 'Vivo-new') {
+        if (skin !== 'Vivo-evolution') {
             for (const type of LOGO_TYPES) {
                 for (const isInverse of INVERSE_VALUES) {
                     for (const isDarkMode of DARK_MODE_VALUES) {
diff --git a/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx b/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx
index 58ed0fd255..9df41a1abb 100644
--- a/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx
+++ b/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx
@@ -1,6 +1,6 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'O2-new', 'Tu', 'Esimflag'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'O2-new', 'Tu', 'Esimflag'] as const;
 
 test.each(SKINS)('Components in %s', async (skin) => {
     await openStoryPage({
diff --git a/src/__screenshot_tests__/private-text-preset-vars-screenshot-test.tsx b/src/__screenshot_tests__/private-text-preset-vars-screenshot-test.tsx
index 8538bca3dd..178e27fe01 100644
--- a/src/__screenshot_tests__/private-text-preset-vars-screenshot-test.tsx
+++ b/src/__screenshot_tests__/private-text-preset-vars-screenshot-test.tsx
@@ -1,6 +1,6 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'Vivo-new', 'O2-new'] as const;
+const SKINS = ['Movistar', 'Vivo', 'O2-new'] as const;
 const DEVICES = ['MOBILE_IOS', 'DESKTOP'] as const;
 
 const getCases = () => {
diff --git a/src/__screenshot_tests__/success-feedback-screenshot-test.tsx b/src/__screenshot_tests__/success-feedback-screenshot-test.tsx
index aff47e30c3..9dc0154e1d 100644
--- a/src/__screenshot_tests__/success-feedback-screenshot-test.tsx
+++ b/src/__screenshot_tests__/success-feedback-screenshot-test.tsx
@@ -1,9 +1,9 @@
 import {openStoryPage} from '../test-utils';
-import {MOVISTAR_SKIN, VIVO_NEW_SKIN, BLAU_SKIN, O2_NEW_SKIN} from '../skins/constants';
+import {MOVISTAR_SKIN, VIVO_SKIN, BLAU_SKIN, O2_NEW_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, VIVO_NEW_SKIN, O2_NEW_SKIN, BLAU_SKIN];
+const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_NEW_SKIN, BLAU_SKIN];
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 
 const cases: Array<[string, Device]> = [];
@@ -39,11 +39,11 @@ test.each(testableDevices)(
 );
 
 test.each(testableDevices)(
-    'Success Feedback component appears properly with Vivo New skin on %s',
+    'Success Feedback component appears properly with Vivo skin on %s',
     async (device) => {
         const page = await openStoryPage({
             id: `patterns-feedback-successfeedback--success`,
-            skin: VIVO_NEW_SKIN,
+            skin: VIVO_SKIN,
             device,
         });
 
diff --git a/src/__screenshot_tests__/text-screenshot-test.tsx b/src/__screenshot_tests__/text-screenshot-test.tsx
index 8d190184a4..bae52f1db2 100644
--- a/src/__screenshot_tests__/text-screenshot-test.tsx
+++ b/src/__screenshot_tests__/text-screenshot-test.tsx
@@ -3,7 +3,7 @@ import {openStoryPage, screen} from '../test-utils';
 import type {Device} from '../test-utils';
 
 const TESTABLE_DEVICES: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
-const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'O2-new', 'Tu', 'Esimflag'] as const;
+const SKINS = ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'O2-new', 'Tu', 'Esimflag'] as const;
 
 test.each(TESTABLE_DEVICES.flatMap((device) => SKINS.map((skin) => ({device, skin}))))(
     'Text in $device with $skin skin',
diff --git a/src/__screenshot_tests__/tooltip-screenshot-test.tsx b/src/__screenshot_tests__/tooltip-screenshot-test.tsx
index 52c86ed934..9b96389e7f 100644
--- a/src/__screenshot_tests__/tooltip-screenshot-test.tsx
+++ b/src/__screenshot_tests__/tooltip-screenshot-test.tsx
@@ -1,4 +1,4 @@
-import {VIVO_NEW_SKIN} from '../skins/constants';
+import {VIVO_SKIN} from '../skins/constants';
 import {openStoryPage, screen} from '../test-utils';
 
 const TARGET_HORIZONTAL_POSITIONS = ['left', 'center', 'right'];
@@ -148,11 +148,11 @@ test('Tooltip - with targetStyle', async () => {
  * when using Vivo_new skin, the tooltip border radius is bigger than in other skins, so it's useful
  * to check that the tooltip's arrow is displayed properly in this scenario.
  */
-test('Tooltip - arrow appears properly in Vivo_New skin when target is close to viewport edges', async () => {
+test('Tooltip - arrow appears properly in Vivo skin when target is close to viewport edges', async () => {
     const page = await openStoryPage({
         id: 'components-tooltip--default',
         args: {targetHorizontalPosition: 'left', targetVerticalPosition: 'top'},
-        skin: VIVO_NEW_SKIN,
+        skin: VIVO_SKIN,
     });
 
     await page.click(await screen.findByTestId('target'));
diff --git a/src/__tests__/text-test.tsx b/src/__tests__/text-test.tsx
index 35aa74046b..b19e1cce4c 100644
--- a/src/__tests__/text-test.tsx
+++ b/src/__tests__/text-test.tsx
@@ -3,7 +3,7 @@ import {render, screen} from '@testing-library/react';
 import {Text} from '../text';
 import {makeTheme} from './test-utils';
 import ThemeContextProvider from '../theme-context-provider';
-import {getVivoNewSkin} from '../skins/vivo-new';
+import {getVivoSkin} from '../skins/vivo';
 import {getMovistarSkin} from '../skins/movistar';
 
 test.each([
@@ -13,7 +13,7 @@ test.each([
     {text: 'Ħ hola Ħ', expected: 'Vivo hola Vivo'},
 ])('Text makes vivinho char readable for screen readers: $text', ({text, expected}) => {
     render(
-        <ThemeContextProvider theme={makeTheme({skin: getVivoNewSkin()})}>
+        <ThemeContextProvider theme={makeTheme({skin: getVivoSkin()})}>
             <a href="/">
                 <Text>{text}</Text>
             </a>
@@ -28,7 +28,7 @@ test('vivinho char replacement works in Texts with multiple children', () => {
     const someVar = 'something';
     const vivinhoVar = 'Ħ';
     render(
-        <ThemeContextProvider theme={makeTheme({skin: getVivoNewSkin()})}>
+        <ThemeContextProvider theme={makeTheme({skin: getVivoSkin()})}>
             <a href="/">
                 <Text>
                     Ħ {someVar} {vivinhoVar}
@@ -40,7 +40,7 @@ test('vivinho char replacement works in Texts with multiple children', () => {
     expect(screen.getByRole('link', {name: 'Vivo something Vivo'})).toBeInTheDocument();
 });
 
-test('vivinho char is only replaced in vivo-new skin', () => {
+test('vivinho char is only replaced in vivo skin', () => {
     render(
         <ThemeContextProvider theme={makeTheme({skin: getMovistarSkin()})}>
             <a href="/">
diff --git a/src/button.tsx b/src/button.tsx
index 7f6c6b5fb9..e4fda3157f 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -5,7 +5,7 @@ import Box from './box';
 import * as styles from './button.css';
 import {useForm} from './form-context';
 import {useTheme} from './hooks';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import {flattenChildren} from './skins/utils';
 import Spinner from './spinner';
 import {Text, Text3} from './text';
@@ -112,8 +112,8 @@ const renderButtonElement = ({
 const ButtonLinkChevron = () => {
     const {skinName} = useTheme();
 
-    // vivo new skin has a different chevron
-    if (skinName === VIVO_NEW_SKIN) {
+    // vivo skin has a different chevron
+    if (skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN) {
         return (
             <svg width="0.5em" height="0.5em" viewBox="0 0 8 8" fill="none">
                 <path
diff --git a/src/carousel.tsx b/src/carousel.tsx
index 8691bc6747..6d34730a10 100644
--- a/src/carousel.tsx
+++ b/src/carousel.tsx
@@ -12,7 +12,7 @@ import {useDocumentVisibility} from './utils/document-visibility';
 import * as styles from './carousel.css';
 import * as mediaStyles from './image.css';
 import {useDesktopContainerType} from './desktop-container-type-context';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import {applyCssVars} from './utils/css';
 import {ResetResponsiveLayout} from './responsive-layout';
 import {InternalIconButton, ToggleIconButton} from './icon-button';
@@ -789,7 +789,7 @@ const BaseCarousel = ({
     }
 
     const largePageOffset = '64px';
-    const vivoNewMobilePageOffset = '36px';
+    const vivoMobilePageOffset = '36px';
 
     const bulletsContainer = (
         <div
@@ -883,8 +883,8 @@ const BaseCarousel = ({
                             [styles.vars.itemsPerPageMobile]: String(itemsPerPageConfig.mobile),
                             ...(mobilePageOffset === 'large'
                                 ? {[styles.vars.mobilePageOffset]: largePageOffset}
-                                : skinName === VIVO_NEW_SKIN
-                                  ? {[styles.vars.mobilePageOffset]: vivoNewMobilePageOffset}
+                                : skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN
+                                  ? {[styles.vars.mobilePageOffset]: vivoMobilePageOffset}
                                   : {}),
                             ...(gap !== undefined ? {[styles.vars.gap]: String(gap)} : {}),
                         }),
diff --git a/src/feedback.tsx b/src/feedback.tsx
index 1beb76a34c..e8c7b8f144 100644
--- a/src/feedback.tsx
+++ b/src/feedback.tsx
@@ -2,10 +2,9 @@
 import * as React from 'react';
 import {useTheme, useScreenSize} from './hooks';
 import ButtonFixedFooterLayout from './button-fixed-footer-layout';
-import {VIVO_NEW_SKIN, VIVO_SKIN} from './skins/constants';
+import {VIVO_EVOLUTION_SKIN, VIVO_SKIN} from './skins/constants';
 import {useSetOverscrollColor} from './overscroll-color-context';
 import IconSuccess from './icons/icon-success';
-import IconSuccessVivo from './icons/icon-success-vivo';
 import IconError from './icons/icon-error';
 import IconInfo from './icons/icon-info';
 import {
@@ -305,9 +304,7 @@ export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackP
             }
             hapticFeedback="success"
             asset={
-                skinName === VIVO_SKIN ? (
-                    <IconSuccessVivo size="100%" />
-                ) : skinName === VIVO_NEW_SKIN ? (
+                skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? (
                     <IconSuccessVivoNew size="100%" />
                 ) : (
                     <IconSuccess size="100%" />
@@ -396,9 +393,7 @@ export const SuccessFeedback = ({
     const {skinName, platformOverrides, themeVariants} = useTheme();
 
     const asset =
-        skinName === VIVO_SKIN ? (
-            <IconSuccessVivo size="100%" />
-        ) : skinName === VIVO_NEW_SKIN ? (
+        skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? (
             <IconSuccessVivoNew size="100%" />
         ) : (
             <IconSuccess size="100%" />
diff --git a/src/icons/icon-error.tsx b/src/icons/icon-error.tsx
index b0fa3560f6..d784925fa9 100644
--- a/src/icons/icon-error.tsx
+++ b/src/icons/icon-error.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import {getAnimateDrawLineProps, getAnimateFadeInProps} from '../utils/animation';
 import {useTheme} from '../hooks';
-import {O2_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {O2_SKIN, O2_NEW_SKIN, VIVO_SKIN, VIVO_EVOLUTION_SKIN} from '../skins/constants';
 import {vars} from '../skins/skin-contract.css';
 import * as styles from './icon-error.css';
 
@@ -197,7 +197,8 @@ const IconError = (props: Props): JSX.Element => {
             return <IconErrorO2 {...props} />;
         case O2_NEW_SKIN:
             return <IconErrorO2New {...props} />;
-        case VIVO_NEW_SKIN:
+        case VIVO_SKIN:
+        case VIVO_EVOLUTION_SKIN:
             return <IconErrorVivo {...props} />;
         default:
             return <IconErrorDefault {...props} />;
diff --git a/src/icons/icon-info.tsx b/src/icons/icon-info.tsx
index 9482dffa01..71b9c334d3 100644
--- a/src/icons/icon-info.tsx
+++ b/src/icons/icon-info.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import {useTheme} from '../hooks';
-import {O2_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {O2_SKIN, O2_NEW_SKIN, VIVO_SKIN, VIVO_EVOLUTION_SKIN} from '../skins/constants';
 import {vars} from '../skins/skin-contract.css';
 
 type Props = {
@@ -76,7 +76,8 @@ const IconInfo = (props: Props): JSX.Element => {
             return <IconInfoO2 {...props} />;
         case O2_NEW_SKIN:
             return <IconInfoO2New {...props} />;
-        case VIVO_NEW_SKIN:
+        case VIVO_SKIN:
+        case VIVO_EVOLUTION_SKIN:
             return <IconInfoVivo {...props} />;
         default:
             return <IconInfoDefault {...props} />;
diff --git a/src/icons/icon-success.tsx b/src/icons/icon-success.tsx
index 133d770839..3d55f06a0c 100644
--- a/src/icons/icon-success.tsx
+++ b/src/icons/icon-success.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import {O2_SKIN, O2_NEW_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
+import {O2_SKIN, O2_NEW_SKIN, VIVO_SKIN, VIVO_EVOLUTION_SKIN} from '../skins/constants';
 import {
     getAnimateDrawLineProps,
     getAnimateFadeInProps,
@@ -201,7 +201,8 @@ const IconSuccess = ({size, color, skipAnimation}: Props): JSX.Element => {
             return <IconSuccessO2 size={size} color={color} skipAnimation={skipAnimation} />;
         case O2_NEW_SKIN:
             return <IconSuccessO2New size={size} color={color} skipAnimation={skipAnimation} />;
-        case VIVO_NEW_SKIN:
+        case VIVO_SKIN:
+        case VIVO_EVOLUTION_SKIN:
             return <IconSuccessVivo size={size} color={color} skipAnimation={skipAnimation} />;
         default:
             return <IconSuccessDefault size={size} color={color} skipAnimation={skipAnimation} />;
diff --git a/src/image.tsx b/src/image.tsx
index bd931d4d9f..67fea195fb 100644
--- a/src/image.tsx
+++ b/src/image.tsx
@@ -6,7 +6,7 @@ import {AspectRatioContainer} from './utils/aspect-ratio-support';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {useThemeVariant} from './theme-variant-context';
 import {useTheme} from './hooks';
-import {VIVO_SKIN, VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import * as styles from './image.css';
 import {vars} from './skins/skin-contract.css';
 import {combineRefs} from './utils/common';
@@ -17,22 +17,6 @@ import {isRunningAcceptanceTest} from './utils/platform';
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes} from './utils/types';
 
-type VivoLogoProps = {
-    style?: React.CSSProperties;
-};
-
-const VivoLogo = ({style}: VivoLogoProps) => {
-    return (
-        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style={style}>
-            <path
-                d="M24.021 35.7235C24.8145 35.7694 25.0467 36.1913 25.3157 36.5138C25.586 36.8362 29.515 41.551 29.7823 41.8569C30.0475 42.1662 30.7822 42.7329 31.5901 42.8405C32.3967 42.9473 33.282 42.7842 33.8484 42.3748C34.4135 41.965 35.1313 41.4073 35.3833 41.0356C35.6337 40.6638 36.061 40.1302 35.9823 39.2534C35.9028 38.3783 35.7112 37.9204 35.0268 37.1691C34.3433 36.4185 30.2992 31.6657 29.5382 30.7537C29.5382 30.7537 28.8467 29.9423 28.9469 28.7956C29.0476 27.6468 29.567 27.1343 30.6608 26.8487C31.7534 26.5647 36.0267 25.5306 36.0267 25.5306C36.0267 25.5306 38.4728 24.3723 37.9182 22.0776L37.5997 20.904C37.5997 20.904 37.0672 18.2264 33.5519 19.0556C30.0344 19.8869 28.0803 20.377 28.0803 20.377C28.0803 20.377 26.9602 20.4838 26.7999 19.744C26.6417 19.0038 26.8494 18.6218 27.3443 18.4156C27.8387 18.209 30.9611 16.7175 31.3617 12.6853C31.7652 8.65158 28.3882 5.06573 24.0091 5.08104C19.6288 5.0976 16.4594 8.39988 16.4725 11.8185C16.4856 15.2387 18.7033 17.5144 20.4079 18.3638C21.3752 18.8453 21.0656 19.7122 21.0656 19.7122C21.0656 19.7122 20.8334 20.5554 19.8153 20.3311C18.7972 20.1025 13.8657 18.9736 13.8657 18.9736C13.8657 18.9736 10.8914 18.4226 10.1732 21.359C9.4541 24.2978 11.1261 25.4143 12.3532 25.6908C13.5798 25.9669 17.7296 26.9716 17.7296 26.9716C17.7296 26.9716 18.9643 27.581 19.0125 28.8308C19.0425 29.5697 19.0438 30.1824 18.266 31.2832C17.4894 32.3835 12.6598 38.0148 12.6598 38.0148C12.6598 38.0148 10.9997 39.9862 13.4051 41.763C15.8106 43.5401 17.1641 43.1262 18.5921 41.4889C20.0188 39.852 22.8383 36.4243 22.8383 36.4243C22.8383 36.4243 23.2275 35.6788 24.021 35.7235Z"
-                stroke={vars.colors.brand}
-                strokeWidth="2"
-            />
-        </svg>
-    );
-};
-
 type ImageErrorProps = {
     withIcon?: boolean;
     borderRadius?: string | number;
@@ -75,9 +59,7 @@ export const ImageError = React.forwardRef<HTMLDivElement, ImageErrorProps>(
                 className={className}
             >
                 {withIcon ? (
-                    skinName === VIVO_SKIN ? (
-                        <VivoLogo style={{width: '10%', minWidth: 24, maxWidth: 48}} />
-                    ) : skinName === VIVO_NEW_SKIN ? (
+                    skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? (
                         <svg
                             viewBox="0 0 24 24"
                             role="presentation"
diff --git a/src/index.tsx b/src/index.tsx
index ecd130f346..f62c135cd0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -228,7 +228,7 @@ export {
 export type {Skin, KnownSkinName, SkinName} from './skins/types';
 export {
     VIVO_SKIN,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     O2_SKIN,
     O2_NEW_SKIN,
     MOVISTAR_SKIN,
@@ -240,7 +240,7 @@ export {
 } from './skins/constants';
 export {getSkinByName} from './skins/utils';
 export {getVivoSkin} from './skins/vivo';
-export {getVivoNewSkin} from './skins/vivo-new';
+export {getVivoEvolutionSkin} from './skins/vivo-evolution';
 export {getMovistarSkin} from './skins/movistar';
 export {getMovistarNewSkin} from './skins/movistar-new';
 export {getO2Skin} from './skins/o2';
@@ -250,7 +250,7 @@ export {getBlauSkin} from './skins/blau';
 export {getTuSkin} from './skins/tu';
 export {getEsimflagSkin} from './skins/esimflag';
 export {palette as vivoPalette} from './skins/vivo';
-export {palette as vivoNewPalette} from './skins/vivo-new';
+export {palette as vivoEvolutionPalette} from './skins/vivo-evolution';
 export {palette as movistarPalette} from './skins/movistar';
 export {palette as movistarNewPalette} from './skins/movistar-new';
 export {palette as o2Palette} from './skins/o2';
diff --git a/src/loading-screen.tsx b/src/loading-screen.tsx
index c25d2e2af3..1d0485504a 100644
--- a/src/loading-screen.tsx
+++ b/src/loading-screen.tsx
@@ -12,7 +12,7 @@ import classnames from 'classnames';
 import {Logo} from './logo';
 import ScreenReaderOnly from './screen-reader-only';
 import {useTheme} from './hooks';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as tokens from './text-tokens';
 
@@ -305,7 +305,7 @@ const VivinhoLoadingAnimation = React.lazy(() => import('./vivinho-loading-anima
 const BrandLoadingAnimation = ({isLoading, onCloseStart, onCloseEnd}: BrandLoadingAnimationProps) => {
     const {skinName} = useTheme();
 
-    if (skinName === VIVO_NEW_SKIN) {
+    if (skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN) {
         return (
             <React.Suspense fallback={null}>
                 <VivinhoLoadingAnimation
diff --git a/src/logo.tsx b/src/logo.tsx
index b1a33f8e5e..92d0a90983 100644
--- a/src/logo.tsx
+++ b/src/logo.tsx
@@ -132,7 +132,7 @@ const LogoBase = ({size, skinName, type = 'isotype', color}: LogoBaseProps): JSX
                 </MovistarNewLogoShell>
             );
         case 'Vivo':
-        case 'Vivo-new':
+        case 'Vivo-evolution':
             return (
                 <VivoLogoShell size={size} type={type}>
                     <React.Suspense>
diff --git a/src/skins/constants.tsx b/src/skins/constants.tsx
index ccf9ba2f79..c61b2df383 100644
--- a/src/skins/constants.tsx
+++ b/src/skins/constants.tsx
@@ -3,7 +3,7 @@ export const MOVISTAR_NEW_SKIN = 'Movistar-new';
 export const O2_SKIN = 'O2';
 export const O2_NEW_SKIN = 'O2-new';
 export const VIVO_SKIN = 'Vivo';
-export const VIVO_NEW_SKIN = 'Vivo-new';
+export const VIVO_EVOLUTION_SKIN = 'Vivo-evolution';
 export const TELEFONICA_SKIN = 'Telefonica';
 export const BLAU_SKIN = 'Blau';
 export const TU_SKIN = 'Tu';
diff --git a/src/skins/types/index.tsx b/src/skins/types/index.tsx
index 6a65a370c2..7b6b71ed32 100644
--- a/src/skins/types/index.tsx
+++ b/src/skins/types/index.tsx
@@ -11,7 +11,7 @@ export type KnownSkinName =
     | 'O2'
     | 'O2-new'
     | 'Vivo'
-    | 'Vivo-new'
+    | 'Vivo-evolution'
     | 'Telefonica'
     | 'Blau'
     | 'Tu'
diff --git a/src/skins/utils.tsx b/src/skins/utils.tsx
index 3e4c32dd2a..bc2d2d398e 100644
--- a/src/skins/utils.tsx
+++ b/src/skins/utils.tsx
@@ -7,14 +7,14 @@ import {
     O2_NEW_SKIN,
     MOVISTAR_SKIN,
     MOVISTAR_NEW_SKIN,
-    VIVO_NEW_SKIN,
+    VIVO_EVOLUTION_SKIN,
     TU_SKIN,
     ESIMFLAG_SKIN,
 } from './constants';
 import {getBlauSkin} from './blau';
 import {getTelefonicaSkin} from './telefonica';
 import {getVivoSkin} from './vivo';
-import {getVivoNewSkin} from './vivo-new';
+import {getVivoEvolutionSkin} from './vivo-evolution';
 import {getO2Skin} from './o2';
 import {getO2NewSkin} from './o2-new';
 import {getMovistarSkin} from './movistar';
@@ -32,8 +32,8 @@ export const getSkinByName = (name: KnownSkinName, variant?: SkinVariant): Known
             return getTelefonicaSkin(variant);
         case VIVO_SKIN:
             return getVivoSkin(variant);
-        case VIVO_NEW_SKIN:
-            return getVivoNewSkin(variant);
+        case VIVO_EVOLUTION_SKIN:
+            return getVivoEvolutionSkin(variant);
         case O2_SKIN:
             return getO2Skin(variant);
         case O2_NEW_SKIN:
diff --git a/src/skins/vivo-new.tsx b/src/skins/vivo-evolution.tsx
similarity index 99%
rename from src/skins/vivo-new.tsx
rename to src/skins/vivo-evolution.tsx
index d696e1a296..9075754e47 100644
--- a/src/skins/vivo-new.tsx
+++ b/src/skins/vivo-evolution.tsx
@@ -1,4 +1,4 @@
-import {VIVO_NEW_SKIN} from './constants';
+import {VIVO_EVOLUTION_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
 import type {GetKnownSkin, KnownSkin} from './types';
@@ -42,9 +42,9 @@ export const palette = {
     darkModeGrey6: '#313235',
 };
 
-export const getVivoNewSkin: GetKnownSkin = () => {
+export const getVivoEvolutionSkin: GetKnownSkin = () => {
     const skin: KnownSkin = {
-        name: VIVO_NEW_SKIN,
+        name: VIVO_EVOLUTION_SKIN,
         colors: {
             background: palette.white,
             backgroundAlternative: palette.grey1,
diff --git a/src/skins/vivo.tsx b/src/skins/vivo.tsx
index f6b514a75d..63eb96cf11 100644
--- a/src/skins/vivo.tsx
+++ b/src/skins/vivo.tsx
@@ -32,12 +32,13 @@ export const palette = {
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
-    grey4: '#999999',
+    grey4: '#8A8C90',
     grey5: '#666666',
     grey6: '#000000',
     white: '#FFFFFF',
     darkModeBlack: '#191919',
     darkModeGrey: '#242424',
+    darkModeGrey5: '#6D7D88',
     darkModeGrey6: '#313235',
 };
 
@@ -49,7 +50,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundAlternative: palette.grey1,
             backgroundBrand: palette.vivoPurple,
             backgroundNegative: palette.vivoPurpleDark,
-            backgroundBrandSecondary: palette.vivoPurple,
+            backgroundBrandSecondary: palette.vivoPurpleLight80,
             backgroundContainer: palette.white,
             backgroundContainerError: palette.pepperLight10,
             backgroundContainerHover: applyAlpha(palette.darkModeBlack, 0.05),
@@ -62,7 +63,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundContainerBrandOverBrand: palette.vivoPurpleDark,
             backgroundContainerAlternative: palette.grey1,
             backgroundOverlay: applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey2,
+            backgroundSkeleton: palette.grey3,
             backgroundSkeletonInverse: palette.vivoPurpleDark,
             backgroundSkeletonNegative: applyAlpha(palette.grey6, 0.2),
             backgroundSkeletonBrand: palette.vivoPurpleDark,
@@ -70,14 +71,14 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundBrandBottom: palette.vivoPurple,
             appBarBackground: palette.white,
             navigationBarBackground: palette.vivoPurple,
-            backgroundDropZoneHover: applyAlpha(palette.vivoPurpleDark, 0.07),
-            backgroundDropZoneDragover: applyAlpha(palette.vivoPurpleDark, 0.12),
-            backgroundDropZoneBrandHover: applyAlpha(palette.vivoPurpleDark, 0.2),
-            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoPurpleDark, 0.4),
+            backgroundDropZoneHover: applyAlpha(palette.vivoPurple, 0.06),
+            backgroundDropZoneDragover: palette.vivoPurpleLight10,
+            backgroundDropZoneBrandHover: applyAlpha(palette.vivoPurpleDark, 0.3),
+            backgroundDropZoneBrandDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
             backgroundDropZoneNegativeHover: applyAlpha(palette.white, 0.1),
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
-            backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.2),
-            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.4),
+            backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.3),
+            backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -108,15 +109,15 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonPrimaryBackgroundBrand: palette.white,
             buttonPrimaryBackgroundMedia: palette.white,
             buttonPrimaryBackgroundHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInverseHover: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundBrandHover: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundInverseHover: palette.vivoPurpleLight10,
+            buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleLight10,
+            buttonPrimaryBackgroundBrandHover: palette.vivoPurpleLight10,
+            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight10,
             buttonPrimaryBackgroundPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundInversePressed: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleLight50,
-            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundInversePressed: palette.vivoPurpleLight20,
+            buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleLight20,
+            buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleLight20,
+            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight20,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
             buttonSecondaryBorder: palette.vivoPurple,
             buttonSecondaryBorderInverse: palette.white,
@@ -164,10 +165,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkMedia: palette.white,
             textLinkDanger: palette.pepper,
             textLinkDangerMedia: palette.pepper,
-            textLinkSnackbar: palette.vivoPurpleLight50,
+            textLinkSnackbar: palette.vivoPurpleLight20,
             textActivated: palette.vivoPurple,
             textBrand: palette.vivoPurple,
-            inputBorder: palette.grey3,
+            inputBorder: palette.grey4,
             inputBorderInverse: palette.white,
             inputBorderNegative: palette.white,
             inputBorderBrand: palette.white,
@@ -175,7 +176,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             completedStepInverse: palette.vivoPurpleDark,
             completedStepNegative: palette.vivoPurpleDark,
             completedStepBrand: palette.vivoPurpleDark,
-            control: palette.grey3,
+            control: palette.grey4,
             controlActivated: palette.vivoPurple,
             controlInverse: palette.vivoPurpleLight50,
             controlNegative: palette.vivoPurpleLight50,
@@ -189,8 +190,8 @@ export const getVivoSkin: GetKnownSkin = () => {
             barTrackInverse: applyAlpha(palette.white, 0.5),
             barTrackNegative: applyAlpha(palette.white, 0.5),
             barTrackBrand: applyAlpha(palette.white, 0.5),
-            loadingBar: palette.pink,
-            loadingBarBackground: palette.pepperLight30,
+            loadingBar: palette.vivoPurple,
+            loadingBarBackground: palette.vivoPurpleLight10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             toggleAndroidActiveBrand: palette.white,
@@ -201,14 +202,14 @@ export const getVivoSkin: GetKnownSkin = () => {
             controlKnobInverse: palette.vivoPurple,
             controlKnobNegative: palette.vivoPurple,
             controlKnobBrand: palette.vivoPurple,
-            divider: palette.grey2,
+            divider: palette.grey3,
             dividerInverse: applyAlpha(palette.white, 0.2),
             dividerNegative: applyAlpha(palette.white, 0.2),
             dividerBrand: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.vivoPurple,
             badge: palette.pepperDark,
             feedbackErrorBackground: palette.pepper,
-            feedbackInfoBackground: palette.grey6,
+            feedbackInfoBackground: palette.vivoPurpleDark,
             brand: palette.vivoPurple,
             brandHigh: palette.vivoPurpleDark,
             inverse: palette.white,
@@ -266,11 +267,11 @@ export const getVivoSkin: GetKnownSkin = () => {
             textNavigationBarSecondary: palette.vivoPurpleLight50,
             textNavigationSearchBarHint: palette.vivoPurpleLight50,
             textNavigationSearchBarText: palette.white,
-            textAppBar: palette.grey4,
+            textAppBar: palette.grey5,
             textAppBarSelected: palette.vivoPurple,
             iosGlassAppBar: palette.grey6,
             iosGlassAppBarSelected: palette.vivoPurple,
-            customTabsBackground: palette.vivoPurple,
+            customTabsBackground: palette.white,
             tagTextPromo: palette.vivoPurple,
             tagTextActive: palette.vivoPurple,
             tagTextInactive: palette.grey5,
@@ -279,7 +280,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             tagTextWarning: palette.orangeDark,
             tagTextError: palette.pepperDark80,
             tagBackgroundPromo: palette.vivoPurpleLight10,
-            tagBackgroundActive: palette.vivoPurpleLight10,
+            tagBackgroundActive: palette.grey1,
             tagBackgroundInactive: palette.grey1,
             tagBackgroundInfo: palette.vivoPurpleLight10,
             tagBackgroundSuccess: palette.vivoGreenLight10,
@@ -397,12 +398,12 @@ export const getVivoSkin: GetKnownSkin = () => {
             buttonPrimaryBackgroundInverseHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundNegativeHover: palette.vivoPurpleDark,
             buttonPrimaryBackgroundBrandHover: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaHover: palette.vivoPurpleLight10,
             buttonPrimaryBackgroundPressed: palette.vivoPurpleDark,
             buttonPrimaryBackgroundInversePressed: palette.vivoPurpleDark,
             buttonPrimaryBackgroundNegativePressed: palette.vivoPurpleDark,
             buttonPrimaryBackgroundBrandPressed: palette.vivoPurpleDark,
-            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight50,
+            buttonPrimaryBackgroundMediaPressed: palette.vivoPurpleLight20,
             buttonSecondaryBackgroundBrand: applyAlpha(palette.white, 0),
             buttonSecondaryBorder: palette.white,
             buttonSecondaryBorderInverse: palette.white,
@@ -453,10 +454,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textLinkSnackbar: palette.vivoPurpleLight50,
             textActivated: palette.vivoPurpleLight80,
             textBrand: palette.vivoPurpleLight80,
-            inputBorder: palette.darkModeGrey6,
-            inputBorderInverse: palette.darkModeGrey6,
-            inputBorderNegative: palette.darkModeGrey6,
-            inputBorderBrand: palette.darkModeGrey6,
+            inputBorder: palette.darkModeGrey5,
+            inputBorderInverse: palette.darkModeGrey5,
+            inputBorderNegative: palette.darkModeGrey5,
+            inputBorderBrand: palette.darkModeGrey5,
             completedStep: palette.vivoPurpleLight80,
             completedStepInverse: palette.vivoPurpleLight80,
             completedStepNegative: palette.vivoPurpleLight80,
@@ -513,10 +514,10 @@ export const getVivoSkin: GetKnownSkin = () => {
             textPrimaryNegative: palette.grey2,
             textPrimaryBrand: palette.grey2,
             textPrimaryMedia: palette.white,
-            textSecondary: palette.grey4,
-            textSecondaryInverse: palette.grey4,
-            textSecondaryNegative: palette.grey4,
-            textSecondaryBrand: palette.grey4,
+            textSecondary: palette.grey3,
+            textSecondaryInverse: palette.grey3,
+            textSecondaryNegative: palette.grey3,
+            textSecondaryBrand: palette.grey3,
             textSecondaryMedia: palette.white,
             success: palette.vivoGreen,
             warning: palette.orange,
@@ -619,17 +620,17 @@ export const getVivoSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '4px',
-            checkbox: '2px',
-            container: '8px',
+            button: '32px',
+            checkbox: '4px',
+            container: '24px',
             indicator: '24px',
             chip: '24px',
-            tag: '24px',
-            input: '8px',
-            legacyDisplay: '16px',
-            popup: '8px',
-            sheet: '8px',
-            mediaSmall: '8px',
+            tag: '10px',
+            input: '16px',
+            legacyDisplay: '24px',
+            popup: '16px',
+            sheet: '24px',
+            mediaSmall: '12px',
         },
         textPresets: {
             button: {weight: 'medium'},
@@ -639,8 +640,8 @@ export const getVivoSkin: GetKnownSkin = () => {
             cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
-            cardTitle: {weight: 'regular'},
-            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            cardTitle: {weight: 'medium'},
+            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
                 lineHeight: {desktop: 24, mobile: 20},
@@ -650,40 +651,64 @@ export const getVivoSkin: GetKnownSkin = () => {
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 size: {desktop: 28, mobile: 20},
-                weight: 'light',
+                weight: 'medium',
             },
             indicator: {weight: 'medium'},
             inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             inputValue: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
             link: {weight: 'medium'},
-            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            navigationBar: {weight: 'medium'},
+            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
+            navigationBar: {weight: 'regular'},
             rowTitle: {weight: 'regular'},
             stepperStepLabel: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             tabsLabel: {
                 lineHeight: {desktop: 24, mobile: 24},
-                size: {desktop: 18, mobile: 16},
+                size: {desktop: 18, mobile: 18},
                 weight: 'medium',
             },
             text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
             text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
-            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
-            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
-            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
-            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
-            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
-            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 24, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'medium'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'medium'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'medium'},
+            text8: {
+                lineHeight: {desktop: 56, mobile: 40},
+                size: {desktop: 48, mobile: 32},
+                weight: 'regular',
+            },
+            text9: {
+                lineHeight: {desktop: 64, mobile: 48},
+                size: {desktop: 56, mobile: 40},
+                weight: 'regular',
+            },
+            text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
+                weight: 'regular',
+            },
             title1: {
                 lineHeight: {desktop: 20, mobile: 16},
                 size: {desktop: 14, mobile: 12},
                 weight: 'medium',
             },
-            title2: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}, weight: 'light'},
-            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
-            title4: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
+            title2: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'medium',
+            },
+            title3: {
+                lineHeight: {desktop: 28, mobile: 24},
+                size: {desktop: 24, mobile: 18},
+                weight: 'medium',
+            },
+            title4: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'medium',
+            },
         },
         themeVariants: {
             successFeedback: 'inverse',
diff --git a/src/test-utils/index.tsx b/src/test-utils/index.tsx
index d144d9db25..343c3e0ccd 100644
--- a/src/test-utils/index.tsx
+++ b/src/test-utils/index.tsx
@@ -189,7 +189,7 @@ export const openStoryPage = ({
         | 'Movistar'
         | 'Movistar-new'
         | 'Vivo'
-        | 'Vivo-new'
+        | 'Vivo-evolution'
         | 'O2'
         | 'O2-new'
         | 'Telefonica'
diff --git a/src/text.tsx b/src/text.tsx
index 05132a026a..5462f5d2e9 100644
--- a/src/text.tsx
+++ b/src/text.tsx
@@ -7,7 +7,7 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {useTheme} from './hooks';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './text.css';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import ScreenReaderOnly from './screen-reader-only';
 
 import type {ExclusifyUnion} from './utils/utility-types';
@@ -202,7 +202,7 @@ export const Text = ({
           })
         : {};
 
-    if (skinName === VIVO_NEW_SKIN) {
+    if (skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN) {
         ({ariaLabel, children} = makeVivinhoCharReadableForScreenReaders({children, ariaLabel, as}));
     }