diff --git a/css/blau.css b/css/blau.css
new file mode 100644
index 0000000000..db1fedd76e
--- /dev/null
+++ b/css/blau.css
@@ -0,0 +1,689 @@
+[data-mistica-skin='blau'] {
+    /* Palette colors */
+    --mistica-blau-blauBluePrimary: #00b6f1;
+    --mistica-blau-white: #ffffff;
+    --mistica-blau-blauRed10: #feece8;
+    --mistica-blau-blauBlueSecondary: #0072bc;
+    --mistica-blau-blauBluePrimary20: #e5f6fd;
+    --mistica-blau-grey2: #e7e7e7;
+    --mistica-blau-grey1: #f5f9fa;
+    --mistica-blau-grey5: #808285;
+    --mistica-blau-blauBlueSecondary60: #005a99;
+    --mistica-blau-blauRed: #f64417;
+    --mistica-blau-blauRed70: #c93712;
+    --mistica-blau-blauPurple10: #f1e7f7;
+    --mistica-blau-blauBluePrimary30: #b3e9fb;
+    --mistica-blau-blauBlueSecondary10: #e5f1f9;
+    --mistica-blau-blauPurple: #7814b3;
+    --mistica-blau-blauPurple30: #bb89d9;
+    --mistica-blau-grey6: #000000;
+    --mistica-blau-blauGreen: #30d300;
+    --mistica-blau-blauYellow: #ffa922;
+    --mistica-blau-blauGreen10: #eafbe5;
+    --mistica-blau-blauYellow10: #fff6e9;
+    --mistica-blau-blauGreen70: #1d7f00;
+    --mistica-blau-blauYellow70: #996614;
+    --mistica-blau-blauBlueSecondary20: #b2d4ec;
+    --mistica-blau-darkModeBlack: #191919;
+    --mistica-blau-darkModeGrey: #242424;
+    --mistica-blau-darkModeGrey6: #313235;
+    --mistica-blau-blauBlueSecondary30: #80b7df;
+    --mistica-blau-grey4: #a0a0a0;
+    --mistica-blau-blauGreen30: #97e980;
+    --mistica-blau-blauYellow40: #ffc364;
+    --mistica-blau-blauRed40: #f97c5d;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-blau-raw-blauBluePrimary: 0, 182, 241;
+    --mistica-blau-raw-darkModeBlack: 25, 25, 25;
+    --mistica-blau-raw-blauBlueSecondary: 0, 114, 188;
+    --mistica-blau-raw-white: 255, 255, 255;
+    --mistica-blau-raw-grey6: 0, 0, 0;
+    --mistica-blau-raw-darkModeGrey: 36, 36, 36;
+    --mistica-blau-raw-blauPurple: 120, 20, 179;
+
+    /* Colors */
+    --mistica-color-backgroundBrand: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-appBarBackground: var(--mistica-blau-white);
+    --mistica-color-background: var(--mistica-blau-white);
+    --mistica-color-backgroundContainer: var(--mistica-blau-white);
+    --mistica-color-backgroundContainerError: var(--mistica-blau-blauRed10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-blau-blauBluePrimary20);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.75);
+    --mistica-color-backgroundSkeleton: var(--mistica-blau-grey2);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-backgroundAlternative: var(--mistica-blau-blauBluePrimary20);
+    --mistica-color-backgroundBrandTop: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-skeletonWave: var(--mistica-blau-grey2);
+    --mistica-color-borderLow: var(--mistica-blau-grey1);
+    --mistica-color-border: var(--mistica-blau-grey2);
+    --mistica-color-borderHigh: var(--mistica-blau-grey5);
+    --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-blau-blauRed10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-blau-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-blau-blauRed10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-blau-blauPurple10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBluePrimary30);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.2);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.2);
+    --mistica-color-textButtonPrimary: var(--mistica-blau-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-textButtonSecondary: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-white);
+    --mistica-color-textLink: var(--mistica-blau-blauPurple);
+    --mistica-color-textLinkInverse: var(--mistica-blau-white);
+    --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
+    --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+    --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-control: var(--mistica-blau-grey2);
+    --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-controlInverse: var(--mistica-blau-blauBluePrimary30);
+    --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
+    --mistica-color-controlError: var(--mistica-blau-blauRed);
+    --mistica-color-barTrack: var(--mistica-blau-grey2);
+    --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-iosControlKnob: var(--mistica-blau-white);
+    --mistica-color-divider: var(--mistica-blau-grey2);
+    --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-badge: var(--mistica-blau-blauRed);
+    --mistica-color-feedbackErrorBackground: var(--mistica-blau-blauRed);
+    --mistica-color-feedbackInfoBackground: var(--mistica-blau-grey6);
+    --mistica-color-brand: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-brandHigh: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-inverse: var(--mistica-blau-white);
+    --mistica-color-neutralHigh: var(--mistica-blau-grey6);
+    --mistica-color-neutralMedium: var(--mistica-blau-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-blau-grey5);
+    --mistica-color-neutralLow: var(--mistica-blau-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-blau-grey2);
+    --mistica-color-textPrimary: var(--mistica-blau-grey6);
+    --mistica-color-textPrimaryInverse: var(--mistica-blau-white);
+    --mistica-color-textSecondary: var(--mistica-blau-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-blau-blauBluePrimary20);
+    --mistica-color-error: var(--mistica-blau-blauRed);
+    --mistica-color-textError: var(--mistica-blau-blauRed);
+    --mistica-color-textErrorInverse: var(--mistica-blau-white);
+    --mistica-color-success: var(--mistica-blau-blauGreen);
+    --mistica-color-warning: var(--mistica-blau-blauYellow);
+    --mistica-color-promo: var(--mistica-blau-blauPurple);
+    --mistica-color-highlight: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-successLow: var(--mistica-blau-blauGreen10);
+    --mistica-color-warningLow: var(--mistica-blau-blauYellow10);
+    --mistica-color-errorLow: var(--mistica-blau-blauRed10);
+    --mistica-color-promoLow: var(--mistica-blau-blauPurple10);
+    --mistica-color-brandLow: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-successHigh: var(--mistica-blau-blauGreen70);
+    --mistica-color-warningHigh: var(--mistica-blau-blauYellow70);
+    --mistica-color-errorHigh: var(--mistica-blau-blauRed70);
+    --mistica-color-promoHigh: var(--mistica-blau-blauPurple);
+    --mistica-color-successHighInverse: var(--mistica-blau-blauGreen70);
+    --mistica-color-warningHighInverse: var(--mistica-blau-blauYellow70);
+    --mistica-color-errorHighInverse: var(--mistica-blau-blauRed70);
+    --mistica-color-promoHighInverse: var(--mistica-blau-blauPurple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-blau-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-blau-blauBlueSecondary20);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-blauBlueSecondary20);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-blau-white);
+    --mistica-color-textAppBar: var(--mistica-blau-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-customTabsBackground: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple);
+    --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen70);
+    --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow70);
+    --mistica-color-tagTextError: var(--mistica-blau-blauRed70);
+    --mistica-color-tagBackgroundPromo: var(--mistica-blau-blauPurple10);
+    --mistica-color-tagBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-blau-grey1);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-blau-blauGreen10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-blau-blauYellow10);
+    --mistica-color-tagBackgroundError: var(--mistica-blau-blauRed10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-blau-raw-grey6), 0) 0%,
+        rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
+        rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
+    );
+
+    /* 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-indicator: 999px;
+    --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;
+
+    /* 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: 300;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 300;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 300;
+    --mistica-font-size-8: 2rem;
+    --mistica-line-height-8: 2.5rem;
+    --mistica-font-weight-8: 300;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 300;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 300;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 300;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='blau'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-blau-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-blau-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-blau-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-blau-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-blau-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-blau-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-blau-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-blau-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-blau-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-blau-darkModeGrey);
+    --mistica-color-backgroundBrandTop: var(--mistica-blau-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-blau-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-blau-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-blau-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-blau-grey5);
+    --mistica-color-borderLow: var(--mistica-blau-darkModeBlack);
+    --mistica-color-border: var(--mistica-blau-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-blau-grey5);
+    --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-blau-grey2);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-grey2);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-grey2);
+    --mistica-color-textButtonSecondary: var(--mistica-blau-grey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-blau-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-grey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-grey2);
+    --mistica-color-textLink: var(--mistica-blau-blauPurple30);
+    --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
+    --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
+    --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+    --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-control: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-controlInverse: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
+    --mistica-color-controlError: var(--mistica-blau-blauRed);
+    --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
+    --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
+    --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
+    --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
+    --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
+    --mistica-color-badge: var(--mistica-blau-blauRed);
+    --mistica-color-feedbackErrorBackground: var(--mistica-blau-blauRed);
+    --mistica-color-feedbackInfoBackground: var(--mistica-blau-darkModeGrey);
+    --mistica-color-brand: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-brandHigh: rgba(var(--mistica-blau-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-blau-grey2);
+    --mistica-color-neutralHigh: var(--mistica-blau-grey2);
+    --mistica-color-neutralMedium: var(--mistica-blau-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-blau-grey5);
+    --mistica-color-neutralLow: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-blau-grey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-blau-grey2);
+    --mistica-color-textSecondary: var(--mistica-blau-grey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-blau-grey4);
+    --mistica-color-error: var(--mistica-blau-blauRed);
+    --mistica-color-textError: var(--mistica-blau-blauRed);
+    --mistica-color-textErrorInverse: var(--mistica-blau-blauRed);
+    --mistica-color-success: var(--mistica-blau-blauGreen);
+    --mistica-color-warning: var(--mistica-blau-blauYellow);
+    --mistica-color-promo: var(--mistica-blau-blauPurple);
+    --mistica-color-highlight: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-successLow: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-blau-blauGreen30);
+    --mistica-color-warningHigh: var(--mistica-blau-blauYellow40);
+    --mistica-color-errorHigh: var(--mistica-blau-blauRed40);
+    --mistica-color-promoHigh: var(--mistica-blau-blauPurple30);
+    --mistica-color-successHighInverse: var(--mistica-blau-blauGreen70);
+    --mistica-color-warningHighInverse: var(--mistica-blau-blauYellow70);
+    --mistica-color-errorHighInverse: var(--mistica-blau-blauRed70);
+    --mistica-color-promoHighInverse: var(--mistica-blau-blauPurple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-blau-grey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-blau-grey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-grey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-blau-grey2);
+    --mistica-color-textAppBar: var(--mistica-blau-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-blau-grey2);
+    --mistica-color-customTabsBackground: var(--mistica-blau-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple30);
+    --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
+    --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen30);
+    --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow40);
+    --mistica-color-tagTextError: var(--mistica-blau-blauRed40);
+    --mistica-color-tagBackgroundPromo: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-blau-raw-grey6), 0) 0%,
+        rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
+        rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='blau'] {
+        --mistica-color-background: var(--mistica-blau-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-blau-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-blau-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-blau-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-blau-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-blau-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-blau-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-blau-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-blau-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-blau-darkModeGrey);
+        --mistica-color-backgroundBrandTop: var(--mistica-blau-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-blau-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-blau-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-blau-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-blau-grey5);
+        --mistica-color-borderLow: var(--mistica-blau-darkModeBlack);
+        --mistica-color-border: var(--mistica-blau-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-blau-grey5);
+        --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-blau-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+            var(--mistica-blau-raw-blauPurple),
+            0.3
+        );
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-blauPurple), 0.3);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-blau-grey2);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-grey2);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-grey2);
+        --mistica-color-textButtonSecondary: var(--mistica-blau-grey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-blau-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-grey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-grey2);
+        --mistica-color-textLink: var(--mistica-blau-blauPurple30);
+        --mistica-color-textLinkInverse: var(--mistica-blau-blauPurple30);
+        --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
+        --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+        --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-control: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-controlInverse: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-controlError: var(--mistica-blau-blauRed);
+        --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
+        --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
+        --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
+        --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
+        --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
+        --mistica-color-badge: var(--mistica-blau-blauRed);
+        --mistica-color-feedbackErrorBackground: var(--mistica-blau-blauRed);
+        --mistica-color-feedbackInfoBackground: var(--mistica-blau-darkModeGrey);
+        --mistica-color-brand: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-brandHigh: rgba(var(--mistica-blau-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-blau-grey2);
+        --mistica-color-neutralHigh: var(--mistica-blau-grey2);
+        --mistica-color-neutralMedium: var(--mistica-blau-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-blau-grey5);
+        --mistica-color-neutralLow: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-blau-grey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-blau-grey2);
+        --mistica-color-textSecondary: var(--mistica-blau-grey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-blau-grey4);
+        --mistica-color-error: var(--mistica-blau-blauRed);
+        --mistica-color-textError: var(--mistica-blau-blauRed);
+        --mistica-color-textErrorInverse: var(--mistica-blau-blauRed);
+        --mistica-color-success: var(--mistica-blau-blauGreen);
+        --mistica-color-warning: var(--mistica-blau-blauYellow);
+        --mistica-color-promo: var(--mistica-blau-blauPurple);
+        --mistica-color-highlight: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-successLow: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-blau-blauGreen30);
+        --mistica-color-warningHigh: var(--mistica-blau-blauYellow40);
+        --mistica-color-errorHigh: var(--mistica-blau-blauRed40);
+        --mistica-color-promoHigh: var(--mistica-blau-blauPurple30);
+        --mistica-color-successHighInverse: var(--mistica-blau-blauGreen70);
+        --mistica-color-warningHighInverse: var(--mistica-blau-blauYellow70);
+        --mistica-color-errorHighInverse: var(--mistica-blau-blauRed70);
+        --mistica-color-promoHighInverse: var(--mistica-blau-blauPurple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-blau-grey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-blau-grey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-grey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-blau-grey2);
+        --mistica-color-textAppBar: var(--mistica-blau-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-blau-grey2);
+        --mistica-color-customTabsBackground: var(--mistica-blau-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple30);
+        --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen30);
+        --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow40);
+        --mistica-color-tagTextError: var(--mistica-blau-blauRed40);
+        --mistica-color-tagBackgroundPromo: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-blau-raw-grey6), 0) 0%,
+            rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
+            rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='blau'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-blau-white);
+        --mistica-color-backgroundAlternative: var(--mistica-blau-blauBluePrimary20);
+        --mistica-color-backgroundBrand: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-backgroundContainer: var(--mistica-blau-white);
+        --mistica-color-backgroundContainerError: var(--mistica-blau-blauRed10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-blau-raw-blauBluePrimary), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.4);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-blau-blauBluePrimary20);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.75);
+        --mistica-color-backgroundSkeleton: var(--mistica-blau-grey2);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-backgroundBrandTop: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-appBarBackground: var(--mistica-blau-white);
+        --mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-skeletonWave: var(--mistica-blau-grey2);
+        --mistica-color-borderLow: var(--mistica-blau-grey1);
+        --mistica-color-border: var(--mistica-blau-grey2);
+        --mistica-color-borderHigh: var(--mistica-blau-grey5);
+        --mistica-color-borderSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-blau-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-blau-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-blau-blauRed);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-blau-blauRed70);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-blau-blauRed70);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-blau-blauRed10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-blau-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-blau-blauRed10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-blau-blauPurple10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.15);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-blau-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-blau-blauBluePrimary30);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-blau-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-blau-raw-white), 0.2);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-blau-raw-white), 0.2);
+        --mistica-color-textButtonPrimary: var(--mistica-blau-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-textButtonSecondary: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-blau-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-blau-white);
+        --mistica-color-textLink: var(--mistica-blau-blauPurple);
+        --mistica-color-textLinkInverse: var(--mistica-blau-white);
+        --mistica-color-textLinkDanger: var(--mistica-blau-blauRed);
+        --mistica-color-textLinkSnackbar: var(--mistica-blau-blauPurple30);
+        --mistica-color-textActivated: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-textBrand: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-control: var(--mistica-blau-grey2);
+        --mistica-color-controlActivated: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-controlInverse: var(--mistica-blau-blauBluePrimary30);
+        --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
+        --mistica-color-controlError: var(--mistica-blau-blauRed);
+        --mistica-color-barTrack: var(--mistica-blau-grey2);
+        --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-iosControlKnob: var(--mistica-blau-white);
+        --mistica-color-divider: var(--mistica-blau-grey2);
+        --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-badge: var(--mistica-blau-blauRed);
+        --mistica-color-feedbackErrorBackground: var(--mistica-blau-blauRed);
+        --mistica-color-feedbackInfoBackground: var(--mistica-blau-grey6);
+        --mistica-color-brand: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-brandHigh: var(--mistica-blau-blauBlueSecondary);
+        --mistica-color-inverse: var(--mistica-blau-white);
+        --mistica-color-neutralHigh: var(--mistica-blau-grey6);
+        --mistica-color-neutralMedium: var(--mistica-blau-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-blau-grey5);
+        --mistica-color-neutralLow: var(--mistica-blau-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-blau-grey2);
+        --mistica-color-textPrimary: var(--mistica-blau-grey6);
+        --mistica-color-textPrimaryInverse: var(--mistica-blau-white);
+        --mistica-color-textSecondary: var(--mistica-blau-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-blau-blauBluePrimary20);
+        --mistica-color-error: var(--mistica-blau-blauRed);
+        --mistica-color-textError: var(--mistica-blau-blauRed);
+        --mistica-color-textErrorInverse: var(--mistica-blau-white);
+        --mistica-color-success: var(--mistica-blau-blauGreen);
+        --mistica-color-warning: var(--mistica-blau-blauYellow);
+        --mistica-color-promo: var(--mistica-blau-blauPurple);
+        --mistica-color-highlight: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-successLow: var(--mistica-blau-blauGreen10);
+        --mistica-color-warningLow: var(--mistica-blau-blauYellow10);
+        --mistica-color-errorLow: var(--mistica-blau-blauRed10);
+        --mistica-color-promoLow: var(--mistica-blau-blauPurple10);
+        --mistica-color-brandLow: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-successHigh: var(--mistica-blau-blauGreen70);
+        --mistica-color-warningHigh: var(--mistica-blau-blauYellow70);
+        --mistica-color-errorHigh: var(--mistica-blau-blauRed70);
+        --mistica-color-promoHigh: var(--mistica-blau-blauPurple);
+        --mistica-color-successHighInverse: var(--mistica-blau-blauGreen70);
+        --mistica-color-warningHighInverse: var(--mistica-blau-blauYellow70);
+        --mistica-color-errorHighInverse: var(--mistica-blau-blauRed70);
+        --mistica-color-promoHighInverse: var(--mistica-blau-blauPurple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-blau-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-blau-blauBlueSecondary20);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-blau-blauBlueSecondary20);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-blau-white);
+        --mistica-color-textAppBar: var(--mistica-blau-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-blau-blauBlueSecondary60);
+        --mistica-color-customTabsBackground: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-tagTextPromo: var(--mistica-blau-blauPurple);
+        --mistica-color-tagTextActive: var(--mistica-blau-blauBluePrimary);
+        --mistica-color-tagTextInactive: var(--mistica-blau-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-blau-blauGreen70);
+        --mistica-color-tagTextWarning: var(--mistica-blau-blauYellow70);
+        --mistica-color-tagTextError: var(--mistica-blau-blauRed70);
+        --mistica-color-tagBackgroundPromo: var(--mistica-blau-blauPurple10);
+        --mistica-color-tagBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-blau-grey1);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-blau-blauGreen10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-blau-blauYellow10);
+        --mistica-color-tagBackgroundError: var(--mistica-blau-blauRed10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-blau-raw-grey6), 0) 0%,
+            rgba(var(--mistica-blau-raw-grey6), 0.4) 30%,
+            rgba(var(--mistica-blau-raw-grey6), 0.7) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='blau'] {
+        /* 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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/css/mistica-common.css b/css/mistica-common.css
new file mode 100644
index 0000000000..3333a4f6f1
--- /dev/null
+++ b/css/mistica-common.css
@@ -0,0 +1,130 @@
+/* Default text color */
+[data-mistica-skin] {
+    color: var(--mistica-color-textPrimary);
+    background: var(--mistica-color-background);
+}
+
+/* text utility classes */
+.mistica-text-1 {
+    font-size: var(--mistica-font-size-1);
+    line-height: var(--mistica-line-height-1);
+    font-weight: var(--mistica-font-weight-1);
+}
+.mistica-text-2 {
+    font-size: var(--mistica-font-size-2);
+    line-height: var(--mistica-line-height-2);
+    font-weight: var(--mistica-font-weight-2);
+}
+.mistica-text-3 {
+    font-size: var(--mistica-font-size-3);
+    line-height: var(--mistica-line-height-3);
+    font-weight: var(--mistica-font-weight-3);
+}
+.mistica-text-4 {
+    font-size: var(--mistica-font-size-4);
+    line-height: var(--mistica-line-height-4);
+    font-weight: var(--mistica-font-weight-4);
+}
+.mistica-text-5 {
+    font-size: var(--mistica-font-size-5);
+    line-height: var(--mistica-line-height-5);
+    font-weight: var(--mistica-font-weight-5);
+}
+.mistica-text-6 {
+    font-size: var(--mistica-font-size-6);
+    line-height: var(--mistica-line-height-6);
+    font-weight: var(--mistica-font-weight-6);
+}
+.mistica-text-7 {
+    font-size: var(--mistica-font-size-7);
+    line-height: var(--mistica-line-height-7);
+    font-weight: var(--mistica-font-weight-7);
+}
+.mistica-text-8 {
+    font-size: var(--mistica-font-size-8);
+    line-height: var(--mistica-line-height-8);
+    font-weight: var(--mistica-font-weight-8);
+}
+.mistica-text-9 {
+    font-size: var(--mistica-font-size-9);
+    line-height: var(--mistica-line-height-9);
+    font-weight: var(--mistica-font-weight-9);
+}
+.mistica-text-10 {
+    font-size: var(--mistica-font-size-10);
+    line-height: var(--mistica-line-height-10);
+    font-weight: var(--mistica-font-weight-10);
+}
+.mistica-text-cardTitle {
+    font-size: var(--mistica-font-size-cardTitle);
+    line-height: var(--mistica-line-height-cardTitle);
+    font-weight: var(--mistica-font-weight-cardTitle);
+}
+.mistica-text-button {
+    font-size: var(--mistica-font-size-button);
+    line-height: var(--mistica-line-height-button);
+    font-weight: var(--mistica-font-weight-button);
+}
+.mistica-text-tabsLabel {
+    font-size: var(--mistica-font-size-tabsLabel);
+    line-height: var(--mistica-line-height-tabsLabel);
+    font-weight: var(--mistica-font-weight-tabsLabel);
+}
+.mistica-text-link {
+    font-size: var(--mistica-font-size-link);
+    line-height: var(--mistica-line-height-link);
+    font-weight: var(--mistica-font-weight-link);
+}
+.mistica-text-title1 {
+    font-size: var(--mistica-font-size-title1);
+    line-height: var(--mistica-line-height-title1);
+    font-weight: var(--mistica-font-weight-title1);
+}
+.mistica-text-title2 {
+    font-size: var(--mistica-font-size-title2);
+    line-height: var(--mistica-line-height-title2);
+    font-weight: var(--mistica-font-weight-title2);
+}
+.mistica-text-indicator {
+    font-size: var(--mistica-font-size-indicator);
+    line-height: var(--mistica-line-height-indicator);
+    font-weight: var(--mistica-font-weight-indicator);
+}
+.mistica-text-navigationBar {
+    font-size: var(--mistica-font-size-navigationBar);
+    line-height: var(--mistica-line-height-navigationBar);
+    font-weight: var(--mistica-font-weight-navigationBar);
+}
+
+/* Boxed */
+.mistica-boxed {
+    border: 1px solid var(--mistica-color-border);
+    border-radius: var(--mistica-border-radius-container);
+    background: var(--mistica-color-backgroundContainer);
+}
+
+/* Responsive layout */
+.mistica-responsive-layout {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    margin: 0 var(--mistica-responsive-layout-margin);
+    --mistica-responsive-layout-margin: 16px;
+}
+
+@media (min-width: 768px) {
+    .mistica-responsive-layout {
+        --mistica-responsive-layout-margin: 24px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .mistica-responsive-layout {
+        --mistica-responsive-layout-margin: 40px;
+    }
+}
+
+@media (min-width: 1368px) {
+    .mistica-responsive-layout {
+        --mistica-responsive-layout-margin: calc((100vw - 1224px) / 2);
+    }
+}
diff --git a/css/movistar.css b/css/movistar.css
new file mode 100644
index 0000000000..51522f4626
--- /dev/null
+++ b/css/movistar.css
@@ -0,0 +1,709 @@
+[data-mistica-skin='movistar'] {
+    /* Palette colors */
+    --mistica-movistar-white: #ffffff;
+    --mistica-movistar-grey1: #f6f6f6;
+    --mistica-movistar-movistarBlue: #0b9cea;
+    --mistica-movistar-movistarBlueDark: #0b2739;
+    --mistica-movistar-pepper10: #ffebed;
+    --mistica-movistar-movistarBlue55: #008edd;
+    --mistica-movistar-grey2: #eeeeee;
+    --mistica-movistar-grey3: #dddddd;
+    --mistica-movistar-grey5: #6b6c6f;
+    --mistica-movistar-pepper55: #d73241;
+    --mistica-movistar-pepper70: #b22634;
+    --mistica-movistar-pepper65: #bf2937;
+    --mistica-movistar-movistarBlue10: #e6f5fd;
+    --mistica-movistar-movistarBlueHC: #066fcb;
+    --mistica-movistar-movistarBlueHC65: #055398;
+    --mistica-movistar-movistarBlueHC55: #055eac;
+    --mistica-movistar-movistarBlue15: #ceebfb;
+    --mistica-movistar-pepper60: #cc2c3b;
+    --mistica-movistar-movistarBlue30: #80cef9;
+    --mistica-movistar-grey4: #949494;
+    --mistica-movistar-movistarBlue20: #b3e1fb;
+    --mistica-movistar-movistarGreen55: #52a413;
+    --mistica-movistar-egg55: #d97d0d;
+    --mistica-movistar-purple: #a13ea1;
+    --mistica-movistar-pink55: #c42f6d;
+    --mistica-movistar-movistarGreen10: #eff8e8;
+    --mistica-movistar-egg10: #fef4e8;
+    --mistica-movistar-purple10: #f6ecf6;
+    --mistica-movistar-movistarGreen70: #407f0f;
+    --mistica-movistar-egg80: #6d3f09;
+    --mistica-movistar-purple70: #712b71;
+    --mistica-movistar-darkModeBlack: #061824;
+    --mistica-movistar-darkModeGrey: #081f2e;
+    --mistica-movistar-darkModeGrey6: #3c5261;
+    --mistica-movistar-darkModeGrey5: #6d7d88;
+    --mistica-movistar-darkModeGrey2: #eaebee;
+    --mistica-movistar-pepper45: #ff5f6e;
+    --mistica-movistar-darkModeGrey4: #85939c;
+    --mistica-movistar-movistarBlue40: #4dbaf7;
+    --mistica-movistar-movistarGreen: #5cb615;
+    --mistica-movistar-egg: #f28d15;
+    --mistica-movistar-purple40: #bd78bd;
+    --mistica-movistar-pink45: #eb5f99;
+    --mistica-movistar-darkModeGrey7: #032f46;
+    --mistica-movistar-movistarGreen40: #8dcc5b;
+    --mistica-movistar-egg40: #f6af5b;
+    --mistica-movistar-purple35: #c78bc7;
+    --mistica-movistar-darkModeGrey3: #ced4d7;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-movistar-raw-black: 0, 0, 0;
+    --mistica-movistar-raw-movistarBlueDark: 11, 39, 57;
+    --mistica-movistar-raw-white: 255, 255, 255;
+    --mistica-movistar-raw-darkModeGrey: 8, 31, 46;
+    --mistica-movistar-raw-darkModeBlack: 6, 24, 36;
+
+    /* Colors */
+    --mistica-color-background: var(--mistica-movistar-white);
+    --mistica-color-backgroundAlternative: var(--mistica-movistar-grey1);
+    --mistica-color-backgroundBrand: var(--mistica-movistar-movistarBlue);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-movistarBlueDark);
+    --mistica-color-backgroundContainer: var(--mistica-movistar-white);
+    --mistica-color-backgroundContainerError: var(--mistica-movistar-pepper10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-black), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-black), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-movistar-movistarBlue);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-black), 0.1);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-black), 0.2);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-movistarBlue55);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-grey1);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-movistarBlueDark), 0.6);
+    --mistica-color-backgroundSkeleton: var(--mistica-movistar-grey2);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-movistarBlue55);
+    --mistica-color-backgroundBrandTop: var(--mistica-movistar-movistarBlue);
+    --mistica-color-backgroundBrandBottom: var(--mistica-movistar-movistarBlue);
+    --mistica-color-appBarBackground: var(--mistica-movistar-white);
+    --mistica-color-navigationBarBackground: var(--mistica-movistar-movistarBlue);
+    --mistica-color-skeletonWave: var(--mistica-movistar-grey2);
+    --mistica-color-borderLow: var(--mistica-movistar-grey1);
+    --mistica-color-border: var(--mistica-movistar-grey3);
+    --mistica-color-borderHigh: var(--mistica-movistar-grey5);
+    --mistica-color-borderSelected: var(--mistica-movistar-movistarBlue);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-raw-black), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-raw-black), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-movistar-pepper70);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-movistar-pepper10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-movistar-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-movistar-pepper10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.2);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-movistar-movistarBlueHC65);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-movistar-movistarBlueHC65);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-movistar-movistarBlue15);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-movistar-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.2);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.3);
+    --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-textButtonSecondary: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-movistar-movistarBlueHC55);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-movistar-white);
+    --mistica-color-textLink: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-textLinkInverse: var(--mistica-movistar-white);
+    --mistica-color-textLinkDanger: var(--mistica-movistar-pepper60);
+    --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue30);
+    --mistica-color-textActivated: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-textBrand: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-control: var(--mistica-movistar-grey4);
+    --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
+    --mistica-color-controlInverse: var(--mistica-movistar-movistarBlue20);
+    --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
+    --mistica-color-controlError: var(--mistica-movistar-pepper55);
+    --mistica-color-barTrack: var(--mistica-movistar-grey3);
+    --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
+    --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
+    --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
+    --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+    --mistica-color-divider: var(--mistica-movistar-grey3);
+    --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
+    --mistica-color-badge: var(--mistica-movistar-pepper55);
+    --mistica-color-feedbackErrorBackground: var(--mistica-movistar-pepper55);
+    --mistica-color-feedbackInfoBackground: var(--mistica-movistar-movistarBlueDark);
+    --mistica-color-brand: var(--mistica-movistar-movistarBlue);
+    --mistica-color-brandHigh: var(--mistica-movistar-movistarBlue55);
+    --mistica-color-inverse: var(--mistica-movistar-white);
+    --mistica-color-neutralHigh: var(--mistica-movistar-movistarBlueDark);
+    --mistica-color-neutralMedium: var(--mistica-movistar-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-movistar-grey5);
+    --mistica-color-neutralLow: var(--mistica-movistar-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-movistar-grey2);
+    --mistica-color-textPrimary: var(--mistica-movistar-movistarBlueDark);
+    --mistica-color-textPrimaryInverse: var(--mistica-movistar-white);
+    --mistica-color-textSecondary: var(--mistica-movistar-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-success: var(--mistica-movistar-movistarGreen55);
+    --mistica-color-warning: var(--mistica-movistar-egg55);
+    --mistica-color-error: var(--mistica-movistar-pepper55);
+    --mistica-color-textError: var(--mistica-movistar-pepper55);
+    --mistica-color-textErrorInverse: var(--mistica-movistar-white);
+    --mistica-color-promo: var(--mistica-movistar-purple);
+    --mistica-color-highlight: var(--mistica-movistar-pink55);
+    --mistica-color-successLow: var(--mistica-movistar-movistarGreen10);
+    --mistica-color-warningLow: var(--mistica-movistar-egg10);
+    --mistica-color-errorLow: var(--mistica-movistar-pepper10);
+    --mistica-color-promoLow: var(--mistica-movistar-purple10);
+    --mistica-color-brandLow: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-successHigh: var(--mistica-movistar-movistarGreen70);
+    --mistica-color-warningHigh: var(--mistica-movistar-egg80);
+    --mistica-color-errorHigh: var(--mistica-movistar-pepper70);
+    --mistica-color-promoHigh: var(--mistica-movistar-purple70);
+    --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
+    --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
+    --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
+    --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-movistarBlue20);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-movistarBlue20);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-white);
+    --mistica-color-textAppBar: var(--mistica-movistar-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-customTabsBackground: var(--mistica-movistar-white);
+    --mistica-color-tagTextPromo: var(--mistica-movistar-purple70);
+    --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-tagTextInactive: var(--mistica-movistar-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen70);
+    --mistica-color-tagTextWarning: var(--mistica-movistar-egg80);
+    --mistica-color-tagTextError: var(--mistica-movistar-pepper70);
+    --mistica-color-tagBackgroundPromo: var(--mistica-movistar-purple10);
+    --mistica-color-tagBackgroundActive: var(--mistica-movistar-movistarBlue10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-movistar-grey1);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-movistarGreen10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-movistar-egg10);
+    --mistica-color-tagBackgroundError: var(--mistica-movistar-pepper10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-movistar-raw-black), 0) 0%,
+        rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
+        rgba(var(--mistica-movistar-raw-black), 0.7) 100%
+    );
+
+    /* 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-indicator: 999px;
+    --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;
+
+    /* 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: 700;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 700;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 700;
+    --mistica-font-size-8: 2rem;
+    --mistica-line-height-8: 2.5rem;
+    --mistica-font-weight-8: 700;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 700;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 700;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 700;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 700;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='movistar'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-borderLow: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-border: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-movistar-darkModeGrey5);
+    --mistica-color-borderSelected: var(--mistica-movistar-movistarBlue);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-movistar-pepper70);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-movistar-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-movistarBlueHC);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-movistar-movistarBlueHC65);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-movistar-movistarBlueHC65);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-movistar-raw-white), 0.25);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-white);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-movistar-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.25);
+    --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-white);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-movistar-white);
+    --mistica-color-textButtonSecondary: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textLink: var(--mistica-movistar-movistarBlue);
+    --mistica-color-textLinkInverse: var(--mistica-movistar-movistarBlue);
+    --mistica-color-textLinkDanger: var(--mistica-movistar-pepper45);
+    --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue);
+    --mistica-color-textActivated: var(--mistica-movistar-movistarBlue);
+    --mistica-color-textBrand: var(--mistica-movistar-movistarBlue);
+    --mistica-color-control: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
+    --mistica-color-controlInverse: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
+    --mistica-color-controlError: var(--mistica-movistar-pepper45);
+    --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
+    --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
+    --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
+    --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
+    --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-badge: var(--mistica-movistar-pepper55);
+    --mistica-color-feedbackErrorBackground: var(--mistica-movistar-pepper55);
+    --mistica-color-feedbackInfoBackground: var(--mistica-movistar-movistarBlueDark);
+    --mistica-color-brand: var(--mistica-movistar-movistarBlue);
+    --mistica-color-brandHigh: var(--mistica-movistar-movistarBlue40);
+    --mistica-color-inverse: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-neutralHigh: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-neutralMedium: var(--mistica-movistar-darkModeGrey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-movistar-grey5);
+    --mistica-color-neutralLow: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textSecondary: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-success: var(--mistica-movistar-movistarGreen);
+    --mistica-color-warning: var(--mistica-movistar-egg);
+    --mistica-color-error: var(--mistica-movistar-pepper45);
+    --mistica-color-textError: var(--mistica-movistar-pepper45);
+    --mistica-color-textErrorInverse: var(--mistica-movistar-pepper45);
+    --mistica-color-promo: var(--mistica-movistar-purple40);
+    --mistica-color-highlight: var(--mistica-movistar-pink45);
+    --mistica-color-successLow: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-warningLow: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-errorLow: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-promoLow: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-brandLow: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-successHigh: var(--mistica-movistar-movistarGreen40);
+    --mistica-color-warningHigh: var(--mistica-movistar-egg40);
+    --mistica-color-errorHigh: var(--mistica-movistar-pepper45);
+    --mistica-color-promoHigh: var(--mistica-movistar-purple35);
+    --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
+    --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
+    --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
+    --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-textAppBar: var(--mistica-movistar-darkModeGrey4);
+    --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlue);
+    --mistica-color-customTabsBackground: var(--mistica-movistar-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-movistar-purple35);
+    --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlue);
+    --mistica-color-tagTextInactive: var(--mistica-movistar-darkModeGrey3);
+    --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen40);
+    --mistica-color-tagTextWarning: var(--mistica-movistar-egg40);
+    --mistica-color-tagTextError: var(--mistica-movistar-pepper45);
+    --mistica-color-tagBackgroundPromo: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-tagBackgroundActive: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-tagBackgroundInactive: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-tagBackgroundWarning: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-tagBackgroundError: var(--mistica-movistar-darkModeGrey7);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-movistar-raw-black), 0) 0%,
+        rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
+        rgba(var(--mistica-movistar-raw-black), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='movistar'] {
+        --mistica-color-background: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-borderLow: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-border: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-movistar-darkModeGrey5);
+        --mistica-color-borderSelected: var(--mistica-movistar-movistarBlue);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-movistar-pepper70);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-movistar-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+            var(--mistica-movistar-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-movistar-movistarBlueHC65);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-movistar-movistarBlueHC65);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-movistar-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-movistar-raw-white), 0.25);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-white);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-movistar-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(
+            var(--mistica-movistar-raw-white),
+            0.25
+        );
+        --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-white);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-movistar-white);
+        --mistica-color-textButtonSecondary: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textLink: var(--mistica-movistar-movistarBlue);
+        --mistica-color-textLinkInverse: var(--mistica-movistar-movistarBlue);
+        --mistica-color-textLinkDanger: var(--mistica-movistar-pepper45);
+        --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue);
+        --mistica-color-textActivated: var(--mistica-movistar-movistarBlue);
+        --mistica-color-textBrand: var(--mistica-movistar-movistarBlue);
+        --mistica-color-control: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
+        --mistica-color-controlInverse: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
+        --mistica-color-controlError: var(--mistica-movistar-pepper45);
+        --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
+        --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
+        --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
+        --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
+        --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-badge: var(--mistica-movistar-pepper55);
+        --mistica-color-feedbackErrorBackground: var(--mistica-movistar-pepper55);
+        --mistica-color-feedbackInfoBackground: var(--mistica-movistar-movistarBlueDark);
+        --mistica-color-brand: var(--mistica-movistar-movistarBlue);
+        --mistica-color-brandHigh: var(--mistica-movistar-movistarBlue40);
+        --mistica-color-inverse: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-neutralHigh: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-neutralMedium: var(--mistica-movistar-darkModeGrey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-movistar-grey5);
+        --mistica-color-neutralLow: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textSecondary: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-success: var(--mistica-movistar-movistarGreen);
+        --mistica-color-warning: var(--mistica-movistar-egg);
+        --mistica-color-error: var(--mistica-movistar-pepper45);
+        --mistica-color-textError: var(--mistica-movistar-pepper45);
+        --mistica-color-textErrorInverse: var(--mistica-movistar-pepper45);
+        --mistica-color-promo: var(--mistica-movistar-purple40);
+        --mistica-color-highlight: var(--mistica-movistar-pink45);
+        --mistica-color-successLow: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-warningLow: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-errorLow: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-promoLow: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-brandLow: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-successHigh: var(--mistica-movistar-movistarGreen40);
+        --mistica-color-warningHigh: var(--mistica-movistar-egg40);
+        --mistica-color-errorHigh: var(--mistica-movistar-pepper45);
+        --mistica-color-promoHigh: var(--mistica-movistar-purple35);
+        --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
+        --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
+        --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
+        --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-textAppBar: var(--mistica-movistar-darkModeGrey4);
+        --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlue);
+        --mistica-color-customTabsBackground: var(--mistica-movistar-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-movistar-purple35);
+        --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlue);
+        --mistica-color-tagTextInactive: var(--mistica-movistar-darkModeGrey3);
+        --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen40);
+        --mistica-color-tagTextWarning: var(--mistica-movistar-egg40);
+        --mistica-color-tagTextError: var(--mistica-movistar-pepper45);
+        --mistica-color-tagBackgroundPromo: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-tagBackgroundActive: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-tagBackgroundInactive: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-tagBackgroundWarning: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-tagBackgroundError: var(--mistica-movistar-darkModeGrey7);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-movistar-raw-black), 0) 0%,
+            rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
+            rgba(var(--mistica-movistar-raw-black), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='movistar'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-movistar-white);
+        --mistica-color-backgroundAlternative: var(--mistica-movistar-grey1);
+        --mistica-color-backgroundBrand: var(--mistica-movistar-movistarBlue);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-movistar-movistarBlueDark);
+        --mistica-color-backgroundContainer: var(--mistica-movistar-white);
+        --mistica-color-backgroundContainerError: var(--mistica-movistar-pepper10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-movistar-raw-black), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-movistar-raw-black), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-movistar-movistarBlue);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-movistar-raw-black), 0.1);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-movistar-raw-black), 0.2);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-movistar-movistarBlue55);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-movistar-grey1);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-movistar-raw-movistarBlueDark), 0.6);
+        --mistica-color-backgroundSkeleton: var(--mistica-movistar-grey2);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-movistar-movistarBlue55);
+        --mistica-color-backgroundBrandTop: var(--mistica-movistar-movistarBlue);
+        --mistica-color-backgroundBrandBottom: var(--mistica-movistar-movistarBlue);
+        --mistica-color-appBarBackground: var(--mistica-movistar-white);
+        --mistica-color-navigationBarBackground: var(--mistica-movistar-movistarBlue);
+        --mistica-color-skeletonWave: var(--mistica-movistar-grey2);
+        --mistica-color-borderLow: var(--mistica-movistar-grey1);
+        --mistica-color-border: var(--mistica-movistar-grey3);
+        --mistica-color-borderHigh: var(--mistica-movistar-grey5);
+        --mistica-color-borderSelected: var(--mistica-movistar-movistarBlue);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-movistar-raw-black), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-movistar-raw-black), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-movistar-pepper55);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-movistar-pepper70);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-movistar-pepper65);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-movistar-pepper10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-movistar-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-movistar-pepper10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-movistar-raw-white), 0.2);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-movistar-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-movistar-movistarBlueHC65);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-movistar-movistarBlueHC55);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-movistar-movistarBlue15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-movistar-movistarBlueHC65);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-movistar-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-movistar-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-movistar-raw-white), 0.2);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(
+            var(--mistica-movistar-raw-white),
+            0.3
+        );
+        --mistica-color-textButtonPrimary: var(--mistica-movistar-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-textButtonSecondary: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-movistar-movistarBlueHC55);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-movistar-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-movistar-white);
+        --mistica-color-textLink: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-textLinkInverse: var(--mistica-movistar-white);
+        --mistica-color-textLinkDanger: var(--mistica-movistar-pepper60);
+        --mistica-color-textLinkSnackbar: var(--mistica-movistar-movistarBlue30);
+        --mistica-color-textActivated: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-textBrand: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-control: var(--mistica-movistar-grey4);
+        --mistica-color-controlActivated: var(--mistica-movistar-movistarBlue);
+        --mistica-color-controlInverse: var(--mistica-movistar-movistarBlue20);
+        --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
+        --mistica-color-controlError: var(--mistica-movistar-pepper55);
+        --mistica-color-barTrack: var(--mistica-movistar-grey3);
+        --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
+        --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
+        --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
+        --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+        --mistica-color-divider: var(--mistica-movistar-grey3);
+        --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
+        --mistica-color-badge: var(--mistica-movistar-pepper55);
+        --mistica-color-feedbackErrorBackground: var(--mistica-movistar-pepper55);
+        --mistica-color-feedbackInfoBackground: var(--mistica-movistar-movistarBlueDark);
+        --mistica-color-brand: var(--mistica-movistar-movistarBlue);
+        --mistica-color-brandHigh: var(--mistica-movistar-movistarBlue55);
+        --mistica-color-inverse: var(--mistica-movistar-white);
+        --mistica-color-neutralHigh: var(--mistica-movistar-movistarBlueDark);
+        --mistica-color-neutralMedium: var(--mistica-movistar-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-movistar-grey5);
+        --mistica-color-neutralLow: var(--mistica-movistar-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-movistar-grey2);
+        --mistica-color-textPrimary: var(--mistica-movistar-movistarBlueDark);
+        --mistica-color-textPrimaryInverse: var(--mistica-movistar-white);
+        --mistica-color-textSecondary: var(--mistica-movistar-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-success: var(--mistica-movistar-movistarGreen55);
+        --mistica-color-warning: var(--mistica-movistar-egg55);
+        --mistica-color-error: var(--mistica-movistar-pepper55);
+        --mistica-color-textError: var(--mistica-movistar-pepper55);
+        --mistica-color-textErrorInverse: var(--mistica-movistar-white);
+        --mistica-color-promo: var(--mistica-movistar-purple);
+        --mistica-color-highlight: var(--mistica-movistar-pink55);
+        --mistica-color-successLow: var(--mistica-movistar-movistarGreen10);
+        --mistica-color-warningLow: var(--mistica-movistar-egg10);
+        --mistica-color-errorLow: var(--mistica-movistar-pepper10);
+        --mistica-color-promoLow: var(--mistica-movistar-purple10);
+        --mistica-color-brandLow: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-successHigh: var(--mistica-movistar-movistarGreen70);
+        --mistica-color-warningHigh: var(--mistica-movistar-egg80);
+        --mistica-color-errorHigh: var(--mistica-movistar-pepper70);
+        --mistica-color-promoHigh: var(--mistica-movistar-purple70);
+        --mistica-color-successHighInverse: var(--mistica-movistar-movistarGreen70);
+        --mistica-color-warningHighInverse: var(--mistica-movistar-egg80);
+        --mistica-color-errorHighInverse: var(--mistica-movistar-pepper70);
+        --mistica-color-promoHighInverse: var(--mistica-movistar-purple70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-movistar-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-movistar-movistarBlue20);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-movistar-movistarBlue20);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-movistar-white);
+        --mistica-color-textAppBar: var(--mistica-movistar-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-customTabsBackground: var(--mistica-movistar-white);
+        --mistica-color-tagTextPromo: var(--mistica-movistar-purple70);
+        --mistica-color-tagTextActive: var(--mistica-movistar-movistarBlueHC);
+        --mistica-color-tagTextInactive: var(--mistica-movistar-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-movistar-movistarGreen70);
+        --mistica-color-tagTextWarning: var(--mistica-movistar-egg80);
+        --mistica-color-tagTextError: var(--mistica-movistar-pepper70);
+        --mistica-color-tagBackgroundPromo: var(--mistica-movistar-purple10);
+        --mistica-color-tagBackgroundActive: var(--mistica-movistar-movistarBlue10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-movistar-grey1);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-movistar-movistarGreen10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-movistar-egg10);
+        --mistica-color-tagBackgroundError: var(--mistica-movistar-pepper10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-movistar-raw-black), 0) 0%,
+            rgba(var(--mistica-movistar-raw-black), 0.4) 30%,
+            rgba(var(--mistica-movistar-raw-black), 0.7) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='movistar'] {
+        /* 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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/css/o2-new.css b/css/o2-new.css
new file mode 100644
index 0000000000..4fc0f200e4
--- /dev/null
+++ b/css/o2-new.css
@@ -0,0 +1,713 @@
+[data-mistica-skin='o2-new'] {
+    /* Palette colors */
+    --mistica-o2-new-white: #ffffff;
+    --mistica-o2-new-grey20: #f3f3f5;
+    --mistica-o2-new-darkBlue: #00008c;
+    --mistica-o2-new-beyondBlue: #0050ff;
+    --mistica-o2-new-beyondBlue45: #0a73eb;
+    --mistica-o2-new-o2Red10: #ffeeee;
+    --mistica-o2-new-beyondBlue70: #0038b2;
+    --mistica-o2-new-grey30: #d9d9dd;
+    --mistica-o2-new-grey80: #3c3c46;
+    --mistica-o2-new-o2Red60: #cc4848;
+    --mistica-o2-new-o2Red65: #bf4444;
+    --mistica-o2-new-beyondBlue10: #e5edff;
+    --mistica-o2-new-beyondBlue30: #80a7ff;
+    --mistica-o2-new-grey45: #8c8c9a;
+    --mistica-o2-new-beyondBlue15: #ccdcff;
+    --mistica-o2-new-black: #00001e;
+    --mistica-o2-new-grey60: #6e6e77;
+    --mistica-o2-new-o2Green: #00dc7d;
+    --mistica-o2-new-o2Orange: #ffa55a;
+    --mistica-o2-new-o2Pink: #fa96ff;
+    --mistica-o2-new-o2Pink80: #704373;
+    --mistica-o2-new-o2Green10: #e5fbf2;
+    --mistica-o2-new-o2Orange10: #fff6ee;
+    --mistica-o2-new-o2Pink15: #feeaff;
+    --mistica-o2-new-o2Green80: #006338;
+    --mistica-o2-new-o2Orange75: #996336;
+    --mistica-o2-new-darkModeBlack: #00001c;
+    --mistica-o2-new-darkModeGrey: #08132b;
+    --mistica-o2-new-darkModeGrey6: #14213d;
+    --mistica-o2-new-darkModeBeyondBlue: #1a62ff;
+    --mistica-o2-new-beyondBlue55: #0044d9;
+    --mistica-o2-new-beyondBlue40: #4d84ff;
+    --mistica-o2-new-o2Red45: #ff7b7b;
+    --mistica-o2-new-o2Green40: #4ce7a4;
+    --mistica-o2-new-o2Orange40: #ffc08b;
+    --mistica-o2-new-o2Red40: #ff8b8b;
+    --mistica-o2-new-o2Pink30: #fdcaff;
+    --mistica-o2-new-grey40: #b4b4be;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-o2-new-raw-darkModeBlack: 0, 0, 28;
+    --mistica-o2-new-raw-black: 0, 0, 30;
+    --mistica-o2-new-raw-white: 255, 255, 255;
+    --mistica-o2-new-raw-beyondBlue: 0, 80, 255;
+    --mistica-o2-new-raw-darkModeGrey: 8, 19, 43;
+
+    /* Colors */
+    --mistica-color-background: var(--mistica-o2-new-white);
+    --mistica-color-backgroundAlternative: var(--mistica-o2-new-grey20);
+    --mistica-color-backgroundBrand: linear-gradient(
+        180deg,
+        var(--mistica-o2-new-darkBlue) 0%,
+        var(--mistica-o2-new-beyondBlue) 64%,
+        var(--mistica-o2-new-beyondBlue45) 100%
+    );
+    --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-backgroundContainer: var(--mistica-o2-new-white);
+    --mistica-color-backgroundContainerError: var(--mistica-o2-new-o2Red10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.05);
+    --mistica-color-backgroundContainerBrand: linear-gradient(
+        180deg,
+        var(--mistica-o2-new-darkBlue) 0%,
+        var(--mistica-o2-new-beyondBlue) 64%,
+        var(--mistica-o2-new-beyondBlue45) 100%
+    );
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-o2-new-grey20);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-new-raw-black), 0.6);
+    --mistica-color-backgroundSkeleton: var(--mistica-o2-new-grey30);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkBlue);
+    --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-beyondBlue45);
+    --mistica-color-appBarBackground: var(--mistica-o2-new-white);
+    --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkBlue);
+    --mistica-color-skeletonWave: var(--mistica-o2-new-grey30);
+    --mistica-color-borderLow: var(--mistica-o2-new-grey20);
+    --mistica-color-border: var(--mistica-o2-new-grey30);
+    --mistica-color-borderHigh: var(--mistica-o2-new-grey80);
+    --mistica-color-borderSelected: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-new-o2Red65);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-o2-new-o2Red10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-o2-new-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-o2-new-o2Red10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-textButtonSecondary: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-new-white);
+    --mistica-color-textLink: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-textLinkInverse: var(--mistica-o2-new-white);
+    --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red65);
+    --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-control: var(--mistica-o2-new-grey45);
+    --mistica-color-controlActivated: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-controlInverse: var(--mistica-o2-new-white);
+    --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
+    --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
+    --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+    --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
+    --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
+    --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+    --mistica-color-divider: var(--mistica-o2-new-grey30);
+    --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-badge: var(--mistica-o2-new-o2Red65);
+    --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
+    --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);
+    --mistica-color-brand: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-brandHigh: var(--mistica-o2-new-beyondBlue70);
+    --mistica-color-inverse: var(--mistica-o2-new-white);
+    --mistica-color-neutralHigh: var(--mistica-o2-new-black);
+    --mistica-color-neutralMedium: var(--mistica-o2-new-grey60);
+    --mistica-color-neutralMediumInverse: var(--mistica-o2-new-grey60);
+    --mistica-color-neutralLow: var(--mistica-o2-new-grey20);
+    --mistica-color-neutralLowAlternative: var(--mistica-o2-new-grey30);
+    --mistica-color-textPrimary: var(--mistica-o2-new-black);
+    --mistica-color-textPrimaryInverse: var(--mistica-o2-new-white);
+    --mistica-color-textSecondary: var(--mistica-o2-new-grey60);
+    --mistica-color-textSecondaryInverse: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-success: var(--mistica-o2-new-o2Green);
+    --mistica-color-warning: var(--mistica-o2-new-o2Orange);
+    --mistica-color-error: var(--mistica-o2-new-o2Red65);
+    --mistica-color-textError: var(--mistica-o2-new-o2Red65);
+    --mistica-color-textErrorInverse: var(--mistica-o2-new-white);
+    --mistica-color-promo: var(--mistica-o2-new-o2Pink);
+    --mistica-color-highlight: var(--mistica-o2-new-o2Pink80);
+    --mistica-color-successLow: var(--mistica-o2-new-o2Green10);
+    --mistica-color-warningLow: var(--mistica-o2-new-o2Orange10);
+    --mistica-color-errorLow: var(--mistica-o2-new-o2Red10);
+    --mistica-color-promoLow: var(--mistica-o2-new-o2Pink15);
+    --mistica-color-brandLow: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-successHigh: var(--mistica-o2-new-o2Green80);
+    --mistica-color-warningHigh: var(--mistica-o2-new-o2Orange75);
+    --mistica-color-errorHigh: var(--mistica-o2-new-o2Red65);
+    --mistica-color-promoHigh: var(--mistica-o2-new-o2Pink80);
+    --mistica-color-successHighInverse: var(--mistica-o2-new-o2Green80);
+    --mistica-color-warningHighInverse: var(--mistica-o2-new-o2Orange75);
+    --mistica-color-errorHighInverse: var(--mistica-o2-new-o2Red65);
+    --mistica-color-promoHighInverse: var(--mistica-o2-new-o2Pink80);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-o2-new-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-white);
+    --mistica-color-textAppBar: var(--mistica-o2-new-grey60);
+    --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-customTabsBackground: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink80);
+    --mistica-color-tagTextActive: var(--mistica-o2-new-beyondBlue);
+    --mistica-color-tagTextInactive: var(--mistica-o2-new-grey60);
+    --mistica-color-tagTextSuccess: var(--mistica-o2-new-o2Green80);
+    --mistica-color-tagTextWarning: var(--mistica-o2-new-o2Orange75);
+    --mistica-color-tagTextError: var(--mistica-o2-new-o2Red65);
+    --mistica-color-tagBackgroundPromo: var(--mistica-o2-new-o2Pink15);
+    --mistica-color-tagBackgroundActive: var(--mistica-o2-new-beyondBlue10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-o2-new-grey20);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-o2Green10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-o2Orange10);
+    --mistica-color-tagBackgroundError: var(--mistica-o2-new-o2Red10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-o2-new-raw-beyondBlue), 0) 0%,
+        rgba(var(--mistica-o2-new-raw-beyondBlue), 0.4) 30%,
+        rgba(var(--mistica-o2-new-raw-beyondBlue), 1) 100%
+    );
+
+    /* Border radius */
+    --mistica-border-radius-avatar: 50%;
+    --mistica-border-radius-bar: 999px;
+    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-checkbox: 2px;
+    --mistica-border-radius-container: 16px;
+    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-input: 12px;
+    --mistica-border-radius-legacyDisplay: 16px;
+    --mistica-border-radius-popup: 8px;
+    --mistica-border-radius-sheet: 16px;
+    --mistica-border-radius-mediaSmall: 8px;
+
+    /* 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: 700;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 700;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 700;
+    --mistica-font-size-8: 2rem;
+    --mistica-line-height-8: 2.5rem;
+    --mistica-font-weight-8: 700;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 700;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 700;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 700;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='o2-new'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-new-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-o2-new-grey80);
+    --mistica-color-borderLow: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-border: var(--mistica-o2-new-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-o2-new-grey45);
+    --mistica-color-borderSelected: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-new-o2Red65);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-o2-new-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-darkModeBeyondBlue);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-darkModeBeyondBlue);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-new-beyondBlue55);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue55);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-new-beyondBlue55);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-o2-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-white);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-new-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-new-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-white);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-new-white);
+    --mistica-color-textButtonSecondary: var(--mistica-o2-new-grey30);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-o2-new-grey30);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-grey30);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-new-grey30);
+    --mistica-color-textLink: var(--mistica-o2-new-beyondBlue40);
+    --mistica-color-textLinkInverse: var(--mistica-o2-new-beyondBlue40);
+    --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red45);
+    --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-control: var(--mistica-o2-new-grey45);
+    --mistica-color-controlActivated: var(--mistica-o2-new-darkModeBeyondBlue);
+    --mistica-color-controlInverse: var(--mistica-o2-new-grey45);
+    --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
+    --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
+    --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
+    --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
+    --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+    --mistica-color-badge: var(--mistica-o2-new-o2Red65);
+    --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
+    --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-divider: rgba(var(--mistica-o2-new-raw-white), 0.1);
+    --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.1);
+    --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-brand: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-brandHigh: rgba(var(--mistica-o2-new-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-o2-new-grey30);
+    --mistica-color-neutralHigh: var(--mistica-o2-new-grey30);
+    --mistica-color-neutralMedium: var(--mistica-o2-new-grey60);
+    --mistica-color-neutralMediumInverse: var(--mistica-o2-new-grey60);
+    --mistica-color-neutralLow: var(--mistica-o2-new-grey80);
+    --mistica-color-neutralLowAlternative: var(--mistica-o2-new-grey80);
+    --mistica-color-textPrimary: var(--mistica-o2-new-grey30);
+    --mistica-color-textPrimaryInverse: var(--mistica-o2-new-grey30);
+    --mistica-color-textSecondary: var(--mistica-o2-new-grey45);
+    --mistica-color-textSecondaryInverse: var(--mistica-o2-new-grey45);
+    --mistica-color-success: var(--mistica-o2-new-o2Green);
+    --mistica-color-warning: var(--mistica-o2-new-o2Orange);
+    --mistica-color-error: var(--mistica-o2-new-o2Red45);
+    --mistica-color-textError: var(--mistica-o2-new-o2Red45);
+    --mistica-color-textErrorInverse: var(--mistica-o2-new-o2Red45);
+    --mistica-color-promo: var(--mistica-o2-new-o2Pink);
+    --mistica-color-highlight: var(--mistica-o2-new-o2Pink);
+    --mistica-color-successLow: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-o2-new-o2Green40);
+    --mistica-color-warningHigh: var(--mistica-o2-new-o2Orange40);
+    --mistica-color-errorHigh: var(--mistica-o2-new-o2Red40);
+    --mistica-color-promoHigh: var(--mistica-o2-new-o2Pink30);
+    --mistica-color-successHighInverse: var(--mistica-o2-new-o2Green80);
+    --mistica-color-warningHighInverse: var(--mistica-o2-new-o2Orange75);
+    --mistica-color-errorHighInverse: var(--mistica-o2-new-o2Red65);
+    --mistica-color-promoHighInverse: var(--mistica-o2-new-o2Pink);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-o2-new-grey30);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-o2-new-grey45);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-new-grey45);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-grey30);
+    --mistica-color-textAppBar: var(--mistica-o2-new-grey45);
+    --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue40);
+    --mistica-color-customTabsBackground: var(--mistica-o2-new-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink);
+    --mistica-color-tagTextActive: var(--mistica-o2-new-beyondBlue30);
+    --mistica-color-tagTextInactive: var(--mistica-o2-new-grey40);
+    --mistica-color-tagTextSuccess: var(--mistica-o2-new-o2Green);
+    --mistica-color-tagTextWarning: var(--mistica-o2-new-o2Orange);
+    --mistica-color-tagTextError: var(--mistica-o2-new-o2Red45);
+    --mistica-color-tagBackgroundPromo: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-o2-new-raw-black), 0) 0%,
+        rgba(var(--mistica-o2-new-raw-black), 0.4) 30%,
+        rgba(var(--mistica-o2-new-raw-black), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='o2-new'] {
+        --mistica-color-background: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-new-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-new-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-new-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-o2-new-grey80);
+        --mistica-color-borderLow: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-border: var(--mistica-o2-new-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-o2-new-grey45);
+        --mistica-color-borderSelected: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-new-o2Red65);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-o2-new-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+            var(--mistica-o2-new-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-darkModeBeyondBlue);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-darkModeBeyondBlue);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-new-beyondBlue55);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue55);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-new-beyondBlue55);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-o2-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-white);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-new-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-new-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-white);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-new-white);
+        --mistica-color-textButtonSecondary: var(--mistica-o2-new-grey30);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-o2-new-grey30);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-grey30);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-new-grey30);
+        --mistica-color-textLink: var(--mistica-o2-new-beyondBlue40);
+        --mistica-color-textLinkInverse: var(--mistica-o2-new-beyondBlue40);
+        --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red45);
+        --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-control: var(--mistica-o2-new-grey45);
+        --mistica-color-controlActivated: var(--mistica-o2-new-darkModeBeyondBlue);
+        --mistica-color-controlInverse: var(--mistica-o2-new-grey45);
+        --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
+        --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
+        --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
+        --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
+        --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+        --mistica-color-badge: var(--mistica-o2-new-o2Red65);
+        --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
+        --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-divider: rgba(var(--mistica-o2-new-raw-white), 0.1);
+        --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.1);
+        --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-brand: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-brandHigh: rgba(var(--mistica-o2-new-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-o2-new-grey30);
+        --mistica-color-neutralHigh: var(--mistica-o2-new-grey30);
+        --mistica-color-neutralMedium: var(--mistica-o2-new-grey60);
+        --mistica-color-neutralMediumInverse: var(--mistica-o2-new-grey60);
+        --mistica-color-neutralLow: var(--mistica-o2-new-grey80);
+        --mistica-color-neutralLowAlternative: var(--mistica-o2-new-grey80);
+        --mistica-color-textPrimary: var(--mistica-o2-new-grey30);
+        --mistica-color-textPrimaryInverse: var(--mistica-o2-new-grey30);
+        --mistica-color-textSecondary: var(--mistica-o2-new-grey45);
+        --mistica-color-textSecondaryInverse: var(--mistica-o2-new-grey45);
+        --mistica-color-success: var(--mistica-o2-new-o2Green);
+        --mistica-color-warning: var(--mistica-o2-new-o2Orange);
+        --mistica-color-error: var(--mistica-o2-new-o2Red45);
+        --mistica-color-textError: var(--mistica-o2-new-o2Red45);
+        --mistica-color-textErrorInverse: var(--mistica-o2-new-o2Red45);
+        --mistica-color-promo: var(--mistica-o2-new-o2Pink);
+        --mistica-color-highlight: var(--mistica-o2-new-o2Pink);
+        --mistica-color-successLow: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-o2-new-o2Green40);
+        --mistica-color-warningHigh: var(--mistica-o2-new-o2Orange40);
+        --mistica-color-errorHigh: var(--mistica-o2-new-o2Red40);
+        --mistica-color-promoHigh: var(--mistica-o2-new-o2Pink30);
+        --mistica-color-successHighInverse: var(--mistica-o2-new-o2Green80);
+        --mistica-color-warningHighInverse: var(--mistica-o2-new-o2Orange75);
+        --mistica-color-errorHighInverse: var(--mistica-o2-new-o2Red65);
+        --mistica-color-promoHighInverse: var(--mistica-o2-new-o2Pink);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-o2-new-grey30);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-o2-new-grey45);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-new-grey45);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-grey30);
+        --mistica-color-textAppBar: var(--mistica-o2-new-grey45);
+        --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue40);
+        --mistica-color-customTabsBackground: var(--mistica-o2-new-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink);
+        --mistica-color-tagTextActive: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-tagTextInactive: var(--mistica-o2-new-grey40);
+        --mistica-color-tagTextSuccess: var(--mistica-o2-new-o2Green);
+        --mistica-color-tagTextWarning: var(--mistica-o2-new-o2Orange);
+        --mistica-color-tagTextError: var(--mistica-o2-new-o2Red45);
+        --mistica-color-tagBackgroundPromo: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-o2-new-raw-black), 0) 0%,
+            rgba(var(--mistica-o2-new-raw-black), 0.4) 30%,
+            rgba(var(--mistica-o2-new-raw-black), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='o2-new'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-o2-new-white);
+        --mistica-color-backgroundAlternative: var(--mistica-o2-new-grey20);
+        --mistica-color-backgroundBrand: linear-gradient(
+            180deg,
+            var(--mistica-o2-new-darkBlue) 0%,
+            var(--mistica-o2-new-beyondBlue) 64%,
+            var(--mistica-o2-new-beyondBlue45) 100%
+        );
+        --mistica-color-backgroundBrandSecondary: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-backgroundContainer: var(--mistica-o2-new-white);
+        --mistica-color-backgroundContainerError: var(--mistica-o2-new-o2Red10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.05);
+        --mistica-color-backgroundContainerBrand: linear-gradient(
+            180deg,
+            var(--mistica-o2-new-darkBlue) 0%,
+            var(--mistica-o2-new-beyondBlue) 64%,
+            var(--mistica-o2-new-beyondBlue45) 100%
+        );
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.4);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-o2-new-grey20);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-new-raw-black), 0.6);
+        --mistica-color-backgroundSkeleton: var(--mistica-o2-new-grey30);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-backgroundBrandTop: var(--mistica-o2-new-darkBlue);
+        --mistica-color-backgroundBrandBottom: var(--mistica-o2-new-beyondBlue45);
+        --mistica-color-appBarBackground: var(--mistica-o2-new-white);
+        --mistica-color-navigationBarBackground: var(--mistica-o2-new-darkBlue);
+        --mistica-color-skeletonWave: var(--mistica-o2-new-grey30);
+        --mistica-color-borderLow: var(--mistica-o2-new-grey20);
+        --mistica-color-border: var(--mistica-o2-new-grey30);
+        --mistica-color-borderHigh: var(--mistica-o2-new-grey80);
+        --mistica-color-borderSelected: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-new-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-o2-new-o2Red60);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-new-o2Red65);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-new-o2Red65);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-o2-new-o2Red10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-o2-new-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-o2-new-o2Red10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-new-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-new-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-new-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-o2-new-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-textButtonSecondary: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-new-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-new-white);
+        --mistica-color-textLink: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-textLinkInverse: var(--mistica-o2-new-white);
+        --mistica-color-textLinkDanger: var(--mistica-o2-new-o2Red65);
+        --mistica-color-textLinkSnackbar: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-textActivated: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-textBrand: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-control: var(--mistica-o2-new-grey45);
+        --mistica-color-controlActivated: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-controlInverse: var(--mistica-o2-new-white);
+        --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
+        --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
+        --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+        --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
+        --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
+        --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+        --mistica-color-badge: var(--mistica-o2-new-o2Red65);
+        --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
+        --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);
+        --mistica-color-divider: var(--mistica-o2-new-grey30);
+        --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-brand: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-brandHigh: var(--mistica-o2-new-beyondBlue70);
+        --mistica-color-inverse: var(--mistica-o2-new-white);
+        --mistica-color-neutralHigh: var(--mistica-o2-new-black);
+        --mistica-color-neutralMedium: var(--mistica-o2-new-grey60);
+        --mistica-color-neutralMediumInverse: var(--mistica-o2-new-grey60);
+        --mistica-color-neutralLow: var(--mistica-o2-new-grey20);
+        --mistica-color-neutralLowAlternative: var(--mistica-o2-new-grey30);
+        --mistica-color-textPrimary: var(--mistica-o2-new-black);
+        --mistica-color-textPrimaryInverse: var(--mistica-o2-new-white);
+        --mistica-color-textSecondary: var(--mistica-o2-new-grey60);
+        --mistica-color-textSecondaryInverse: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-success: var(--mistica-o2-new-o2Green);
+        --mistica-color-warning: var(--mistica-o2-new-o2Orange);
+        --mistica-color-error: var(--mistica-o2-new-o2Red65);
+        --mistica-color-textError: var(--mistica-o2-new-o2Red65);
+        --mistica-color-textErrorInverse: var(--mistica-o2-new-white);
+        --mistica-color-promo: var(--mistica-o2-new-o2Pink);
+        --mistica-color-highlight: var(--mistica-o2-new-o2Pink80);
+        --mistica-color-successLow: var(--mistica-o2-new-o2Green10);
+        --mistica-color-warningLow: var(--mistica-o2-new-o2Orange10);
+        --mistica-color-errorLow: var(--mistica-o2-new-o2Red10);
+        --mistica-color-promoLow: var(--mistica-o2-new-o2Pink15);
+        --mistica-color-brandLow: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-successHigh: var(--mistica-o2-new-o2Green80);
+        --mistica-color-warningHigh: var(--mistica-o2-new-o2Orange75);
+        --mistica-color-errorHigh: var(--mistica-o2-new-o2Red65);
+        --mistica-color-promoHigh: var(--mistica-o2-new-o2Pink80);
+        --mistica-color-successHighInverse: var(--mistica-o2-new-o2Green80);
+        --mistica-color-warningHighInverse: var(--mistica-o2-new-o2Orange75);
+        --mistica-color-errorHighInverse: var(--mistica-o2-new-o2Red65);
+        --mistica-color-promoHighInverse: var(--mistica-o2-new-o2Pink80);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-o2-new-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-new-beyondBlue30);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-o2-new-white);
+        --mistica-color-textAppBar: var(--mistica-o2-new-grey60);
+        --mistica-color-textAppBarSelected: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-customTabsBackground: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-tagTextPromo: var(--mistica-o2-new-o2Pink80);
+        --mistica-color-tagTextActive: var(--mistica-o2-new-beyondBlue);
+        --mistica-color-tagTextInactive: var(--mistica-o2-new-grey60);
+        --mistica-color-tagTextSuccess: var(--mistica-o2-new-o2Green80);
+        --mistica-color-tagTextWarning: var(--mistica-o2-new-o2Orange75);
+        --mistica-color-tagTextError: var(--mistica-o2-new-o2Red65);
+        --mistica-color-tagBackgroundPromo: var(--mistica-o2-new-o2Pink15);
+        --mistica-color-tagBackgroundActive: var(--mistica-o2-new-beyondBlue10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-o2-new-grey20);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-o2-new-o2Green10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-o2-new-o2Orange10);
+        --mistica-color-tagBackgroundError: var(--mistica-o2-new-o2Red10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-o2-new-raw-beyondBlue), 0) 0%,
+            rgba(var(--mistica-o2-new-raw-beyondBlue), 0.4) 30%,
+            rgba(var(--mistica-o2-new-raw-beyondBlue), 1) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='o2-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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/css/o2.css b/css/o2.css
new file mode 100644
index 0000000000..9119c0eac0
--- /dev/null
+++ b/css/o2.css
@@ -0,0 +1,686 @@
+[data-mistica-skin='o2'] {
+    /* Palette colors */
+    --mistica-o2-white: #ffffff;
+    --mistica-o2-grey1: #f6f6f6;
+    --mistica-o2-o2BluePrimary: #0019a5;
+    --mistica-o2-pepper10: #feebed;
+    --mistica-o2-o2BluePrimary70: #000066;
+    --mistica-o2-grey2: #eeeeee;
+    --mistica-o2-grey3: #dddddd;
+    --mistica-o2-grey5: #707070;
+    --mistica-o2-pepper: #f4364c;
+    --mistica-o2-pepper60: #c32b3d;
+    --mistica-o2-o2BluePrimary10: #e5e8f6;
+    --mistica-o2-o2BluePrimary30: #808cd2;
+    --mistica-o2-o2BluePrimary15: #ccd1ed;
+    --mistica-o2-grey6: #000033;
+    --mistica-o2-o2Green: #91c90e;
+    --mistica-o2-o2Orange: #ff7f41;
+    --mistica-o2-o2Purple: #952d98;
+    --mistica-o2-o2Pink: #e45dbf;
+    --mistica-o2-o2Green10: #f4fae7;
+    --mistica-o2-o2Orange10: #fff2ec;
+    --mistica-o2-o2Purple10: #f4eaf5;
+    --mistica-o2-o2Green80: #415a06;
+    --mistica-o2-o2Orange75: #a6522a;
+    --mistica-o2-grey4: #999999;
+    --mistica-o2-darkModeBlack: #191919;
+    --mistica-o2-darkModeGrey: #242424;
+    --mistica-o2-darkModeGrey6: #313235;
+    --mistica-o2-darkModeO2BluePrimary: #0020d6;
+    --mistica-o2-darkModeO2BluePrimaryDark: #000099;
+    --mistica-o2-o2BlueLight30: #c6e9f7;
+    --mistica-o2-o2Green40: #b2d956;
+    --mistica-o2-o2Orange40: #ffa57a;
+    --mistica-o2-pepper40: #ff7380;
+    --mistica-o2-o2Purple30: #ca9acb;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-o2-raw-darkModeBlack: 25, 25, 25;
+    --mistica-o2-raw-grey6: 0, 0, 51;
+    --mistica-o2-raw-white: 255, 255, 255;
+    --mistica-o2-raw-black: 0, 0, 0;
+    --mistica-o2-raw-darkModeGrey: 36, 36, 36;
+
+    /* Colors */
+    --mistica-color-background: var(--mistica-o2-white);
+    --mistica-color-backgroundAlternative: var(--mistica-o2-grey1);
+    --mistica-color-backgroundBrand: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-backgroundContainer: var(--mistica-o2-white);
+    --mistica-color-backgroundContainerError: var(--mistica-o2-pepper10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-o2-grey1);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-grey6), 0.6);
+    --mistica-color-backgroundSkeleton: var(--mistica-o2-grey2);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-backgroundBrandTop: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-backgroundBrandBottom: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-appBarBackground: var(--mistica-o2-white);
+    --mistica-color-navigationBarBackground: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-skeletonWave: var(--mistica-o2-grey2);
+    --mistica-color-borderLow: var(--mistica-o2-grey1);
+    --mistica-color-border: var(--mistica-o2-grey3);
+    --mistica-color-borderHigh: var(--mistica-o2-grey5);
+    --mistica-color-borderSelected: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-o2-pepper);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-pepper60);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-pepper60);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-o2-pepper10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-o2-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-o2-pepper10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-o2-o2BluePrimary10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-o2BluePrimary10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-o2-o2BluePrimary10);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-o2-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-textButtonSecondary: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-white);
+    --mistica-color-textLink: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-textLinkInverse: var(--mistica-o2-white);
+    --mistica-color-textLinkDanger: var(--mistica-o2-pepper);
+    --mistica-color-textLinkSnackbar: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-control: var(--mistica-o2-grey3);
+    --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-controlInverse: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
+    --mistica-color-controlError: var(--mistica-o2-pepper);
+    --mistica-color-barTrack: var(--mistica-o2-grey3);
+    --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
+    --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
+    --mistica-color-iosControlKnob: var(--mistica-o2-white);
+    --mistica-color-divider: var(--mistica-o2-grey2);
+    --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-badge: var(--mistica-o2-pepper60);
+    --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
+    --mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);
+    --mistica-color-brand: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-brandHigh: var(--mistica-o2-o2BluePrimary70);
+    --mistica-color-inverse: var(--mistica-o2-white);
+    --mistica-color-neutralHigh: var(--mistica-o2-grey6);
+    --mistica-color-neutralMedium: var(--mistica-o2-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-o2-grey5);
+    --mistica-color-neutralLow: var(--mistica-o2-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-o2-grey2);
+    --mistica-color-textPrimary: var(--mistica-o2-grey6);
+    --mistica-color-textPrimaryInverse: var(--mistica-o2-white);
+    --mistica-color-textSecondary: var(--mistica-o2-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-o2-o2BluePrimary15);
+    --mistica-color-success: var(--mistica-o2-o2Green);
+    --mistica-color-warning: var(--mistica-o2-o2Orange);
+    --mistica-color-error: var(--mistica-o2-pepper);
+    --mistica-color-textError: var(--mistica-o2-pepper);
+    --mistica-color-textErrorInverse: var(--mistica-o2-white);
+    --mistica-color-promo: var(--mistica-o2-o2Purple);
+    --mistica-color-highlight: var(--mistica-o2-o2Pink);
+    --mistica-color-successLow: var(--mistica-o2-o2Green10);
+    --mistica-color-warningLow: var(--mistica-o2-o2Orange10);
+    --mistica-color-errorLow: var(--mistica-o2-pepper10);
+    --mistica-color-promoLow: var(--mistica-o2-o2Purple10);
+    --mistica-color-brandLow: var(--mistica-o2-o2BluePrimary10);
+    --mistica-color-successHigh: var(--mistica-o2-o2Green80);
+    --mistica-color-warningHigh: var(--mistica-o2-o2Orange75);
+    --mistica-color-errorHigh: var(--mistica-o2-pepper60);
+    --mistica-color-promoHigh: var(--mistica-o2-o2Purple);
+    --mistica-color-successHighInverse: var(--mistica-o2-o2Green80);
+    --mistica-color-warningHighInverse: var(--mistica-o2-o2Orange75);
+    --mistica-color-errorHighInverse: var(--mistica-o2-pepper60);
+    --mistica-color-promoHighInverse: var(--mistica-o2-o2Purple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-o2-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-o2-white);
+    --mistica-color-textAppBar: var(--mistica-o2-grey4);
+    --mistica-color-textAppBarSelected: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-customTabsBackground: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple);
+    --mistica-color-tagTextActive: var(--mistica-o2-o2BluePrimary);
+    --mistica-color-tagTextInactive: var(--mistica-o2-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-o2-o2Green80);
+    --mistica-color-tagTextWarning: var(--mistica-o2-o2Orange75);
+    --mistica-color-tagTextError: var(--mistica-o2-pepper60);
+    --mistica-color-tagBackgroundPromo: var(--mistica-o2-o2Purple10);
+    --mistica-color-tagBackgroundActive: var(--mistica-o2-o2BluePrimary10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-o2-grey1);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-o2-o2Green10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-o2-o2Orange10);
+    --mistica-color-tagBackgroundError: var(--mistica-o2-pepper10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-o2-raw-black), 0) 0%,
+        rgba(var(--mistica-o2-raw-black), 0.4) 30%,
+        rgba(var(--mistica-o2-raw-black), 0.7) 100%
+    );
+
+    /* 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-indicator: 999px;
+    --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;
+
+    /* 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: 300;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 300;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 300;
+    --mistica-font-size-8: 2rem;
+    --mistica-line-height-8: 2.5rem;
+    --mistica-font-weight-8: 300;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 300;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 300;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 300;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='o2'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-o2-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-o2-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-o2-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-o2-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-o2-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-o2-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-o2-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-o2-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-o2-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-o2-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-o2-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-o2-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-o2-grey5);
+    --mistica-color-borderLow: var(--mistica-o2-darkModeBlack);
+    --mistica-color-border: var(--mistica-o2-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-o2-grey5);
+    --mistica-color-borderSelected: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-o2-pepper);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-pepper60);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-pepper60);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-o2-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-o2-darkModeO2BluePrimary);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-darkModeO2BluePrimary);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-darkModeO2BluePrimaryDark);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-darkModeO2BluePrimaryDark);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-darkModeO2BluePrimaryDark);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-o2-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-o2-white);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-o2-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-o2-grey2);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-grey2);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-grey2);
+    --mistica-color-textButtonSecondary: var(--mistica-o2-grey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-o2-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-grey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-grey2);
+    --mistica-color-textLink: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textLinkInverse: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textLinkDanger: var(--mistica-o2-pepper);
+    --mistica-color-textLinkSnackbar: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-control: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-controlInverse: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-controlError: var(--mistica-o2-pepper);
+    --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
+    --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
+    --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+    --mistica-color-badge: var(--mistica-o2-pepper60);
+    --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
+    --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-divider: rgba(var(--mistica-o2-raw-white), 0.05);
+    --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-o2-darkModeBlack);
+    --mistica-color-brand: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-brandHigh: rgba(var(--mistica-o2-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-o2-grey2);
+    --mistica-color-neutralHigh: var(--mistica-o2-grey2);
+    --mistica-color-neutralMedium: var(--mistica-o2-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-o2-grey5);
+    --mistica-color-neutralLow: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-o2-grey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-o2-grey2);
+    --mistica-color-textSecondary: var(--mistica-o2-grey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-o2-grey4);
+    --mistica-color-success: var(--mistica-o2-o2Green);
+    --mistica-color-warning: var(--mistica-o2-o2Orange);
+    --mistica-color-error: var(--mistica-o2-pepper);
+    --mistica-color-textError: var(--mistica-o2-pepper);
+    --mistica-color-textErrorInverse: var(--mistica-o2-pepper);
+    --mistica-color-promo: var(--mistica-o2-o2Purple);
+    --mistica-color-highlight: var(--mistica-o2-o2Pink);
+    --mistica-color-successLow: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-o2-o2Green40);
+    --mistica-color-warningHigh: var(--mistica-o2-o2Orange40);
+    --mistica-color-errorHigh: var(--mistica-o2-pepper40);
+    --mistica-color-promoHigh: var(--mistica-o2-o2Purple30);
+    --mistica-color-successHighInverse: var(--mistica-o2-o2Green80);
+    --mistica-color-warningHighInverse: var(--mistica-o2-o2Orange75);
+    --mistica-color-errorHighInverse: var(--mistica-o2-pepper60);
+    --mistica-color-promoHighInverse: var(--mistica-o2-o2Purple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-o2-grey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-o2-grey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-grey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-o2-grey2);
+    --mistica-color-textAppBar: var(--mistica-o2-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-o2-grey2);
+    --mistica-color-customTabsBackground: var(--mistica-o2-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple30);
+    --mistica-color-tagTextActive: var(--mistica-o2-o2BluePrimary30);
+    --mistica-color-tagTextInactive: var(--mistica-o2-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-o2-o2Green40);
+    --mistica-color-tagTextWarning: var(--mistica-o2-o2Orange40);
+    --mistica-color-tagTextError: var(--mistica-o2-pepper40);
+    --mistica-color-tagBackgroundPromo: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-o2-raw-black), 0) 0%,
+        rgba(var(--mistica-o2-raw-black), 0.4) 30%,
+        rgba(var(--mistica-o2-raw-black), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='o2'] {
+        --mistica-color-background: var(--mistica-o2-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-o2-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-o2-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-o2-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-o2-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-o2-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-o2-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-o2-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-o2-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-o2-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-o2-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-o2-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-o2-grey5);
+        --mistica-color-borderLow: var(--mistica-o2-darkModeBlack);
+        --mistica-color-border: var(--mistica-o2-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-o2-grey5);
+        --mistica-color-borderSelected: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-o2-pepper);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-pepper60);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-pepper60);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-o2-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-o2-darkModeO2BluePrimary);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-darkModeO2BluePrimary);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-darkModeO2BluePrimaryDark);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-darkModeO2BluePrimaryDark);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-darkModeO2BluePrimaryDark);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-o2-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-o2-white);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-o2-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-o2-grey2);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-grey2);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-grey2);
+        --mistica-color-textButtonSecondary: var(--mistica-o2-grey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-o2-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-grey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-grey2);
+        --mistica-color-textLink: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textLinkInverse: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textLinkDanger: var(--mistica-o2-pepper);
+        --mistica-color-textLinkSnackbar: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-control: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-controlInverse: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-controlError: var(--mistica-o2-pepper);
+        --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
+        --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
+        --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+        --mistica-color-badge: var(--mistica-o2-pepper60);
+        --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
+        --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-divider: rgba(var(--mistica-o2-raw-white), 0.05);
+        --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-o2-darkModeBlack);
+        --mistica-color-brand: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-brandHigh: rgba(var(--mistica-o2-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-o2-grey2);
+        --mistica-color-neutralHigh: var(--mistica-o2-grey2);
+        --mistica-color-neutralMedium: var(--mistica-o2-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-o2-grey5);
+        --mistica-color-neutralLow: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-o2-grey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-o2-grey2);
+        --mistica-color-textSecondary: var(--mistica-o2-grey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-o2-grey4);
+        --mistica-color-success: var(--mistica-o2-o2Green);
+        --mistica-color-warning: var(--mistica-o2-o2Orange);
+        --mistica-color-error: var(--mistica-o2-pepper);
+        --mistica-color-textError: var(--mistica-o2-pepper);
+        --mistica-color-textErrorInverse: var(--mistica-o2-pepper);
+        --mistica-color-promo: var(--mistica-o2-o2Purple);
+        --mistica-color-highlight: var(--mistica-o2-o2Pink);
+        --mistica-color-successLow: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-o2-o2Green40);
+        --mistica-color-warningHigh: var(--mistica-o2-o2Orange40);
+        --mistica-color-errorHigh: var(--mistica-o2-pepper40);
+        --mistica-color-promoHigh: var(--mistica-o2-o2Purple30);
+        --mistica-color-successHighInverse: var(--mistica-o2-o2Green80);
+        --mistica-color-warningHighInverse: var(--mistica-o2-o2Orange75);
+        --mistica-color-errorHighInverse: var(--mistica-o2-pepper60);
+        --mistica-color-promoHighInverse: var(--mistica-o2-o2Purple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-o2-grey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-o2-grey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-grey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-o2-grey2);
+        --mistica-color-textAppBar: var(--mistica-o2-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-o2-grey2);
+        --mistica-color-customTabsBackground: var(--mistica-o2-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple30);
+        --mistica-color-tagTextActive: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-tagTextInactive: var(--mistica-o2-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-o2-o2Green40);
+        --mistica-color-tagTextWarning: var(--mistica-o2-o2Orange40);
+        --mistica-color-tagTextError: var(--mistica-o2-pepper40);
+        --mistica-color-tagBackgroundPromo: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-o2-raw-black), 0) 0%,
+            rgba(var(--mistica-o2-raw-black), 0.4) 30%,
+            rgba(var(--mistica-o2-raw-black), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='o2'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-o2-white);
+        --mistica-color-backgroundAlternative: var(--mistica-o2-grey1);
+        --mistica-color-backgroundBrand: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-backgroundContainer: var(--mistica-o2-white);
+        --mistica-color-backgroundContainerError: var(--mistica-o2-pepper10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.4);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-o2-grey1);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-o2-raw-grey6), 0.6);
+        --mistica-color-backgroundSkeleton: var(--mistica-o2-grey2);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-backgroundBrandTop: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-backgroundBrandBottom: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-appBarBackground: var(--mistica-o2-white);
+        --mistica-color-navigationBarBackground: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-skeletonWave: var(--mistica-o2-grey2);
+        --mistica-color-borderLow: var(--mistica-o2-grey1);
+        --mistica-color-border: var(--mistica-o2-grey3);
+        --mistica-color-borderHigh: var(--mistica-o2-grey5);
+        --mistica-color-borderSelected: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-o2-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-o2-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-o2-pepper);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-o2-pepper60);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-o2-pepper60);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-o2-pepper10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-o2-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-o2-pepper10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-o2-o2BluePrimary10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-o2-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-o2-o2BluePrimary10);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-o2-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-o2-o2BluePrimary10);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-o2-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-o2-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-o2-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-textButtonSecondary: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-o2-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-o2-white);
+        --mistica-color-textLink: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-textLinkInverse: var(--mistica-o2-white);
+        --mistica-color-textLinkDanger: var(--mistica-o2-pepper);
+        --mistica-color-textLinkSnackbar: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textActivated: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-textBrand: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-control: var(--mistica-o2-grey3);
+        --mistica-color-controlActivated: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-controlInverse: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
+        --mistica-color-controlError: var(--mistica-o2-pepper);
+        --mistica-color-barTrack: var(--mistica-o2-grey3);
+        --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
+        --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
+        --mistica-color-iosControlKnob: var(--mistica-o2-white);
+        --mistica-color-badge: var(--mistica-o2-pepper60);
+        --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
+        --mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);
+        --mistica-color-divider: var(--mistica-o2-grey2);
+        --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-brand: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-brandHigh: var(--mistica-o2-o2BluePrimary70);
+        --mistica-color-inverse: var(--mistica-o2-white);
+        --mistica-color-neutralHigh: var(--mistica-o2-grey6);
+        --mistica-color-neutralMedium: var(--mistica-o2-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-o2-grey5);
+        --mistica-color-neutralLow: var(--mistica-o2-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-o2-grey2);
+        --mistica-color-textPrimary: var(--mistica-o2-grey6);
+        --mistica-color-textPrimaryInverse: var(--mistica-o2-white);
+        --mistica-color-textSecondary: var(--mistica-o2-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-o2-o2BluePrimary15);
+        --mistica-color-success: var(--mistica-o2-o2Green);
+        --mistica-color-warning: var(--mistica-o2-o2Orange);
+        --mistica-color-error: var(--mistica-o2-pepper);
+        --mistica-color-textError: var(--mistica-o2-pepper);
+        --mistica-color-textErrorInverse: var(--mistica-o2-white);
+        --mistica-color-promo: var(--mistica-o2-o2Purple);
+        --mistica-color-highlight: var(--mistica-o2-o2Pink);
+        --mistica-color-successLow: var(--mistica-o2-o2Green10);
+        --mistica-color-warningLow: var(--mistica-o2-o2Orange10);
+        --mistica-color-errorLow: var(--mistica-o2-pepper10);
+        --mistica-color-promoLow: var(--mistica-o2-o2Purple10);
+        --mistica-color-brandLow: var(--mistica-o2-o2BluePrimary10);
+        --mistica-color-successHigh: var(--mistica-o2-o2Green80);
+        --mistica-color-warningHigh: var(--mistica-o2-o2Orange75);
+        --mistica-color-errorHigh: var(--mistica-o2-pepper60);
+        --mistica-color-promoHigh: var(--mistica-o2-o2Purple);
+        --mistica-color-successHighInverse: var(--mistica-o2-o2Green80);
+        --mistica-color-warningHighInverse: var(--mistica-o2-o2Orange75);
+        --mistica-color-errorHighInverse: var(--mistica-o2-pepper60);
+        --mistica-color-promoHighInverse: var(--mistica-o2-o2Purple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-o2-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-o2-o2BluePrimary30);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-o2-white);
+        --mistica-color-textAppBar: var(--mistica-o2-grey4);
+        --mistica-color-textAppBarSelected: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-customTabsBackground: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-tagTextPromo: var(--mistica-o2-o2Purple);
+        --mistica-color-tagTextActive: var(--mistica-o2-o2BluePrimary);
+        --mistica-color-tagTextInactive: var(--mistica-o2-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-o2-o2Green80);
+        --mistica-color-tagTextWarning: var(--mistica-o2-o2Orange75);
+        --mistica-color-tagTextError: var(--mistica-o2-pepper60);
+        --mistica-color-tagBackgroundPromo: var(--mistica-o2-o2Purple10);
+        --mistica-color-tagBackgroundActive: var(--mistica-o2-o2BluePrimary10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-o2-grey1);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-o2-o2Green10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-o2-o2Orange10);
+        --mistica-color-tagBackgroundError: var(--mistica-o2-pepper10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-o2-raw-black), 0) 0%,
+            rgba(var(--mistica-o2-raw-black), 0.4) 30%,
+            rgba(var(--mistica-o2-raw-black), 0.7) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='o2'] {
+        /* 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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/css/telefonica.css b/css/telefonica.css
new file mode 100644
index 0000000000..6ee57eec93
--- /dev/null
+++ b/css/telefonica.css
@@ -0,0 +1,705 @@
+[data-mistica-skin='telefonica'] {
+    /* Palette colors */
+    --mistica-telefonica-white: #ffffff;
+    --mistica-telefonica-coral10: #fdf0ef;
+    --mistica-telefonica-telefonicaBlue: #0066ff;
+    --mistica-telefonica-telefonicaBlue70: #0356c9;
+    --mistica-telefonica-grey1: #f2f4ff;
+    --mistica-telefonica-grey2: #d1d5e4;
+    --mistica-telefonica-grey5: #6e7894;
+    --mistica-telefonica-coral: #e66c64;
+    --mistica-telefonica-coral80: #912c31;
+    --mistica-telefonica-telefonicaBlue30: #80b3ff;
+    --mistica-telefonica-telefonicaBlue10: #e5f0ff;
+    --mistica-telefonica-grey3: #b0b6ca;
+    --mistica-telefonica-coral70: #d50000;
+    --mistica-telefonica-grey9: #031a34;
+    --mistica-telefonica-turquoise: #59c2c9;
+    --mistica-telefonica-ambar: #eac344;
+    --mistica-telefonica-orchid: #c466ef;
+    --mistica-telefonica-coral40: #e3a19a;
+    --mistica-telefonica-turquoise10: #eef9fa;
+    --mistica-telefonica-ambar10: #fdf9ec;
+    --mistica-telefonica-orchid10: #f9f0fd;
+    --mistica-telefonica-turquoise70: #3e888d;
+    --mistica-telefonica-ambar70: #69581f;
+    --mistica-telefonica-orchid70: #8a1a93;
+    --mistica-telefonica-grey4: #8f97af;
+    --mistica-telefonica-darkModeBlack: #191919;
+    --mistica-telefonica-darkModeGrey: #242424;
+    --mistica-telefonica-grey6: #58617a;
+    --mistica-telefonica-darkModeGrey6: #313235;
+    --mistica-telefonica-telefonicaBlue20: #b2d1ff;
+    --mistica-telefonica-grey8: #2b3447;
+    --mistica-telefonica-turquoise40: #8bd4d9;
+    --mistica-telefonica-ambar40: #f0d57c;
+    --mistica-telefonica-orchid40: #d694f4;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-telefonica-raw-telefonicaBlue: 0, 102, 255;
+    --mistica-telefonica-raw-darkModeBlack: 25, 25, 25;
+    --mistica-telefonica-raw-grey6: 88, 97, 122;
+    --mistica-telefonica-raw-white: 255, 255, 255;
+    --mistica-telefonica-raw-black: 0, 0, 0;
+    --mistica-telefonica-raw-darkModeGrey: 36, 36, 36;
+
+    /* Colors */
+    --mistica-color-appBarBackground: var(--mistica-telefonica-white);
+    --mistica-color-background: var(--mistica-telefonica-white);
+    --mistica-color-backgroundContainer: var(--mistica-telefonica-white);
+    --mistica-color-backgroundContainerError: var(--mistica-telefonica-coral10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-telefonicaBlue), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-grey1);
+    --mistica-color-backgroundBrand: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-grey6), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey2);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-navigationBarBackground: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-backgroundAlternative: var(--mistica-telefonica-grey1);
+    --mistica-color-backgroundBrandTop: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-skeletonWave: var(--mistica-telefonica-grey2);
+    --mistica-color-borderLow: var(--mistica-telefonica-grey1);
+    --mistica-color-border: var(--mistica-telefonica-grey2);
+    --mistica-color-borderHigh: var(--mistica-telefonica-grey5);
+    --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-telefonica-coral80);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-telefonica-coral10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-telefonica-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-telefonica-coral10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-telefonica-grey1);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-telefonica-telefonicaBlue30);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-telefonica-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-telefonica-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-telefonica-raw-white), 0.1);
+    --mistica-color-textButtonPrimary: var(--mistica-telefonica-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textButtonSecondary: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-telefonica-white);
+    --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textLinkInverse: var(--mistica-telefonica-white);
+    --mistica-color-textLinkDanger: var(--mistica-telefonica-coral);
+    --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30);
+    --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-control: var(--mistica-telefonica-grey3);
+    --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
+    --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
+    --mistica-color-controlError: var(--mistica-telefonica-coral);
+    --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+    --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
+    --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
+    --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+    --mistica-color-divider: var(--mistica-telefonica-grey2);
+    --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-badge: var(--mistica-telefonica-coral70);
+    --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral);
+    --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey9);
+    --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-brandHigh: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-inverse: var(--mistica-telefonica-white);
+    --mistica-color-neutralHigh: var(--mistica-telefonica-grey9);
+    --mistica-color-neutralMedium: var(--mistica-telefonica-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5);
+    --mistica-color-neutralLow: var(--mistica-telefonica-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-telefonica-grey2);
+    --mistica-color-textPrimary: var(--mistica-telefonica-grey9);
+    --mistica-color-textPrimaryInverse: var(--mistica-telefonica-white);
+    --mistica-color-textSecondary: var(--mistica-telefonica-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-error: var(--mistica-telefonica-coral);
+    --mistica-color-textError: var(--mistica-telefonica-coral);
+    --mistica-color-textErrorInverse: var(--mistica-telefonica-white);
+    --mistica-color-success: var(--mistica-telefonica-turquoise);
+    --mistica-color-warning: var(--mistica-telefonica-ambar);
+    --mistica-color-promo: var(--mistica-telefonica-orchid);
+    --mistica-color-highlight: var(--mistica-telefonica-coral40);
+    --mistica-color-successLow: var(--mistica-telefonica-turquoise10);
+    --mistica-color-warningLow: var(--mistica-telefonica-ambar10);
+    --mistica-color-errorLow: var(--mistica-telefonica-coral10);
+    --mistica-color-promoLow: var(--mistica-telefonica-orchid10);
+    --mistica-color-brandLow: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-successHigh: var(--mistica-telefonica-turquoise70);
+    --mistica-color-warningHigh: var(--mistica-telefonica-ambar70);
+    --mistica-color-errorHigh: var(--mistica-telefonica-coral70);
+    --mistica-color-promoHigh: var(--mistica-telefonica-orchid70);
+    --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70);
+    --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70);
+    --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70);
+    --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey1);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey1);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white);
+    --mistica-color-textAppBar: var(--mistica-telefonica-grey4);
+    --mistica-color-textAppBarSelected: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-customTabsBackground: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid70);
+    --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise70);
+    --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar70);
+    --mistica-color-tagTextError: var(--mistica-telefonica-coral70);
+    --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-orchid10);
+    --mistica-color-tagBackgroundActive: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-grey1);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-turquoise10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-ambar10);
+    --mistica-color-tagBackgroundError: var(--mistica-telefonica-coral10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-telefonica-raw-black), 0) 0%,
+        rgba(var(--mistica-telefonica-raw-black), 0.4) 30%,
+        rgba(var(--mistica-telefonica-raw-black), 0.7) 100%
+    );
+
+    /* Border radius */
+    --mistica-border-radius-avatar: 50%;
+    --mistica-border-radius-bar: 0px;
+    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-checkbox: 0px;
+    --mistica-border-radius-container: 0px;
+    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-input: 0px;
+    --mistica-border-radius-legacyDisplay: 0px;
+    --mistica-border-radius-popup: 0px;
+    --mistica-border-radius-sheet: 0px;
+    --mistica-border-radius-mediaSmall: 0px;
+
+    /* 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: 400;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 400;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 400;
+    --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: 400;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 400;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='telefonica'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-grey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-telefonica-grey5);
+    --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-border: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-telefonica-grey5);
+    --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-telefonica-coral80);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-telefonica-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+        var(--mistica-telefonica-raw-white),
+        0.08
+    );
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-telefonica-telefonicaBlue70);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-telefonica-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-telefonica-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-telefonica-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-telefonica-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-telefonica-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-telefonica-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-telefonica-grey2);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-grey2);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-telefonica-grey2);
+    --mistica-color-textButtonSecondary: var(--mistica-telefonica-grey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-telefonica-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-grey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-telefonica-grey2);
+    --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textLinkInverse: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textLinkDanger: var(--mistica-telefonica-coral);
+    --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30);
+    --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-control: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-controlInverse: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-controlError: var(--mistica-telefonica-coral);
+    --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
+    --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
+    --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+    --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
+    --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-badge: var(--mistica-telefonica-coral70);
+    --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral);
+    --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey8);
+    --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-brandHigh: rgba(var(--mistica-telefonica-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-telefonica-grey2);
+    --mistica-color-neutralHigh: var(--mistica-telefonica-grey2);
+    --mistica-color-neutralMedium: var(--mistica-telefonica-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5);
+    --mistica-color-neutralLow: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-telefonica-grey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-telefonica-grey2);
+    --mistica-color-textSecondary: var(--mistica-telefonica-grey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-telefonica-grey4);
+    --mistica-color-error: var(--mistica-telefonica-coral);
+    --mistica-color-textError: var(--mistica-telefonica-coral);
+    --mistica-color-textErrorInverse: var(--mistica-telefonica-coral);
+    --mistica-color-success: var(--mistica-telefonica-turquoise);
+    --mistica-color-warning: var(--mistica-telefonica-ambar);
+    --mistica-color-promo: var(--mistica-telefonica-orchid);
+    --mistica-color-highlight: var(--mistica-telefonica-coral40);
+    --mistica-color-successLow: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-telefonica-turquoise40);
+    --mistica-color-warningHigh: var(--mistica-telefonica-ambar40);
+    --mistica-color-errorHigh: var(--mistica-telefonica-coral40);
+    --mistica-color-promoHigh: var(--mistica-telefonica-orchid40);
+    --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70);
+    --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70);
+    --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70);
+    --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-grey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-grey2);
+    --mistica-color-textAppBar: var(--mistica-telefonica-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-telefonica-grey2);
+    --mistica-color-customTabsBackground: var(--mistica-telefonica-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid40);
+    --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue);
+    --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise40);
+    --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar40);
+    --mistica-color-tagTextError: var(--mistica-telefonica-coral40);
+    --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-telefonica-raw-black), 0) 0%,
+        rgba(var(--mistica-telefonica-raw-black), 0.4) 30%,
+        rgba(var(--mistica-telefonica-raw-black), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='telefonica'] {
+        --mistica-color-background: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-grey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-telefonica-grey5);
+        --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-border: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-telefonica-grey5);
+        --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-telefonica-coral80);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-telefonica-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+            var(--mistica-telefonica-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-telefonica-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-telefonica-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-telefonica-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-telefonica-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(
+            var(--mistica-telefonica-raw-white),
+            0.15
+        );
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(
+            var(--mistica-telefonica-raw-white),
+            0.15
+        );
+        --mistica-color-textButtonPrimary: var(--mistica-telefonica-grey2);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-grey2);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-telefonica-grey2);
+        --mistica-color-textButtonSecondary: var(--mistica-telefonica-grey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-telefonica-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-grey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-telefonica-grey2);
+        --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textLinkInverse: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textLinkDanger: var(--mistica-telefonica-coral);
+        --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30);
+        --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-control: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-controlInverse: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-controlError: var(--mistica-telefonica-coral);
+        --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
+        --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
+        --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+        --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
+        --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-badge: var(--mistica-telefonica-coral70);
+        --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral);
+        --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey8);
+        --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-brandHigh: rgba(var(--mistica-telefonica-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-telefonica-grey2);
+        --mistica-color-neutralHigh: var(--mistica-telefonica-grey2);
+        --mistica-color-neutralMedium: var(--mistica-telefonica-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5);
+        --mistica-color-neutralLow: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-telefonica-grey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-telefonica-grey2);
+        --mistica-color-textSecondary: var(--mistica-telefonica-grey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-telefonica-grey4);
+        --mistica-color-error: var(--mistica-telefonica-coral);
+        --mistica-color-textError: var(--mistica-telefonica-coral);
+        --mistica-color-textErrorInverse: var(--mistica-telefonica-coral);
+        --mistica-color-success: var(--mistica-telefonica-turquoise);
+        --mistica-color-warning: var(--mistica-telefonica-ambar);
+        --mistica-color-promo: var(--mistica-telefonica-orchid);
+        --mistica-color-highlight: var(--mistica-telefonica-coral40);
+        --mistica-color-successLow: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-telefonica-turquoise40);
+        --mistica-color-warningHigh: var(--mistica-telefonica-ambar40);
+        --mistica-color-errorHigh: var(--mistica-telefonica-coral40);
+        --mistica-color-promoHigh: var(--mistica-telefonica-orchid40);
+        --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70);
+        --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70);
+        --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70);
+        --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-grey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-grey2);
+        --mistica-color-textAppBar: var(--mistica-telefonica-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-telefonica-grey2);
+        --mistica-color-customTabsBackground: var(--mistica-telefonica-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid40);
+        --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise40);
+        --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar40);
+        --mistica-color-tagTextError: var(--mistica-telefonica-coral40);
+        --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-telefonica-raw-black), 0) 0%,
+            rgba(var(--mistica-telefonica-raw-black), 0.4) 30%,
+            rgba(var(--mistica-telefonica-raw-black), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='telefonica'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-telefonica-white);
+        --mistica-color-backgroundAlternative: var(--mistica-telefonica-grey1);
+        --mistica-color-backgroundBrand: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-backgroundContainer: var(--mistica-telefonica-white);
+        --mistica-color-backgroundContainerError: var(--mistica-telefonica-coral10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-telefonicaBlue), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(
+            var(--mistica-telefonica-raw-darkModeBlack),
+            0.4
+        );
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-grey1);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-grey6), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey2);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-backgroundBrandTop: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-appBarBackground: var(--mistica-telefonica-white);
+        --mistica-color-navigationBarBackground: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-skeletonWave: var(--mistica-telefonica-grey2);
+        --mistica-color-borderLow: var(--mistica-telefonica-grey1);
+        --mistica-color-border: var(--mistica-telefonica-grey2);
+        --mistica-color-borderHigh: var(--mistica-telefonica-grey5);
+        --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-telefonica-coral80);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-telefonica-coral10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-telefonica-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-telefonica-coral10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-telefonica-grey1);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-telefonica-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-telefonica-telefonicaBlue30);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-telefonica-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-telefonica-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(
+            var(--mistica-telefonica-raw-white),
+            0.1
+        );
+        --mistica-color-textButtonPrimary: var(--mistica-telefonica-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textButtonSecondary: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-telefonica-white);
+        --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textLinkInverse: var(--mistica-telefonica-white);
+        --mistica-color-textLinkDanger: var(--mistica-telefonica-coral);
+        --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30);
+        --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-control: var(--mistica-telefonica-grey3);
+        --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
+        --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
+        --mistica-color-controlError: var(--mistica-telefonica-coral);
+        --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+        --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
+        --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
+        --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+        --mistica-color-divider: var(--mistica-telefonica-grey2);
+        --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-badge: var(--mistica-telefonica-coral70);
+        --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral);
+        --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey9);
+        --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-brandHigh: var(--mistica-telefonica-telefonicaBlue70);
+        --mistica-color-inverse: var(--mistica-telefonica-white);
+        --mistica-color-neutralHigh: var(--mistica-telefonica-grey9);
+        --mistica-color-neutralMedium: var(--mistica-telefonica-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5);
+        --mistica-color-neutralLow: var(--mistica-telefonica-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-telefonica-grey2);
+        --mistica-color-textPrimary: var(--mistica-telefonica-grey9);
+        --mistica-color-textPrimaryInverse: var(--mistica-telefonica-white);
+        --mistica-color-textSecondary: var(--mistica-telefonica-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-error: var(--mistica-telefonica-coral);
+        --mistica-color-textError: var(--mistica-telefonica-coral);
+        --mistica-color-textErrorInverse: var(--mistica-telefonica-white);
+        --mistica-color-success: var(--mistica-telefonica-turquoise);
+        --mistica-color-warning: var(--mistica-telefonica-ambar);
+        --mistica-color-promo: var(--mistica-telefonica-orchid);
+        --mistica-color-highlight: var(--mistica-telefonica-coral40);
+        --mistica-color-successLow: var(--mistica-telefonica-turquoise10);
+        --mistica-color-warningLow: var(--mistica-telefonica-ambar10);
+        --mistica-color-errorLow: var(--mistica-telefonica-coral10);
+        --mistica-color-promoLow: var(--mistica-telefonica-orchid10);
+        --mistica-color-brandLow: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-successHigh: var(--mistica-telefonica-turquoise70);
+        --mistica-color-warningHigh: var(--mistica-telefonica-ambar70);
+        --mistica-color-errorHigh: var(--mistica-telefonica-coral70);
+        --mistica-color-promoHigh: var(--mistica-telefonica-orchid70);
+        --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70);
+        --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70);
+        --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70);
+        --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey1);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey1);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white);
+        --mistica-color-textAppBar: var(--mistica-telefonica-grey4);
+        --mistica-color-textAppBarSelected: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-customTabsBackground: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid70);
+        --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue);
+        --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise70);
+        --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar70);
+        --mistica-color-tagTextError: var(--mistica-telefonica-coral70);
+        --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-orchid10);
+        --mistica-color-tagBackgroundActive: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-grey1);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-turquoise10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-ambar10);
+        --mistica-color-tagBackgroundError: var(--mistica-telefonica-coral10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-telefonica-raw-black), 0) 0%,
+            rgba(var(--mistica-telefonica-raw-black), 0.4) 30%,
+            rgba(var(--mistica-telefonica-raw-black), 0.7) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='telefonica'] {
+        /* 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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/css/tu.css b/css/tu.css
new file mode 100644
index 0000000000..8abec81cd4
--- /dev/null
+++ b/css/tu.css
@@ -0,0 +1,689 @@
+[data-mistica-skin='tu'] {
+    /* Palette colors */
+    --mistica-tu-white: #ffffff;
+    --mistica-tu-red10: #faedeb;
+    --mistica-tu-primary: #2b3447;
+    --mistica-tu-primary80: #161a24;
+    --mistica-tu-grey1: #f2f4ff;
+    --mistica-tu-blue: #4343ff;
+    --mistica-tu-grey2: #d1d5e4;
+    --mistica-tu-primary65: #202735;
+    --mistica-tu-grey5: #6e7894;
+    --mistica-tu-red: #cb4d3a;
+    --mistica-tu-red55: #bb4736;
+    --mistica-tu-blue10: #ececff;
+    --mistica-tu-primary45: #555d6c;
+    --mistica-tu-blue70: #3232b9;
+    --mistica-tu-green40: #a1dfcf;
+    --mistica-tu-green: #00d19d;
+    --mistica-tu-primary15: #d5d6da;
+    --mistica-tu-grey9: #031a34;
+    --mistica-tu-grey6: #58617a;
+    --mistica-tu-grey3: #b0b6ca;
+    --mistica-tu-orange: #efe384;
+    --mistica-tu-red40: #db8275;
+    --mistica-tu-green10: #e5faf5;
+    --mistica-tu-orange20: #faf7da;
+    --mistica-tu-green75: #007d5e;
+    --mistica-tu-orange70: #958946;
+    --mistica-tu-red70: #8e3629;
+    --mistica-tu-darkModeBlack: #161a24;
+    --mistica-tu-darkModeGrey: #202735;
+    --mistica-tu-darkModeGrey6: #2b3447;
+    --mistica-tu-blue30: #a1a1ff;
+    --mistica-tu-red80: #5b231a;
+    --mistica-tu-grey4: #8f97af;
+    --mistica-tu-blue20: #c7c7ff;
+    --mistica-tu-orange55: #d5c77d;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-tu-raw-grey9: 3, 26, 52;
+    --mistica-tu-raw-primary: 43, 52, 71;
+    --mistica-tu-raw-white: 255, 255, 255;
+    --mistica-tu-raw-black: 0, 0, 0;
+    --mistica-tu-raw-darkModeGrey: 32, 39, 53;
+    --mistica-tu-raw-darkModeBlack: 22, 26, 36;
+    --mistica-tu-raw-grey2: 209, 213, 228;
+
+    /* Colors */
+    --mistica-color-appBarBackground: var(--mistica-tu-white);
+    --mistica-color-background: var(--mistica-tu-white);
+    --mistica-color-backgroundContainer: var(--mistica-tu-white);
+    --mistica-color-backgroundContainerError: var(--mistica-tu-red10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-tu-raw-grey9), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-tu-raw-grey9), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-tu-primary);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-tu-raw-grey9), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-tu-raw-grey9), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-tu-primary80);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-tu-grey1);
+    --mistica-color-backgroundBrand: var(--mistica-tu-primary);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-tu-blue);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-tu-raw-primary), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-tu-grey2);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-tu-primary65);
+    --mistica-color-navigationBarBackground: var(--mistica-tu-primary);
+    --mistica-color-backgroundAlternative: var(--mistica-tu-grey1);
+    --mistica-color-backgroundBrandTop: var(--mistica-tu-primary);
+    --mistica-color-backgroundBrandBottom: var(--mistica-tu-primary);
+    --mistica-color-skeletonWave: var(--mistica-tu-grey2);
+    --mistica-color-borderLow: var(--mistica-tu-grey1);
+    --mistica-color-border: var(--mistica-tu-grey2);
+    --mistica-color-borderHigh: var(--mistica-tu-grey5);
+    --mistica-color-borderSelected: var(--mistica-tu-blue);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-tu-raw-grey9), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-tu-raw-grey9), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-tu-red55);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red55);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-tu-red10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-tu-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-tu-red10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-tu-blue10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-tu-primary);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-tu-primary45);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-primary45);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.8);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-tu-blue);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-tu-blue70);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-tu-blue10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-tu-blue10);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-tu-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.1);
+    --mistica-color-textButtonPrimary: var(--mistica-tu-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-tu-primary);
+    --mistica-color-textButtonSecondary: var(--mistica-tu-blue);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-tu-blue70);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-tu-white);
+    --mistica-color-textLink: var(--mistica-tu-blue);
+    --mistica-color-textLinkInverse: var(--mistica-tu-white);
+    --mistica-color-textLinkDanger: var(--mistica-tu-red);
+    --mistica-color-textLinkSnackbar: var(--mistica-tu-white);
+    --mistica-color-textActivated: var(--mistica-tu-primary);
+    --mistica-color-textBrand: var(--mistica-tu-blue);
+    --mistica-color-control: var(--mistica-tu-grey5);
+    --mistica-color-controlActivated: var(--mistica-tu-primary);
+    --mistica-color-controlInverse: var(--mistica-tu-white);
+    --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
+    --mistica-color-controlError: var(--mistica-tu-red);
+    --mistica-color-barTrack: var(--mistica-tu-grey2);
+    --mistica-color-loadingBar: var(--mistica-tu-green40);
+    --mistica-color-loadingBarBackground: var(--mistica-tu-green);
+    --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
+    --mistica-color-iosControlKnob: var(--mistica-tu-white);
+    --mistica-color-divider: var(--mistica-tu-grey2);
+    --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-tu-primary);
+    --mistica-color-badge: var(--mistica-tu-blue);
+    --mistica-color-feedbackErrorBackground: var(--mistica-tu-red);
+    --mistica-color-feedbackInfoBackground: var(--mistica-tu-primary);
+    --mistica-color-brand: var(--mistica-tu-blue);
+    --mistica-color-brandHigh: var(--mistica-tu-blue70);
+    --mistica-color-inverse: var(--mistica-tu-white);
+    --mistica-color-neutralHigh: var(--mistica-tu-grey9);
+    --mistica-color-neutralMedium: var(--mistica-tu-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-tu-grey5);
+    --mistica-color-neutralLow: var(--mistica-tu-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-tu-grey2);
+    --mistica-color-textPrimary: var(--mistica-tu-grey9);
+    --mistica-color-textPrimaryInverse: var(--mistica-tu-white);
+    --mistica-color-textSecondary: var(--mistica-tu-grey6);
+    --mistica-color-textSecondaryInverse: var(--mistica-tu-grey3);
+    --mistica-color-error: var(--mistica-tu-red);
+    --mistica-color-textError: var(--mistica-tu-red);
+    --mistica-color-textErrorInverse: var(--mistica-tu-white);
+    --mistica-color-success: var(--mistica-tu-green);
+    --mistica-color-warning: var(--mistica-tu-orange);
+    --mistica-color-promo: var(--mistica-tu-blue);
+    --mistica-color-highlight: var(--mistica-tu-red40);
+    --mistica-color-successLow: var(--mistica-tu-green10);
+    --mistica-color-warningLow: var(--mistica-tu-orange20);
+    --mistica-color-errorLow: var(--mistica-tu-red10);
+    --mistica-color-promoLow: var(--mistica-tu-blue10);
+    --mistica-color-brandLow: var(--mistica-tu-blue10);
+    --mistica-color-successHigh: var(--mistica-tu-green75);
+    --mistica-color-warningHigh: var(--mistica-tu-orange70);
+    --mistica-color-errorHigh: var(--mistica-tu-red70);
+    --mistica-color-promoHigh: var(--mistica-tu-blue);
+    --mistica-color-successHighInverse: var(--mistica-tu-green75);
+    --mistica-color-warningHighInverse: var(--mistica-tu-orange70);
+    --mistica-color-errorHighInverse: var(--mistica-tu-red70);
+    --mistica-color-promoHighInverse: var(--mistica-tu-blue);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-tu-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-tu-grey1);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-tu-grey1);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-tu-white);
+    --mistica-color-textAppBar: var(--mistica-tu-grey6);
+    --mistica-color-textAppBarSelected: var(--mistica-tu-primary);
+    --mistica-color-customTabsBackground: var(--mistica-tu-white);
+    --mistica-color-tagTextPromo: var(--mistica-tu-blue);
+    --mistica-color-tagTextActive: var(--mistica-tu-blue);
+    --mistica-color-tagTextInactive: var(--mistica-tu-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-tu-green75);
+    --mistica-color-tagTextWarning: var(--mistica-tu-orange70);
+    --mistica-color-tagTextError: var(--mistica-tu-red70);
+    --mistica-color-tagBackgroundPromo: var(--mistica-tu-blue10);
+    --mistica-color-tagBackgroundActive: var(--mistica-tu-blue10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-tu-grey1);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-tu-green10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-tu-orange20);
+    --mistica-color-tagBackgroundError: var(--mistica-tu-red10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-tu-raw-black), 0) 0%,
+        rgba(var(--mistica-tu-raw-black), 0.4) 30%,
+        rgba(var(--mistica-tu-raw-black), 0.7) 100%
+    );
+
+    /* Border radius */
+    --mistica-border-radius-avatar: 50%;
+    --mistica-border-radius-bar: 999px;
+    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-checkbox: 2px;
+    --mistica-border-radius-container: 16px;
+    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-input: 12px;
+    --mistica-border-radius-legacyDisplay: 16px;
+    --mistica-border-radius-popup: 8px;
+    --mistica-border-radius-sheet: 16px;
+    --mistica-border-radius-mediaSmall: 8px;
+
+    /* 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: 500;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 500;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 500;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 500;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='tu'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-tu-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-tu-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-tu-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-tu-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-tu-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-tu-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-tu-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-tu-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-tu-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-tu-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-tu-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-tu-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-tu-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-tu-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-tu-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-tu-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-tu-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-tu-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-tu-grey5);
+    --mistica-color-borderLow: var(--mistica-tu-darkModeBlack);
+    --mistica-color-border: var(--mistica-tu-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-tu-grey5);
+    --mistica-color-borderSelected: var(--mistica-tu-blue30);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-tu-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-tu-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-tu-red80);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red80);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-tu-red10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-tu-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-tu-red10);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-tu-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-tu-grey2);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-grey2);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-tu-grey3);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-grey3);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-tu-grey3);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-tu-raw-grey2), 0.15);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-tu-grey2);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-tu-grey2);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-grey2);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-tu-grey2);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-tu-raw-grey2), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-tu-primary);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-tu-primary);
+    --mistica-color-textButtonSecondary: var(--mistica-tu-grey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-tu-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-grey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-tu-grey2);
+    --mistica-color-textLink: var(--mistica-tu-blue30);
+    --mistica-color-textLinkInverse: var(--mistica-tu-blue30);
+    --mistica-color-textLinkDanger: var(--mistica-tu-red);
+    --mistica-color-textLinkSnackbar: var(--mistica-tu-blue30);
+    --mistica-color-textActivated: var(--mistica-tu-blue30);
+    --mistica-color-textBrand: var(--mistica-tu-blue30);
+    --mistica-color-control: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-tu-blue30);
+    --mistica-color-controlInverse: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
+    --mistica-color-controlError: var(--mistica-tu-red);
+    --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-tu-green40);
+    --mistica-color-loadingBarBackground: var(--mistica-tu-green);
+    --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
+    --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+    --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
+    --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
+    --mistica-color-badge: var(--mistica-tu-blue30);
+    --mistica-color-feedbackErrorBackground: var(--mistica-tu-red);
+    --mistica-color-feedbackInfoBackground: var(--mistica-tu-darkModeGrey);
+    --mistica-color-brand: var(--mistica-tu-blue30);
+    --mistica-color-brandHigh: rgba(var(--mistica-tu-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-tu-grey2);
+    --mistica-color-neutralHigh: var(--mistica-tu-grey2);
+    --mistica-color-neutralMedium: var(--mistica-tu-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-tu-grey5);
+    --mistica-color-neutralLow: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-tu-grey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-tu-grey2);
+    --mistica-color-textSecondary: var(--mistica-tu-grey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-tu-grey4);
+    --mistica-color-error: var(--mistica-tu-red);
+    --mistica-color-textError: var(--mistica-tu-red);
+    --mistica-color-textErrorInverse: var(--mistica-tu-red);
+    --mistica-color-success: var(--mistica-tu-green);
+    --mistica-color-warning: var(--mistica-tu-orange);
+    --mistica-color-promo: var(--mistica-tu-blue);
+    --mistica-color-highlight: var(--mistica-tu-red40);
+    --mistica-color-successLow: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-tu-green40);
+    --mistica-color-warningHigh: var(--mistica-tu-orange55);
+    --mistica-color-errorHigh: var(--mistica-tu-red40);
+    --mistica-color-promoHigh: var(--mistica-tu-blue30);
+    --mistica-color-successHighInverse: var(--mistica-tu-green75);
+    --mistica-color-warningHighInverse: var(--mistica-tu-orange70);
+    --mistica-color-errorHighInverse: var(--mistica-tu-red70);
+    --mistica-color-promoHighInverse: var(--mistica-tu-blue70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-tu-grey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-tu-grey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-tu-grey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-tu-grey2);
+    --mistica-color-textAppBar: var(--mistica-tu-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-tu-grey2);
+    --mistica-color-customTabsBackground: var(--mistica-tu-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-tu-blue30);
+    --mistica-color-tagTextActive: var(--mistica-tu-blue30);
+    --mistica-color-tagTextInactive: var(--mistica-tu-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-tu-green40);
+    --mistica-color-tagTextWarning: var(--mistica-tu-orange55);
+    --mistica-color-tagTextError: var(--mistica-tu-red40);
+    --mistica-color-tagBackgroundPromo: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-tu-raw-black), 0) 0%,
+        rgba(var(--mistica-tu-raw-black), 0.4) 30%,
+        rgba(var(--mistica-tu-raw-black), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='tu'] {
+        --mistica-color-background: var(--mistica-tu-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-tu-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-tu-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-tu-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-tu-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-tu-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-tu-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-tu-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-tu-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-tu-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-tu-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-tu-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-tu-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-tu-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-tu-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-tu-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-tu-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-tu-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-tu-grey5);
+        --mistica-color-borderLow: var(--mistica-tu-darkModeBlack);
+        --mistica-color-border: var(--mistica-tu-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-tu-grey5);
+        --mistica-color-borderSelected: var(--mistica-tu-blue30);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-tu-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-tu-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-tu-red80);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red80);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-tu-red10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-tu-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-tu-red10);
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-tu-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-tu-grey2);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-grey2);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-tu-grey3);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-grey3);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-tu-grey3);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-tu-raw-grey2), 0.15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-tu-grey2);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-tu-grey2);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-grey2);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-tu-grey2);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-grey2), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-tu-raw-grey2), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-tu-primary);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-tu-primary);
+        --mistica-color-textButtonSecondary: var(--mistica-tu-grey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-tu-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-grey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-tu-grey2);
+        --mistica-color-textLink: var(--mistica-tu-blue30);
+        --mistica-color-textLinkInverse: var(--mistica-tu-blue30);
+        --mistica-color-textLinkDanger: var(--mistica-tu-red);
+        --mistica-color-textLinkSnackbar: var(--mistica-tu-blue30);
+        --mistica-color-textActivated: var(--mistica-tu-blue30);
+        --mistica-color-textBrand: var(--mistica-tu-blue30);
+        --mistica-color-control: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-tu-blue30);
+        --mistica-color-controlInverse: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
+        --mistica-color-controlError: var(--mistica-tu-red);
+        --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-tu-green40);
+        --mistica-color-loadingBarBackground: var(--mistica-tu-green);
+        --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
+        --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+        --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
+        --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
+        --mistica-color-badge: var(--mistica-tu-blue30);
+        --mistica-color-feedbackErrorBackground: var(--mistica-tu-red);
+        --mistica-color-feedbackInfoBackground: var(--mistica-tu-darkModeGrey);
+        --mistica-color-brand: var(--mistica-tu-blue30);
+        --mistica-color-brandHigh: rgba(var(--mistica-tu-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-tu-grey2);
+        --mistica-color-neutralHigh: var(--mistica-tu-grey2);
+        --mistica-color-neutralMedium: var(--mistica-tu-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-tu-grey5);
+        --mistica-color-neutralLow: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-tu-grey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-tu-grey2);
+        --mistica-color-textSecondary: var(--mistica-tu-grey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-tu-grey4);
+        --mistica-color-error: var(--mistica-tu-red);
+        --mistica-color-textError: var(--mistica-tu-red);
+        --mistica-color-textErrorInverse: var(--mistica-tu-red);
+        --mistica-color-success: var(--mistica-tu-green);
+        --mistica-color-warning: var(--mistica-tu-orange);
+        --mistica-color-promo: var(--mistica-tu-blue);
+        --mistica-color-highlight: var(--mistica-tu-red40);
+        --mistica-color-successLow: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-tu-green40);
+        --mistica-color-warningHigh: var(--mistica-tu-orange55);
+        --mistica-color-errorHigh: var(--mistica-tu-red40);
+        --mistica-color-promoHigh: var(--mistica-tu-blue30);
+        --mistica-color-successHighInverse: var(--mistica-tu-green75);
+        --mistica-color-warningHighInverse: var(--mistica-tu-orange70);
+        --mistica-color-errorHighInverse: var(--mistica-tu-red70);
+        --mistica-color-promoHighInverse: var(--mistica-tu-blue70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-tu-grey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-tu-grey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-tu-grey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-tu-grey2);
+        --mistica-color-textAppBar: var(--mistica-tu-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-tu-grey2);
+        --mistica-color-customTabsBackground: var(--mistica-tu-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-tu-blue30);
+        --mistica-color-tagTextActive: var(--mistica-tu-blue30);
+        --mistica-color-tagTextInactive: var(--mistica-tu-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-tu-green40);
+        --mistica-color-tagTextWarning: var(--mistica-tu-orange55);
+        --mistica-color-tagTextError: var(--mistica-tu-red40);
+        --mistica-color-tagBackgroundPromo: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-tu-raw-black), 0) 0%,
+            rgba(var(--mistica-tu-raw-black), 0.4) 30%,
+            rgba(var(--mistica-tu-raw-black), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='tu'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-tu-white);
+        --mistica-color-backgroundAlternative: var(--mistica-tu-grey1);
+        --mistica-color-backgroundBrand: var(--mistica-tu-primary);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-tu-blue);
+        --mistica-color-backgroundContainer: var(--mistica-tu-white);
+        --mistica-color-backgroundContainerError: var(--mistica-tu-red10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-tu-raw-grey9), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-tu-raw-grey9), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-tu-primary);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-tu-raw-grey9), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-tu-raw-grey9), 0.4);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-tu-primary80);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-tu-grey1);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-tu-raw-primary), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-tu-grey2);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-tu-primary65);
+        --mistica-color-backgroundBrandTop: var(--mistica-tu-primary);
+        --mistica-color-backgroundBrandBottom: var(--mistica-tu-primary);
+        --mistica-color-appBarBackground: var(--mistica-tu-white);
+        --mistica-color-navigationBarBackground: var(--mistica-tu-primary);
+        --mistica-color-skeletonWave: var(--mistica-tu-grey2);
+        --mistica-color-borderLow: var(--mistica-tu-grey1);
+        --mistica-color-border: var(--mistica-tu-grey2);
+        --mistica-color-borderHigh: var(--mistica-tu-grey5);
+        --mistica-color-borderSelected: var(--mistica-tu-blue);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-tu-raw-grey9), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-tu-raw-grey9), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-tu-red);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-tu-red55);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-tu-red55);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-tu-red10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-tu-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-tu-red10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-tu-blue10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-tu-primary);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-tu-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-tu-primary45);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-tu-primary45);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.8);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-tu-blue10);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-tu-blue);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-tu-blue10);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-tu-blue70);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-tu-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-tu-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-tu-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-tu-raw-white), 0.1);
+        --mistica-color-textButtonPrimary: var(--mistica-tu-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-tu-primary);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-tu-primary);
+        --mistica-color-textButtonSecondary: var(--mistica-tu-blue);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-tu-blue70);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-tu-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-tu-white);
+        --mistica-color-textLink: var(--mistica-tu-blue);
+        --mistica-color-textLinkInverse: var(--mistica-tu-white);
+        --mistica-color-textLinkDanger: var(--mistica-tu-red);
+        --mistica-color-textLinkSnackbar: var(--mistica-tu-white);
+        --mistica-color-textActivated: var(--mistica-tu-primary);
+        --mistica-color-textBrand: var(--mistica-tu-blue);
+        --mistica-color-control: var(--mistica-tu-grey5);
+        --mistica-color-controlActivated: var(--mistica-tu-primary);
+        --mistica-color-controlInverse: var(--mistica-tu-white);
+        --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
+        --mistica-color-controlError: var(--mistica-tu-red);
+        --mistica-color-barTrack: var(--mistica-tu-grey2);
+        --mistica-color-loadingBar: var(--mistica-tu-green40);
+        --mistica-color-loadingBarBackground: var(--mistica-tu-green);
+        --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
+        --mistica-color-iosControlKnob: var(--mistica-tu-white);
+        --mistica-color-divider: var(--mistica-tu-grey2);
+        --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-tu-primary);
+        --mistica-color-badge: var(--mistica-tu-blue);
+        --mistica-color-feedbackErrorBackground: var(--mistica-tu-red);
+        --mistica-color-feedbackInfoBackground: var(--mistica-tu-primary);
+        --mistica-color-brand: var(--mistica-tu-blue);
+        --mistica-color-brandHigh: var(--mistica-tu-blue70);
+        --mistica-color-inverse: var(--mistica-tu-white);
+        --mistica-color-neutralHigh: var(--mistica-tu-grey9);
+        --mistica-color-neutralMedium: var(--mistica-tu-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-tu-grey5);
+        --mistica-color-neutralLow: var(--mistica-tu-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-tu-grey2);
+        --mistica-color-textPrimary: var(--mistica-tu-grey9);
+        --mistica-color-textPrimaryInverse: var(--mistica-tu-white);
+        --mistica-color-textSecondary: var(--mistica-tu-grey6);
+        --mistica-color-textSecondaryInverse: var(--mistica-tu-grey3);
+        --mistica-color-error: var(--mistica-tu-red);
+        --mistica-color-textError: var(--mistica-tu-red);
+        --mistica-color-textErrorInverse: var(--mistica-tu-white);
+        --mistica-color-success: var(--mistica-tu-green);
+        --mistica-color-warning: var(--mistica-tu-orange);
+        --mistica-color-promo: var(--mistica-tu-blue);
+        --mistica-color-highlight: var(--mistica-tu-red40);
+        --mistica-color-successLow: var(--mistica-tu-green10);
+        --mistica-color-warningLow: var(--mistica-tu-orange20);
+        --mistica-color-errorLow: var(--mistica-tu-red10);
+        --mistica-color-promoLow: var(--mistica-tu-blue10);
+        --mistica-color-brandLow: var(--mistica-tu-blue10);
+        --mistica-color-successHigh: var(--mistica-tu-green75);
+        --mistica-color-warningHigh: var(--mistica-tu-orange70);
+        --mistica-color-errorHigh: var(--mistica-tu-red70);
+        --mistica-color-promoHigh: var(--mistica-tu-blue);
+        --mistica-color-successHighInverse: var(--mistica-tu-green75);
+        --mistica-color-warningHighInverse: var(--mistica-tu-orange70);
+        --mistica-color-errorHighInverse: var(--mistica-tu-red70);
+        --mistica-color-promoHighInverse: var(--mistica-tu-blue);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-tu-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-tu-grey1);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-tu-grey1);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-tu-white);
+        --mistica-color-textAppBar: var(--mistica-tu-grey6);
+        --mistica-color-textAppBarSelected: var(--mistica-tu-primary);
+        --mistica-color-customTabsBackground: var(--mistica-tu-white);
+        --mistica-color-tagTextPromo: var(--mistica-tu-blue);
+        --mistica-color-tagTextActive: var(--mistica-tu-blue);
+        --mistica-color-tagTextInactive: var(--mistica-tu-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-tu-green75);
+        --mistica-color-tagTextWarning: var(--mistica-tu-orange70);
+        --mistica-color-tagTextError: var(--mistica-tu-red70);
+        --mistica-color-tagBackgroundPromo: var(--mistica-tu-blue10);
+        --mistica-color-tagBackgroundActive: var(--mistica-tu-blue10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-tu-grey1);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-tu-green10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-tu-orange20);
+        --mistica-color-tagBackgroundError: var(--mistica-tu-red10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-tu-raw-black), 0) 0%,
+            rgba(var(--mistica-tu-raw-black), 0.4) 30%,
+            rgba(var(--mistica-tu-raw-black), 0.7) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='tu'] {
+        /* 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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/css/vivo-new.css b/css/vivo-new.css
new file mode 100644
index 0000000000..cc5710183c
--- /dev/null
+++ b/css/vivo-new.css
@@ -0,0 +1,690 @@
+[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-vivoPurpleLight80: #8433ad;
+    --mistica-vivo-new-pepperLight10: #fce4ef;
+    --mistica-vivo-new-vivoPurpleDark: #461e5f;
+    --mistica-vivo-new-grey4: #949494;
+    --mistica-vivo-new-grey2: #eeeeee;
+    --mistica-vivo-new-grey3: #dddddd;
+    --mistica-vivo-new-grey5: #666666;
+    --mistica-vivo-new-pepper: #cc1f59;
+    --mistica-vivo-new-pepperDark: #b71d63;
+    --mistica-vivo-new-vivoPurpleLight10: #efe5f4;
+    --mistica-vivo-new-vivoPurpleLight50: #b280cc;
+    --mistica-vivo-new-vivoPurpleLight20: #e0cceb;
+    --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-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-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-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.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.05);
+    --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-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-grey4);
+    --mistica-color-backgroundSkeletonInverse: 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-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-buttonDangerBackgroundSelected: var(--mistica-vivo-new-pepperDark);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-vivo-new-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-new-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-vivo-new-pepperLight10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: 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-buttonPrimaryBackgroundSelected: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-vivo-new-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-new-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: 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-textButtonPrimaryInverseSelected: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-textButtonSecondary: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-new-white);
+    --mistica-color-textLink: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-textLinkInverse: var(--mistica-vivo-new-white);
+    --mistica-color-textLinkDanger: 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-control: var(--mistica-vivo-new-grey4);
+    --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurple);
+    --mistica-color-controlInverse: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
+    --mistica-color-controlError: var(--mistica-vivo-new-pepper);
+    --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+    --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-iosControlKnob: var(--mistica-vivo-new-white);
+    --mistica-color-divider: var(--mistica-vivo-new-grey3);
+    --mistica-color-dividerInverse: 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-neutralHigh: var(--mistica-vivo-new-grey6);
+    --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
+    --mistica-color-neutralMediumInverse: 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-textSecondary: var(--mistica-vivo-new-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-vivoPurpleLight20);
+    --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-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-warningHighInverse: var(--mistica-vivo-new-orangeDark);
+    --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
+    --mistica-color-promoHighInverse: 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-grey4);
+    --mistica-color-textAppBarSelected: 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-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-vivoPurpleLight10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-grey1);
+    --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-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%
+    );
+
+    /* Border radius */
+    --mistica-border-radius-avatar: 50%;
+    --mistica-border-radius-bar: 999px;
+    --mistica-border-radius-button: 999px;
+    --mistica-border-radius-checkbox: 2px;
+    --mistica-border-radius-container: 16px;
+    --mistica-border-radius-indicator: 999px;
+    --mistica-border-radius-input: 12px;
+    --mistica-border-radius-legacyDisplay: 16px;
+    --mistica-border-radius-popup: 8px;
+    --mistica-border-radius-sheet: 16px;
+    --mistica-border-radius-mediaSmall: 8px;
+
+    /* 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: 400;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 400;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 400;
+    --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: 400;
+    --mistica-font-weight-button: 400;
+    --mistica-font-size-tabsLabel: 1.125rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 400;
+    --mistica-font-weight-link: 400;
+    --mistica-font-weight-title1: 400;
+    --mistica-font-size-title2: 1.125rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 400;
+    --mistica-font-weight-indicator: 400;
+    --mistica-font-weight-navigationBar: 400;
+}
+
+[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-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.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-white), 0.05);
+    --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-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-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-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-buttonDangerBackgroundSelected: var(--mistica-vivo-new-pepperDark);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-new-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-new-vivoPurpleDark);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-new-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-new-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: 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-textButtonPrimaryInverseSelected: var(--mistica-vivo-new-grey2);
+    --mistica-color-textButtonSecondary: var(--mistica-vivo-new-grey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-new-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-grey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-new-grey2);
+    --mistica-color-textLink: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-textLinkInverse: var(--mistica-vivo-new-vivoPurpleLight50);
+    --mistica-color-textLinkDanger: 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-control: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurpleLight80);
+    --mistica-color-controlInverse: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
+    --mistica-color-controlError: var(--mistica-vivo-new-pepper);
+    --mistica-color-barTrack: 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-iosControlKnob: 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-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-neutralHigh: var(--mistica-vivo-new-grey2);
+    --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
+    --mistica-color-neutralMediumInverse: 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-textSecondary: var(--mistica-vivo-new-grey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-grey4);
+    --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-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-warningHighInverse: var(--mistica-vivo-new-orangeDark);
+    --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
+    --mistica-color-promoHighInverse: 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-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-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-tagBackgroundSuccess: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-tagBackgroundError: 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%
+    );
+}
+
+@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-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.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-white), 0.05);
+        --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-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-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-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-buttonDangerBackgroundSelected: var(--mistica-vivo-new-pepperDark);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-new-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(
+            var(--mistica-vivo-new-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-new-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-new-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-new-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-white);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-new-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-new-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: 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-textButtonPrimaryInverseSelected: var(--mistica-vivo-new-grey2);
+        --mistica-color-textButtonSecondary: var(--mistica-vivo-new-grey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-new-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-grey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-new-grey2);
+        --mistica-color-textLink: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-textLinkInverse: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-textLinkDanger: 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-control: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurpleLight80);
+        --mistica-color-controlInverse: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
+        --mistica-color-controlError: var(--mistica-vivo-new-pepper);
+        --mistica-color-barTrack: 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-iosControlKnob: 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-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-neutralHigh: var(--mistica-vivo-new-grey2);
+        --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
+        --mistica-color-neutralMediumInverse: 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-textSecondary: var(--mistica-vivo-new-grey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-grey4);
+        --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-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-warningHighInverse: var(--mistica-vivo-new-orangeDark);
+        --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
+        --mistica-color-promoHighInverse: 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-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-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-tagBackgroundSuccess: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-tagBackgroundError: 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%
+        );
+    }
+
+    [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-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.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-new-raw-darkModeBlack), 0.05);
+        --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-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-grey4);
+        --mistica-color-backgroundSkeletonInverse: 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-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-buttonDangerBackgroundSelected: var(--mistica-vivo-new-pepperDark);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-new-pepperDark);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-vivo-new-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-new-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-vivo-new-pepperLight10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: 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-buttonPrimaryBackgroundSelected: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-vivo-new-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-new-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-new-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-new-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: 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-textButtonPrimaryInverseSelected: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-textButtonSecondary: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-new-vivoPurpleDark);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-new-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-new-white);
+        --mistica-color-textLink: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-textLinkInverse: var(--mistica-vivo-new-white);
+        --mistica-color-textLinkDanger: 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-control: var(--mistica-vivo-new-grey4);
+        --mistica-color-controlActivated: var(--mistica-vivo-new-vivoPurple);
+        --mistica-color-controlInverse: var(--mistica-vivo-new-vivoPurpleLight50);
+        --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
+        --mistica-color-controlError: var(--mistica-vivo-new-pepper);
+        --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+        --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-iosControlKnob: var(--mistica-vivo-new-white);
+        --mistica-color-divider: var(--mistica-vivo-new-grey3);
+        --mistica-color-dividerInverse: 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-neutralHigh: var(--mistica-vivo-new-grey6);
+        --mistica-color-neutralMedium: var(--mistica-vivo-new-grey5);
+        --mistica-color-neutralMediumInverse: 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-textSecondary: var(--mistica-vivo-new-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-new-vivoPurpleLight20);
+        --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-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-warningHighInverse: var(--mistica-vivo-new-orangeDark);
+        --mistica-color-errorHighInverse: var(--mistica-vivo-new-pepperDark80);
+        --mistica-color-promoHighInverse: 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-grey4);
+        --mistica-color-textAppBarSelected: 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-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-vivoPurpleLight10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-vivo-new-grey1);
+        --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-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%
+        );
+    }
+}
+
+@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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.25rem;
+        --mistica-line-height-title2: 1.75rem;
+    }
+}
diff --git a/css/vivo.css b/css/vivo.css
new file mode 100644
index 0000000000..ea276e5d23
--- /dev/null
+++ b/css/vivo.css
@@ -0,0 +1,682 @@
+[data-mistica-skin='vivo'] {
+    /* Palette colors */
+    --mistica-vivo-white: #ffffff;
+    --mistica-vivo-grey1: #f6f6f6;
+    --mistica-vivo-vivoPurple: #660099;
+    --mistica-vivo-pepperLight10: #fce4ef;
+    --mistica-vivo-vivoPurpleDark: #461e5f;
+    --mistica-vivo-grey2: #eeeeee;
+    --mistica-vivo-grey3: #dddddd;
+    --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-grey6: #000000;
+    --mistica-vivo-vivoGreen: #99cc33;
+    --mistica-vivo-orange: #ff9900;
+    --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-vivoGreenLight30: #91ae9e;
+    --mistica-vivo-orangeLight40: #ffb84c;
+    --mistica-vivo-pepperLight40: #db628b;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-vivo-raw-darkModeBlack: 25, 25, 25;
+    --mistica-vivo-raw-grey6: 0, 0, 0;
+    --mistica-vivo-raw-white: 255, 255, 255;
+    --mistica-vivo-raw-darkModeGrey: 36, 36, 36;
+
+    /* Colors */
+    --mistica-color-background: var(--mistica-vivo-white);
+    --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
+    --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurple);
+    --mistica-color-backgroundContainer: var(--mistica-vivo-white);
+    --mistica-color-backgroundContainerError: var(--mistica-vivo-pepperLight10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-vivo-vivoPurple);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: 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-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-backgroundBrandTop: var(--mistica-vivo-vivoPurple);
+    --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
+    --mistica-color-appBarBackground: var(--mistica-vivo-white);
+    --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
+    --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
+    --mistica-color-borderLow: var(--mistica-vivo-grey1);
+    --mistica-color-border: var(--mistica-vivo-grey3);
+    --mistica-color-borderHigh: var(--mistica-vivo-grey5);
+    --mistica-color-borderSelected: var(--mistica-vivo-vivoPurple);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
+    --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-vivo-pepperLight10);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-vivo-pepperLight10);
+    --mistica-color-buttonLinkBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.1);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-vivo-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textButtonSecondary: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-white);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-white);
+    --mistica-color-textLink: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textLinkInverse: var(--mistica-vivo-white);
+    --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+    --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
+    --mistica-color-control: var(--mistica-vivo-grey3);
+    --mistica-color-controlActivated: var(--mistica-vivo-vivoPurple);
+    --mistica-color-controlInverse: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
+    --mistica-color-controlError: var(--mistica-vivo-pepper);
+    --mistica-color-barTrack: var(--mistica-vivo-grey3);
+    --mistica-color-loadingBar: var(--mistica-vivo-pink);
+    --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
+    --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+    --mistica-color-divider: var(--mistica-vivo-grey2);
+    --mistica-color-dividerInverse: 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-brand: var(--mistica-vivo-vivoPurple);
+    --mistica-color-brandHigh: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-inverse: var(--mistica-vivo-white);
+    --mistica-color-neutralHigh: var(--mistica-vivo-grey6);
+    --mistica-color-neutralMedium: var(--mistica-vivo-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-vivo-grey5);
+    --mistica-color-neutralLow: var(--mistica-vivo-grey1);
+    --mistica-color-neutralLowAlternative: var(--mistica-vivo-grey2);
+    --mistica-color-textPrimary: var(--mistica-vivo-grey6);
+    --mistica-color-textPrimaryInverse: var(--mistica-vivo-white);
+    --mistica-color-textSecondary: var(--mistica-vivo-grey5);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-vivoPurpleLight20);
+    --mistica-color-success: var(--mistica-vivo-vivoGreen);
+    --mistica-color-warning: var(--mistica-vivo-orange);
+    --mistica-color-error: var(--mistica-vivo-pepper);
+    --mistica-color-textError: var(--mistica-vivo-pepper);
+    --mistica-color-textErrorInverse: var(--mistica-vivo-white);
+    --mistica-color-promo: var(--mistica-vivo-vivoPurple);
+    --mistica-color-highlight: var(--mistica-vivo-pink);
+    --mistica-color-successLow: var(--mistica-vivo-vivoGreenLight10);
+    --mistica-color-warningLow: var(--mistica-vivo-orangeLight10);
+    --mistica-color-errorLow: var(--mistica-vivo-pepperLight10);
+    --mistica-color-promoLow: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-brandLow: var(--mistica-vivo-vivoPurpleLight10);
+    --mistica-color-successHigh: var(--mistica-vivo-vivoGreenDark);
+    --mistica-color-warningHigh: var(--mistica-vivo-orangeDark);
+    --mistica-color-errorHigh: var(--mistica-vivo-pepperDark80);
+    --mistica-color-promoHigh: var(--mistica-vivo-vivoPurple);
+    --mistica-color-successHighInverse: var(--mistica-vivo-vivoGreenDark);
+    --mistica-color-warningHighInverse: var(--mistica-vivo-orangeDark);
+    --mistica-color-errorHighInverse: var(--mistica-vivo-pepperDark80);
+    --mistica-color-promoHighInverse: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-white);
+    --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-textAppBarSelected: var(--mistica-vivo-vivoPurple);
+    --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
+    --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
+    --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurple);
+    --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-vivo-vivoGreenDark);
+    --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-tagBackgroundInactive: var(--mistica-vivo-grey1);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-vivoGreenLight10);
+    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-orangeLight10);
+    --mistica-color-tagBackgroundError: var(--mistica-vivo-pepperLight10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-vivo-raw-grey6), 0) 0%,
+        rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
+        rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
+    );
+
+    /* 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-indicator: 999px;
+    --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;
+
+    /* 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: 300;
+    --mistica-font-size-6: 1.5rem;
+    --mistica-line-height-6: 2rem;
+    --mistica-font-weight-6: 300;
+    --mistica-font-size-7: 1.75rem;
+    --mistica-line-height-7: 2rem;
+    --mistica-font-weight-7: 300;
+    --mistica-font-size-8: 2rem;
+    --mistica-line-height-8: 2.5rem;
+    --mistica-font-weight-8: 300;
+    --mistica-font-size-9: 2.5rem;
+    --mistica-line-height-9: 3rem;
+    --mistica-font-weight-9: 300;
+    --mistica-font-size-10: 3rem;
+    --mistica-line-height-10: 3.5rem;
+    --mistica-font-weight-10: 300;
+    --mistica-font-size-cardTitle: 1.25rem;
+    --mistica-line-height-cardTitle: 1.5rem;
+    --mistica-font-weight-cardTitle: 400;
+    --mistica-font-weight-button: 500;
+    --mistica-font-size-tabsLabel: 1rem;
+    --mistica-line-height-tabsLabel: 1.5rem;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1.25rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 300;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+}
+
+[data-mistica-skin='vivo'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-backgroundBrand: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-white), 0.03);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrand: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-backgroundBrandTop: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-skeletonWave: var(--mistica-vivo-grey5);
+    --mistica-color-borderLow: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-border: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-borderHigh: var(--mistica-vivo-grey5);
+    --mistica-color-borderSelected: var(--mistica-vivo-vivoPurple);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
+    --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
+    --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleDark);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+    --mistica-color-textButtonPrimary: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondary: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-grey2);
+    --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-grey2);
+    --mistica-color-textLink: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textLinkInverse: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+    --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-control: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-controlActivated: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-controlInverse: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-controlError: var(--mistica-vivo-pepper);
+    --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+    --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
+    --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-badge: var(--mistica-vivo-pepperDark);
+    --mistica-color-feedbackErrorBackground: var(--mistica-vivo-pepper);
+    --mistica-color-feedbackInfoBackground: var(--mistica-vivo-grey6);
+    --mistica-color-brand: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-brandHigh: rgba(var(--mistica-vivo-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-vivo-grey2);
+    --mistica-color-neutralHigh: var(--mistica-vivo-grey2);
+    --mistica-color-neutralMedium: var(--mistica-vivo-grey5);
+    --mistica-color-neutralMediumInverse: var(--mistica-vivo-grey5);
+    --mistica-color-neutralLow: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-neutralLowAlternative: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-textPrimary: var(--mistica-vivo-grey2);
+    --mistica-color-textPrimaryInverse: var(--mistica-vivo-grey2);
+    --mistica-color-textSecondary: var(--mistica-vivo-grey4);
+    --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
+    --mistica-color-success: var(--mistica-vivo-vivoGreen);
+    --mistica-color-warning: var(--mistica-vivo-orange);
+    --mistica-color-error: var(--mistica-vivo-pepper);
+    --mistica-color-textError: var(--mistica-vivo-pepper);
+    --mistica-color-textErrorInverse: var(--mistica-vivo-pepper);
+    --mistica-color-promo: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-highlight: var(--mistica-vivo-pink);
+    --mistica-color-successLow: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-warningLow: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-errorLow: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-promoLow: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-brandLow: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-successHigh: var(--mistica-vivo-vivoGreenLight30);
+    --mistica-color-warningHigh: var(--mistica-vivo-orangeLight40);
+    --mistica-color-errorHigh: var(--mistica-vivo-pepperLight40);
+    --mistica-color-promoHigh: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-successHighInverse: var(--mistica-vivo-vivoGreenDark);
+    --mistica-color-warningHighInverse: var(--mistica-vivo-orangeDark);
+    --mistica-color-errorHighInverse: var(--mistica-vivo-pepperDark80);
+    --mistica-color-promoHighInverse: var(--mistica-vivo-vivoPurple);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-grey2);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-grey4);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-grey4);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-grey2);
+    --mistica-color-textAppBar: var(--mistica-vivo-grey5);
+    --mistica-color-textAppBarSelected: var(--mistica-vivo-grey2);
+    --mistica-color-customTabsBackground: var(--mistica-vivo-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurpleLight50);
+    --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurpleLight80);
+    --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
+    --mistica-color-tagTextSuccess: var(--mistica-vivo-vivoGreenLight30);
+    --mistica-color-tagTextWarning: var(--mistica-vivo-orangeLight40);
+    --mistica-color-tagTextError: var(--mistica-vivo-pepperLight40);
+    --mistica-color-tagBackgroundPromo: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-tagBackgroundActive: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-tagBackgroundInactive: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-tagBackgroundWarning: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-tagBackgroundError: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-vivo-raw-grey6), 0) 0%,
+        rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
+        rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
+    );
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='vivo'] {
+        --mistica-color-background: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-backgroundBrand: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-white), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-backgroundBrandTop: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-skeletonWave: var(--mistica-vivo-grey5);
+        --mistica-color-borderLow: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-border: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-borderHigh: var(--mistica-vivo-grey5);
+        --mistica-color-borderSelected: var(--mistica-vivo-vivoPurple);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
+        --mistica-color-buttonLinkDangerBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondary: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-grey2);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-grey2);
+        --mistica-color-textLink: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textLinkInverse: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+        --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textActivated: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-textBrand: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-control: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-controlActivated: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-controlInverse: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-controlError: var(--mistica-vivo-pepper);
+        --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+        --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
+        --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-badge: var(--mistica-vivo-pepperDark);
+        --mistica-color-feedbackErrorBackground: var(--mistica-vivo-pepper);
+        --mistica-color-feedbackInfoBackground: var(--mistica-vivo-grey6);
+        --mistica-color-brand: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-brandHigh: rgba(var(--mistica-vivo-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-vivo-grey2);
+        --mistica-color-neutralHigh: var(--mistica-vivo-grey2);
+        --mistica-color-neutralMedium: var(--mistica-vivo-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-vivo-grey5);
+        --mistica-color-neutralLow: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-neutralLowAlternative: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-textPrimary: var(--mistica-vivo-grey2);
+        --mistica-color-textPrimaryInverse: var(--mistica-vivo-grey2);
+        --mistica-color-textSecondary: var(--mistica-vivo-grey4);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-grey4);
+        --mistica-color-success: var(--mistica-vivo-vivoGreen);
+        --mistica-color-warning: var(--mistica-vivo-orange);
+        --mistica-color-error: var(--mistica-vivo-pepper);
+        --mistica-color-textError: var(--mistica-vivo-pepper);
+        --mistica-color-textErrorInverse: var(--mistica-vivo-pepper);
+        --mistica-color-promo: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-highlight: var(--mistica-vivo-pink);
+        --mistica-color-successLow: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-warningLow: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-errorLow: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-promoLow: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-brandLow: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-successHigh: var(--mistica-vivo-vivoGreenLight30);
+        --mistica-color-warningHigh: var(--mistica-vivo-orangeLight40);
+        --mistica-color-errorHigh: var(--mistica-vivo-pepperLight40);
+        --mistica-color-promoHigh: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-successHighInverse: var(--mistica-vivo-vivoGreenDark);
+        --mistica-color-warningHighInverse: var(--mistica-vivo-orangeDark);
+        --mistica-color-errorHighInverse: var(--mistica-vivo-pepperDark80);
+        --mistica-color-promoHighInverse: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-grey2);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-vivo-grey4);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-vivo-grey4);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-vivo-grey2);
+        --mistica-color-textAppBar: var(--mistica-vivo-grey5);
+        --mistica-color-textAppBarSelected: var(--mistica-vivo-grey2);
+        --mistica-color-customTabsBackground: var(--mistica-vivo-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurpleLight80);
+        --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-vivo-vivoGreenLight30);
+        --mistica-color-tagTextWarning: var(--mistica-vivo-orangeLight40);
+        --mistica-color-tagTextError: var(--mistica-vivo-pepperLight40);
+        --mistica-color-tagBackgroundPromo: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-tagBackgroundActive: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-tagBackgroundInactive: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-tagBackgroundError: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-vivo-raw-grey6), 0) 0%,
+            rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
+            rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
+        );
+    }
+
+    [data-mistica-skin='vivo'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-vivo-white);
+        --mistica-color-backgroundAlternative: var(--mistica-vivo-grey1);
+        --mistica-color-backgroundBrand: var(--mistica-vivo-vivoPurple);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-vivo-vivoPurple);
+        --mistica-color-backgroundContainer: var(--mistica-vivo-white);
+        --mistica-color-backgroundContainerError: var(--mistica-vivo-pepperLight10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.03);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.05);
+        --mistica-color-backgroundContainerBrand: var(--mistica-vivo-vivoPurple);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.4);
+        --mistica-color-backgroundContainerBrandOverInverse: 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-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-backgroundBrandTop: var(--mistica-vivo-vivoPurple);
+        --mistica-color-backgroundBrandBottom: var(--mistica-vivo-vivoPurple);
+        --mistica-color-appBarBackground: var(--mistica-vivo-white);
+        --mistica-color-navigationBarBackground: var(--mistica-vivo-vivoPurple);
+        --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
+        --mistica-color-borderLow: var(--mistica-vivo-grey1);
+        --mistica-color-border: var(--mistica-vivo-grey3);
+        --mistica-color-borderHigh: var(--mistica-vivo-grey5);
+        --mistica-color-borderSelected: var(--mistica-vivo-vivoPurple);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-vivo-pepper);
+        --mistica-color-buttonDangerBackgroundSelected: var(--mistica-vivo-pepperDark);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-vivo-pepperDark);
+        --mistica-color-buttonLinkDangerBackgroundSelected: var(--mistica-vivo-pepperLight10);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonLinkDangerBackgroundInverseSelected: var(--mistica-vivo-pepperLight10);
+        --mistica-color-buttonLinkBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonLinkBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.1);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonPrimaryBackgroundSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonPrimaryBackgroundInverseSelected: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBackgroundSelected: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-vivo-vivoPurple);
+        --mistica-color-buttonSecondaryBorderSelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBorderInverseSelected: var(--mistica-vivo-white);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseSelected: rgba(var(--mistica-vivo-raw-white), 0.15);
+        --mistica-color-textButtonPrimary: var(--mistica-vivo-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textButtonPrimaryInverseSelected: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textButtonSecondary: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textButtonSecondarySelected: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-vivo-white);
+        --mistica-color-textButtonSecondaryInverseSelected: var(--mistica-vivo-white);
+        --mistica-color-textLink: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textLinkInverse: var(--mistica-vivo-white);
+        --mistica-color-textLinkDanger: var(--mistica-vivo-pepper);
+        --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
+        --mistica-color-control: var(--mistica-vivo-grey3);
+        --mistica-color-controlActivated: var(--mistica-vivo-vivoPurple);
+        --mistica-color-controlInverse: var(--mistica-vivo-vivoPurpleLight50);
+        --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
+        --mistica-color-controlError: var(--mistica-vivo-pepper);
+        --mistica-color-barTrack: var(--mistica-vivo-grey3);
+        --mistica-color-loadingBar: var(--mistica-vivo-pink);
+        --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
+        --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+        --mistica-color-divider: var(--mistica-vivo-grey2);
+        --mistica-color-dividerInverse: 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-brand: var(--mistica-vivo-vivoPurple);
+        --mistica-color-brandHigh: var(--mistica-vivo-vivoPurpleDark);
+        --mistica-color-inverse: var(--mistica-vivo-white);
+        --mistica-color-neutralHigh: var(--mistica-vivo-grey6);
+        --mistica-color-neutralMedium: var(--mistica-vivo-grey5);
+        --mistica-color-neutralMediumInverse: var(--mistica-vivo-grey5);
+        --mistica-color-neutralLow: var(--mistica-vivo-grey1);
+        --mistica-color-neutralLowAlternative: var(--mistica-vivo-grey2);
+        --mistica-color-textPrimary: var(--mistica-vivo-grey6);
+        --mistica-color-textPrimaryInverse: var(--mistica-vivo-white);
+        --mistica-color-textSecondary: var(--mistica-vivo-grey5);
+        --mistica-color-textSecondaryInverse: var(--mistica-vivo-vivoPurpleLight20);
+        --mistica-color-success: var(--mistica-vivo-vivoGreen);
+        --mistica-color-warning: var(--mistica-vivo-orange);
+        --mistica-color-error: var(--mistica-vivo-pepper);
+        --mistica-color-textError: var(--mistica-vivo-pepper);
+        --mistica-color-textErrorInverse: var(--mistica-vivo-white);
+        --mistica-color-promo: var(--mistica-vivo-vivoPurple);
+        --mistica-color-highlight: var(--mistica-vivo-pink);
+        --mistica-color-successLow: var(--mistica-vivo-vivoGreenLight10);
+        --mistica-color-warningLow: var(--mistica-vivo-orangeLight10);
+        --mistica-color-errorLow: var(--mistica-vivo-pepperLight10);
+        --mistica-color-promoLow: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-brandLow: var(--mistica-vivo-vivoPurpleLight10);
+        --mistica-color-successHigh: var(--mistica-vivo-vivoGreenDark);
+        --mistica-color-warningHigh: var(--mistica-vivo-orangeDark);
+        --mistica-color-errorHigh: var(--mistica-vivo-pepperDark80);
+        --mistica-color-promoHigh: var(--mistica-vivo-vivoPurple);
+        --mistica-color-successHighInverse: var(--mistica-vivo-vivoGreenDark);
+        --mistica-color-warningHighInverse: var(--mistica-vivo-orangeDark);
+        --mistica-color-errorHighInverse: var(--mistica-vivo-pepperDark80);
+        --mistica-color-promoHighInverse: var(--mistica-vivo-vivoPurple);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-vivo-white);
+        --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-textAppBarSelected: var(--mistica-vivo-vivoPurple);
+        --mistica-color-customTabsBackground: var(--mistica-vivo-vivoPurple);
+        --mistica-color-tagTextPromo: var(--mistica-vivo-vivoPurple);
+        --mistica-color-tagTextActive: var(--mistica-vivo-vivoPurple);
+        --mistica-color-tagTextInactive: var(--mistica-vivo-grey5);
+        --mistica-color-tagTextSuccess: var(--mistica-vivo-vivoGreenDark);
+        --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-tagBackgroundInactive: var(--mistica-vivo-grey1);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-vivo-vivoGreenLight10);
+        --mistica-color-tagBackgroundWarning: var(--mistica-vivo-orangeLight10);
+        --mistica-color-tagBackgroundError: var(--mistica-vivo-pepperLight10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-vivo-raw-grey6), 0) 0%,
+            rgba(var(--mistica-vivo-raw-grey6), 0.4) 30%,
+            rgba(var(--mistica-vivo-raw-grey6), 0.7) 100%
+        );
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='vivo'] {
+        /* 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.25rem;
+        --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-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title2: 1.75rem;
+        --mistica-line-height-title2: 2rem;
+    }
+}
diff --git a/examples/css/.yarn/cache/@esbuild-linux-x64-npm-0.21.5-88079726c4-8.zip b/examples/css/.yarn/cache/@esbuild-linux-x64-npm-0.21.5-88079726c4-8.zip
new file mode 100644
index 0000000000..541a476b37
Binary files /dev/null and b/examples/css/.yarn/cache/@esbuild-linux-x64-npm-0.21.5-88079726c4-8.zip differ
diff --git a/examples/css/.yarn/cache/@isaacs-cliui-npm-8.0.2-f4364666d5-4a473b9b32.zip b/examples/css/.yarn/cache/@isaacs-cliui-npm-8.0.2-f4364666d5-4a473b9b32.zip
new file mode 100644
index 0000000000..d19176fadd
Binary files /dev/null and b/examples/css/.yarn/cache/@isaacs-cliui-npm-8.0.2-f4364666d5-4a473b9b32.zip differ
diff --git a/examples/css/.yarn/cache/@npmcli-agent-npm-2.2.2-e2f559d6c0-67de7b88cc.zip b/examples/css/.yarn/cache/@npmcli-agent-npm-2.2.2-e2f559d6c0-67de7b88cc.zip
new file mode 100644
index 0000000000..b4c6d42b8b
Binary files /dev/null and b/examples/css/.yarn/cache/@npmcli-agent-npm-2.2.2-e2f559d6c0-67de7b88cc.zip differ
diff --git a/examples/css/.yarn/cache/@npmcli-fs-npm-3.1.1-c19bd09f3c-d960cab4b9.zip b/examples/css/.yarn/cache/@npmcli-fs-npm-3.1.1-c19bd09f3c-d960cab4b9.zip
new file mode 100644
index 0000000000..2b05a33c63
Binary files /dev/null and b/examples/css/.yarn/cache/@npmcli-fs-npm-3.1.1-c19bd09f3c-d960cab4b9.zip differ
diff --git a/examples/css/.yarn/cache/@pkgjs-parseargs-npm-0.11.0-cd2a3fe948-6ad6a00fc4.zip b/examples/css/.yarn/cache/@pkgjs-parseargs-npm-0.11.0-cd2a3fe948-6ad6a00fc4.zip
new file mode 100644
index 0000000000..96f576f7de
Binary files /dev/null and b/examples/css/.yarn/cache/@pkgjs-parseargs-npm-0.11.0-cd2a3fe948-6ad6a00fc4.zip differ
diff --git a/examples/css/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.18.0-0aa51442a0-8.zip b/examples/css/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.18.0-0aa51442a0-8.zip
new file mode 100644
index 0000000000..3f113b6d78
Binary files /dev/null and b/examples/css/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.18.0-0aa51442a0-8.zip differ
diff --git a/examples/css/.yarn/cache/@types-estree-npm-1.0.5-5b7faed3b4-dd8b5bed28.zip b/examples/css/.yarn/cache/@types-estree-npm-1.0.5-5b7faed3b4-dd8b5bed28.zip
new file mode 100644
index 0000000000..ebfecb5fda
Binary files /dev/null and b/examples/css/.yarn/cache/@types-estree-npm-1.0.5-5b7faed3b4-dd8b5bed28.zip differ
diff --git a/examples/css/.yarn/cache/abbrev-npm-2.0.0-0eb38a17e5-0e994ad2aa.zip b/examples/css/.yarn/cache/abbrev-npm-2.0.0-0eb38a17e5-0e994ad2aa.zip
new file mode 100644
index 0000000000..bcebdcb6a4
Binary files /dev/null and b/examples/css/.yarn/cache/abbrev-npm-2.0.0-0eb38a17e5-0e994ad2aa.zip differ
diff --git a/examples/css/.yarn/cache/agent-base-npm-7.1.1-c9e1a4b59e-51c158769c.zip b/examples/css/.yarn/cache/agent-base-npm-7.1.1-c9e1a4b59e-51c158769c.zip
new file mode 100644
index 0000000000..424c1a77eb
Binary files /dev/null and b/examples/css/.yarn/cache/agent-base-npm-7.1.1-c9e1a4b59e-51c158769c.zip differ
diff --git a/examples/css/.yarn/cache/aggregate-error-npm-3.1.0-415a406f4e-1101a33f21.zip b/examples/css/.yarn/cache/aggregate-error-npm-3.1.0-415a406f4e-1101a33f21.zip
new file mode 100644
index 0000000000..7db0127bfd
Binary files /dev/null and b/examples/css/.yarn/cache/aggregate-error-npm-3.1.0-415a406f4e-1101a33f21.zip differ
diff --git a/examples/css/.yarn/cache/ansi-regex-npm-5.0.1-c963a48615-2aa4bb54ca.zip b/examples/css/.yarn/cache/ansi-regex-npm-5.0.1-c963a48615-2aa4bb54ca.zip
new file mode 100644
index 0000000000..fffc17acac
Binary files /dev/null and b/examples/css/.yarn/cache/ansi-regex-npm-5.0.1-c963a48615-2aa4bb54ca.zip differ
diff --git a/examples/css/.yarn/cache/ansi-regex-npm-6.0.1-8d663a607d-1ff8b7667c.zip b/examples/css/.yarn/cache/ansi-regex-npm-6.0.1-8d663a607d-1ff8b7667c.zip
new file mode 100644
index 0000000000..088e552d0f
Binary files /dev/null and b/examples/css/.yarn/cache/ansi-regex-npm-6.0.1-8d663a607d-1ff8b7667c.zip differ
diff --git a/examples/css/.yarn/cache/ansi-styles-npm-4.3.0-245c7d42c7-513b44c3b2.zip b/examples/css/.yarn/cache/ansi-styles-npm-4.3.0-245c7d42c7-513b44c3b2.zip
new file mode 100644
index 0000000000..a18e3e6439
Binary files /dev/null and b/examples/css/.yarn/cache/ansi-styles-npm-4.3.0-245c7d42c7-513b44c3b2.zip differ
diff --git a/examples/css/.yarn/cache/ansi-styles-npm-6.2.1-d43647018c-ef940f2f0c.zip b/examples/css/.yarn/cache/ansi-styles-npm-6.2.1-d43647018c-ef940f2f0c.zip
new file mode 100644
index 0000000000..aa1bdfde18
Binary files /dev/null and b/examples/css/.yarn/cache/ansi-styles-npm-6.2.1-d43647018c-ef940f2f0c.zip differ
diff --git a/examples/css/.yarn/cache/balanced-match-npm-1.0.2-a53c126459-9706c088a2.zip b/examples/css/.yarn/cache/balanced-match-npm-1.0.2-a53c126459-9706c088a2.zip
new file mode 100644
index 0000000000..0693b6d7be
Binary files /dev/null and b/examples/css/.yarn/cache/balanced-match-npm-1.0.2-a53c126459-9706c088a2.zip differ
diff --git a/examples/css/.yarn/cache/brace-expansion-npm-2.0.1-17aa2616f9-a61e7cd2e8.zip b/examples/css/.yarn/cache/brace-expansion-npm-2.0.1-17aa2616f9-a61e7cd2e8.zip
new file mode 100644
index 0000000000..11d5bd0dbc
Binary files /dev/null and b/examples/css/.yarn/cache/brace-expansion-npm-2.0.1-17aa2616f9-a61e7cd2e8.zip differ
diff --git a/examples/css/.yarn/cache/cacache-npm-18.0.3-7936f526c3-b717fd9b36.zip b/examples/css/.yarn/cache/cacache-npm-18.0.3-7936f526c3-b717fd9b36.zip
new file mode 100644
index 0000000000..1c953dd3f6
Binary files /dev/null and b/examples/css/.yarn/cache/cacache-npm-18.0.3-7936f526c3-b717fd9b36.zip differ
diff --git a/examples/css/.yarn/cache/chownr-npm-2.0.0-638f1c9c61-c57cf9dd07.zip b/examples/css/.yarn/cache/chownr-npm-2.0.0-638f1c9c61-c57cf9dd07.zip
new file mode 100644
index 0000000000..e074b2f4c7
Binary files /dev/null and b/examples/css/.yarn/cache/chownr-npm-2.0.0-638f1c9c61-c57cf9dd07.zip differ
diff --git a/examples/css/.yarn/cache/clean-stack-npm-2.2.0-a8ce435a5c-2ac8cd2b2f.zip b/examples/css/.yarn/cache/clean-stack-npm-2.2.0-a8ce435a5c-2ac8cd2b2f.zip
new file mode 100644
index 0000000000..c510995715
Binary files /dev/null and b/examples/css/.yarn/cache/clean-stack-npm-2.2.0-a8ce435a5c-2ac8cd2b2f.zip differ
diff --git a/examples/css/.yarn/cache/color-convert-npm-2.0.1-79730e935b-79e6bdb9fd.zip b/examples/css/.yarn/cache/color-convert-npm-2.0.1-79730e935b-79e6bdb9fd.zip
new file mode 100644
index 0000000000..b3499adbb8
Binary files /dev/null and b/examples/css/.yarn/cache/color-convert-npm-2.0.1-79730e935b-79e6bdb9fd.zip differ
diff --git a/examples/css/.yarn/cache/color-name-npm-1.1.4-025792b0ea-b044585952.zip b/examples/css/.yarn/cache/color-name-npm-1.1.4-025792b0ea-b044585952.zip
new file mode 100644
index 0000000000..ce1ffc4bf3
Binary files /dev/null and b/examples/css/.yarn/cache/color-name-npm-1.1.4-025792b0ea-b044585952.zip differ
diff --git a/examples/css/.yarn/cache/cross-spawn-npm-7.0.3-e4ff3e65b3-671cc7c728.zip b/examples/css/.yarn/cache/cross-spawn-npm-7.0.3-e4ff3e65b3-671cc7c728.zip
new file mode 100644
index 0000000000..9613e383d1
Binary files /dev/null and b/examples/css/.yarn/cache/cross-spawn-npm-7.0.3-e4ff3e65b3-671cc7c728.zip differ
diff --git a/examples/css/.yarn/cache/debug-npm-4.3.5-b5001f59b7-7c002b51e2.zip b/examples/css/.yarn/cache/debug-npm-4.3.5-b5001f59b7-7c002b51e2.zip
new file mode 100644
index 0000000000..e5b9f1f7a9
Binary files /dev/null and b/examples/css/.yarn/cache/debug-npm-4.3.5-b5001f59b7-7c002b51e2.zip differ
diff --git a/examples/css/.yarn/cache/eastasianwidth-npm-0.2.0-c37eb16bd1-7d00d7cd8e.zip b/examples/css/.yarn/cache/eastasianwidth-npm-0.2.0-c37eb16bd1-7d00d7cd8e.zip
new file mode 100644
index 0000000000..10385995a6
Binary files /dev/null and b/examples/css/.yarn/cache/eastasianwidth-npm-0.2.0-c37eb16bd1-7d00d7cd8e.zip differ
diff --git a/examples/css/.yarn/cache/emoji-regex-npm-8.0.0-213764015c-d4c5c39d5a.zip b/examples/css/.yarn/cache/emoji-regex-npm-8.0.0-213764015c-d4c5c39d5a.zip
new file mode 100644
index 0000000000..d02d887971
Binary files /dev/null and b/examples/css/.yarn/cache/emoji-regex-npm-8.0.0-213764015c-d4c5c39d5a.zip differ
diff --git a/examples/css/.yarn/cache/emoji-regex-npm-9.2.2-e6fac8d058-8487182da7.zip b/examples/css/.yarn/cache/emoji-regex-npm-9.2.2-e6fac8d058-8487182da7.zip
new file mode 100644
index 0000000000..e6b0ab4d80
Binary files /dev/null and b/examples/css/.yarn/cache/emoji-regex-npm-9.2.2-e6fac8d058-8487182da7.zip differ
diff --git a/examples/css/.yarn/cache/encoding-npm-0.1.13-82a1837d30-bb98632f8f.zip b/examples/css/.yarn/cache/encoding-npm-0.1.13-82a1837d30-bb98632f8f.zip
new file mode 100644
index 0000000000..202e93181a
Binary files /dev/null and b/examples/css/.yarn/cache/encoding-npm-0.1.13-82a1837d30-bb98632f8f.zip differ
diff --git a/examples/css/.yarn/cache/env-paths-npm-2.2.1-7c7577428c-65b5df55a8.zip b/examples/css/.yarn/cache/env-paths-npm-2.2.1-7c7577428c-65b5df55a8.zip
new file mode 100644
index 0000000000..5fecf17a47
Binary files /dev/null and b/examples/css/.yarn/cache/env-paths-npm-2.2.1-7c7577428c-65b5df55a8.zip differ
diff --git a/examples/css/.yarn/cache/err-code-npm-2.0.3-082e0ff9a7-8b7b1be20d.zip b/examples/css/.yarn/cache/err-code-npm-2.0.3-082e0ff9a7-8b7b1be20d.zip
new file mode 100644
index 0000000000..3058584568
Binary files /dev/null and b/examples/css/.yarn/cache/err-code-npm-2.0.3-082e0ff9a7-8b7b1be20d.zip differ
diff --git a/examples/css/.yarn/cache/esbuild-npm-0.21.5-d85dfbc965-2911c7b50b.zip b/examples/css/.yarn/cache/esbuild-npm-0.21.5-d85dfbc965-2911c7b50b.zip
new file mode 100644
index 0000000000..cf88c17c68
Binary files /dev/null and b/examples/css/.yarn/cache/esbuild-npm-0.21.5-d85dfbc965-2911c7b50b.zip differ
diff --git a/examples/css/.yarn/cache/exponential-backoff-npm-3.1.1-04df458b30-3d21519a4f.zip b/examples/css/.yarn/cache/exponential-backoff-npm-3.1.1-04df458b30-3d21519a4f.zip
new file mode 100644
index 0000000000..ea4828ae9a
Binary files /dev/null and b/examples/css/.yarn/cache/exponential-backoff-npm-3.1.1-04df458b30-3d21519a4f.zip differ
diff --git a/examples/css/.yarn/cache/foreground-child-npm-3.2.1-788dc2267e-3e2e844d60.zip b/examples/css/.yarn/cache/foreground-child-npm-3.2.1-788dc2267e-3e2e844d60.zip
new file mode 100644
index 0000000000..dd963aa31b
Binary files /dev/null and b/examples/css/.yarn/cache/foreground-child-npm-3.2.1-788dc2267e-3e2e844d60.zip differ
diff --git a/examples/css/.yarn/cache/fs-minipass-npm-2.1.0-501ef87306-1b8d128dae.zip b/examples/css/.yarn/cache/fs-minipass-npm-2.1.0-501ef87306-1b8d128dae.zip
new file mode 100644
index 0000000000..21a91aac75
Binary files /dev/null and b/examples/css/.yarn/cache/fs-minipass-npm-2.1.0-501ef87306-1b8d128dae.zip differ
diff --git a/examples/css/.yarn/cache/fs-minipass-npm-3.0.3-d148d6ac19-8722a41109.zip b/examples/css/.yarn/cache/fs-minipass-npm-3.0.3-d148d6ac19-8722a41109.zip
new file mode 100644
index 0000000000..b87db2e0d8
Binary files /dev/null and b/examples/css/.yarn/cache/fs-minipass-npm-3.0.3-d148d6ac19-8722a41109.zip differ
diff --git a/examples/css/.yarn/cache/fsevents-npm-2.3.3-ce9fb0ffae-11e6ea6fea.zip b/examples/css/.yarn/cache/fsevents-npm-2.3.3-ce9fb0ffae-11e6ea6fea.zip
new file mode 100644
index 0000000000..044eb1ba3b
Binary files /dev/null and b/examples/css/.yarn/cache/fsevents-npm-2.3.3-ce9fb0ffae-11e6ea6fea.zip differ
diff --git a/examples/css/.yarn/cache/glob-npm-10.4.2-c8431e09a9-bd7c0e3070.zip b/examples/css/.yarn/cache/glob-npm-10.4.2-c8431e09a9-bd7c0e3070.zip
new file mode 100644
index 0000000000..fc58a5d03d
Binary files /dev/null and b/examples/css/.yarn/cache/glob-npm-10.4.2-c8431e09a9-bd7c0e3070.zip differ
diff --git a/examples/css/.yarn/cache/graceful-fs-npm-4.2.11-24bb648a68-ac85f94da9.zip b/examples/css/.yarn/cache/graceful-fs-npm-4.2.11-24bb648a68-ac85f94da9.zip
new file mode 100644
index 0000000000..99f412b523
Binary files /dev/null and b/examples/css/.yarn/cache/graceful-fs-npm-4.2.11-24bb648a68-ac85f94da9.zip differ
diff --git a/examples/css/.yarn/cache/http-cache-semantics-npm-4.1.1-1120131375-83ac0bc60b.zip b/examples/css/.yarn/cache/http-cache-semantics-npm-4.1.1-1120131375-83ac0bc60b.zip
new file mode 100644
index 0000000000..19f1e0a201
Binary files /dev/null and b/examples/css/.yarn/cache/http-cache-semantics-npm-4.1.1-1120131375-83ac0bc60b.zip differ
diff --git a/examples/css/.yarn/cache/http-proxy-agent-npm-7.0.2-643ed7cc33-670858c8f8.zip b/examples/css/.yarn/cache/http-proxy-agent-npm-7.0.2-643ed7cc33-670858c8f8.zip
new file mode 100644
index 0000000000..39696ec7e8
Binary files /dev/null and b/examples/css/.yarn/cache/http-proxy-agent-npm-7.0.2-643ed7cc33-670858c8f8.zip differ
diff --git a/examples/css/.yarn/cache/https-proxy-agent-npm-7.0.4-a51e13f5dc-daaab857a9.zip b/examples/css/.yarn/cache/https-proxy-agent-npm-7.0.4-a51e13f5dc-daaab857a9.zip
new file mode 100644
index 0000000000..fa85ddd3e5
Binary files /dev/null and b/examples/css/.yarn/cache/https-proxy-agent-npm-7.0.4-a51e13f5dc-daaab857a9.zip differ
diff --git a/examples/css/.yarn/cache/iconv-lite-npm-0.6.3-24b8aae27e-3f60d47a5c.zip b/examples/css/.yarn/cache/iconv-lite-npm-0.6.3-24b8aae27e-3f60d47a5c.zip
new file mode 100644
index 0000000000..f3f767a22d
Binary files /dev/null and b/examples/css/.yarn/cache/iconv-lite-npm-0.6.3-24b8aae27e-3f60d47a5c.zip differ
diff --git a/examples/css/.yarn/cache/imurmurhash-npm-0.1.4-610c5068a0-7cae75c8cd.zip b/examples/css/.yarn/cache/imurmurhash-npm-0.1.4-610c5068a0-7cae75c8cd.zip
new file mode 100644
index 0000000000..9ddf4f880f
Binary files /dev/null and b/examples/css/.yarn/cache/imurmurhash-npm-0.1.4-610c5068a0-7cae75c8cd.zip differ
diff --git a/examples/css/.yarn/cache/indent-string-npm-4.0.0-7b717435b2-824cfb9929.zip b/examples/css/.yarn/cache/indent-string-npm-4.0.0-7b717435b2-824cfb9929.zip
new file mode 100644
index 0000000000..eedfdb0f37
Binary files /dev/null and b/examples/css/.yarn/cache/indent-string-npm-4.0.0-7b717435b2-824cfb9929.zip differ
diff --git a/examples/css/.yarn/cache/ip-address-npm-9.0.5-9fa024d42a-aa15f12cfd.zip b/examples/css/.yarn/cache/ip-address-npm-9.0.5-9fa024d42a-aa15f12cfd.zip
new file mode 100644
index 0000000000..172e78d4bf
Binary files /dev/null and b/examples/css/.yarn/cache/ip-address-npm-9.0.5-9fa024d42a-aa15f12cfd.zip differ
diff --git a/examples/css/.yarn/cache/is-fullwidth-code-point-npm-3.0.0-1ecf4ebee5-44a30c2945.zip b/examples/css/.yarn/cache/is-fullwidth-code-point-npm-3.0.0-1ecf4ebee5-44a30c2945.zip
new file mode 100644
index 0000000000..dccc80a970
Binary files /dev/null and b/examples/css/.yarn/cache/is-fullwidth-code-point-npm-3.0.0-1ecf4ebee5-44a30c2945.zip differ
diff --git a/examples/css/.yarn/cache/is-lambda-npm-1.0.1-7ab55bc8a8-93a32f0194.zip b/examples/css/.yarn/cache/is-lambda-npm-1.0.1-7ab55bc8a8-93a32f0194.zip
new file mode 100644
index 0000000000..f981b1bea6
Binary files /dev/null and b/examples/css/.yarn/cache/is-lambda-npm-1.0.1-7ab55bc8a8-93a32f0194.zip differ
diff --git a/examples/css/.yarn/cache/isexe-npm-2.0.0-b58870bd2e-26bf6c5480.zip b/examples/css/.yarn/cache/isexe-npm-2.0.0-b58870bd2e-26bf6c5480.zip
new file mode 100644
index 0000000000..077597d686
Binary files /dev/null and b/examples/css/.yarn/cache/isexe-npm-2.0.0-b58870bd2e-26bf6c5480.zip differ
diff --git a/examples/css/.yarn/cache/isexe-npm-3.1.1-9c0061eead-7fe1931ee4.zip b/examples/css/.yarn/cache/isexe-npm-3.1.1-9c0061eead-7fe1931ee4.zip
new file mode 100644
index 0000000000..7ea5462480
Binary files /dev/null and b/examples/css/.yarn/cache/isexe-npm-3.1.1-9c0061eead-7fe1931ee4.zip differ
diff --git a/examples/css/.yarn/cache/jackspeak-npm-3.4.0-fdc2c6fcce-350f6f3110.zip b/examples/css/.yarn/cache/jackspeak-npm-3.4.0-fdc2c6fcce-350f6f3110.zip
new file mode 100644
index 0000000000..8cfe3eb7a5
Binary files /dev/null and b/examples/css/.yarn/cache/jackspeak-npm-3.4.0-fdc2c6fcce-350f6f3110.zip differ
diff --git a/examples/css/.yarn/cache/jsbn-npm-1.1.0-1da0181838-944f924f2b.zip b/examples/css/.yarn/cache/jsbn-npm-1.1.0-1da0181838-944f924f2b.zip
new file mode 100644
index 0000000000..1b48c50019
Binary files /dev/null and b/examples/css/.yarn/cache/jsbn-npm-1.1.0-1da0181838-944f924f2b.zip differ
diff --git a/examples/css/.yarn/cache/lru-cache-npm-10.2.2-c54b721fc3-98e8fc9369.zip b/examples/css/.yarn/cache/lru-cache-npm-10.2.2-c54b721fc3-98e8fc9369.zip
new file mode 100644
index 0000000000..2163751bb1
Binary files /dev/null and b/examples/css/.yarn/cache/lru-cache-npm-10.2.2-c54b721fc3-98e8fc9369.zip differ
diff --git a/examples/css/.yarn/cache/make-fetch-happen-npm-13.0.1-4180f2aaa8-5c9fad6955.zip b/examples/css/.yarn/cache/make-fetch-happen-npm-13.0.1-4180f2aaa8-5c9fad6955.zip
new file mode 100644
index 0000000000..68ff6927f9
Binary files /dev/null and b/examples/css/.yarn/cache/make-fetch-happen-npm-13.0.1-4180f2aaa8-5c9fad6955.zip differ
diff --git a/examples/css/.yarn/cache/minimatch-npm-9.0.5-9aa93d97fa-2c035575ed.zip b/examples/css/.yarn/cache/minimatch-npm-9.0.5-9aa93d97fa-2c035575ed.zip
new file mode 100644
index 0000000000..7418c75bb8
Binary files /dev/null and b/examples/css/.yarn/cache/minimatch-npm-9.0.5-9aa93d97fa-2c035575ed.zip differ
diff --git a/examples/css/.yarn/cache/minipass-collect-npm-2.0.1-73d3907e40-b251bceea6.zip b/examples/css/.yarn/cache/minipass-collect-npm-2.0.1-73d3907e40-b251bceea6.zip
new file mode 100644
index 0000000000..96df703423
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-collect-npm-2.0.1-73d3907e40-b251bceea6.zip differ
diff --git a/examples/css/.yarn/cache/minipass-fetch-npm-3.0.5-ed78529694-8047d27323.zip b/examples/css/.yarn/cache/minipass-fetch-npm-3.0.5-ed78529694-8047d27323.zip
new file mode 100644
index 0000000000..6e34c2f5e5
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-fetch-npm-3.0.5-ed78529694-8047d27323.zip differ
diff --git a/examples/css/.yarn/cache/minipass-flush-npm-1.0.5-efe79d9826-56269a0b22.zip b/examples/css/.yarn/cache/minipass-flush-npm-1.0.5-efe79d9826-56269a0b22.zip
new file mode 100644
index 0000000000..913b687a4d
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-flush-npm-1.0.5-efe79d9826-56269a0b22.zip differ
diff --git a/examples/css/.yarn/cache/minipass-npm-3.3.6-b8d93a945b-a30d083c80.zip b/examples/css/.yarn/cache/minipass-npm-3.3.6-b8d93a945b-a30d083c80.zip
new file mode 100644
index 0000000000..26e006f393
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-npm-3.3.6-b8d93a945b-a30d083c80.zip differ
diff --git a/examples/css/.yarn/cache/minipass-npm-5.0.0-c64fb63c92-425dab2887.zip b/examples/css/.yarn/cache/minipass-npm-5.0.0-c64fb63c92-425dab2887.zip
new file mode 100644
index 0000000000..c49ee93fbb
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-npm-5.0.0-c64fb63c92-425dab2887.zip differ
diff --git a/examples/css/.yarn/cache/minipass-npm-7.1.2-3a5327d36d-2bfd325b95.zip b/examples/css/.yarn/cache/minipass-npm-7.1.2-3a5327d36d-2bfd325b95.zip
new file mode 100644
index 0000000000..658134ee8d
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-npm-7.1.2-3a5327d36d-2bfd325b95.zip differ
diff --git a/examples/css/.yarn/cache/minipass-pipeline-npm-1.2.4-5924cb077f-b14240dac0.zip b/examples/css/.yarn/cache/minipass-pipeline-npm-1.2.4-5924cb077f-b14240dac0.zip
new file mode 100644
index 0000000000..4deae416db
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-pipeline-npm-1.2.4-5924cb077f-b14240dac0.zip differ
diff --git a/examples/css/.yarn/cache/minipass-sized-npm-1.0.3-306d86f432-79076749fc.zip b/examples/css/.yarn/cache/minipass-sized-npm-1.0.3-306d86f432-79076749fc.zip
new file mode 100644
index 0000000000..b6f4644f62
Binary files /dev/null and b/examples/css/.yarn/cache/minipass-sized-npm-1.0.3-306d86f432-79076749fc.zip differ
diff --git a/examples/css/.yarn/cache/minizlib-npm-2.1.2-ea89cd0cfb-f1fdeac0b0.zip b/examples/css/.yarn/cache/minizlib-npm-2.1.2-ea89cd0cfb-f1fdeac0b0.zip
new file mode 100644
index 0000000000..efb1b7f6b6
Binary files /dev/null and b/examples/css/.yarn/cache/minizlib-npm-2.1.2-ea89cd0cfb-f1fdeac0b0.zip differ
diff --git a/examples/css/.yarn/cache/mkdirp-npm-1.0.4-37f6ef56b9-a96865108c.zip b/examples/css/.yarn/cache/mkdirp-npm-1.0.4-37f6ef56b9-a96865108c.zip
new file mode 100644
index 0000000000..4625e914a4
Binary files /dev/null and b/examples/css/.yarn/cache/mkdirp-npm-1.0.4-37f6ef56b9-a96865108c.zip differ
diff --git a/examples/css/.yarn/cache/ms-npm-2.1.2-ec0c1512ff-673cdb2c31.zip b/examples/css/.yarn/cache/ms-npm-2.1.2-ec0c1512ff-673cdb2c31.zip
new file mode 100644
index 0000000000..725e9b8c17
Binary files /dev/null and b/examples/css/.yarn/cache/ms-npm-2.1.2-ec0c1512ff-673cdb2c31.zip differ
diff --git a/examples/css/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip b/examples/css/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip
new file mode 100644
index 0000000000..7b2fd6e1b5
Binary files /dev/null and b/examples/css/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip differ
diff --git a/examples/css/.yarn/cache/negotiator-npm-0.6.3-9d50e36171-b8ffeb1e26.zip b/examples/css/.yarn/cache/negotiator-npm-0.6.3-9d50e36171-b8ffeb1e26.zip
new file mode 100644
index 0000000000..e8c5cf4899
Binary files /dev/null and b/examples/css/.yarn/cache/negotiator-npm-0.6.3-9d50e36171-b8ffeb1e26.zip differ
diff --git a/examples/css/.yarn/cache/node-gyp-npm-10.1.0-bdea7d2ece-72e2ab4b23.zip b/examples/css/.yarn/cache/node-gyp-npm-10.1.0-bdea7d2ece-72e2ab4b23.zip
new file mode 100644
index 0000000000..ff279f5e12
Binary files /dev/null and b/examples/css/.yarn/cache/node-gyp-npm-10.1.0-bdea7d2ece-72e2ab4b23.zip differ
diff --git a/examples/css/.yarn/cache/nopt-npm-7.2.1-635b7da949-6fa729cc77.zip b/examples/css/.yarn/cache/nopt-npm-7.2.1-635b7da949-6fa729cc77.zip
new file mode 100644
index 0000000000..648c967b8c
Binary files /dev/null and b/examples/css/.yarn/cache/nopt-npm-7.2.1-635b7da949-6fa729cc77.zip differ
diff --git a/examples/css/.yarn/cache/p-map-npm-4.0.0-4677ae07c7-cb0ab21ec0.zip b/examples/css/.yarn/cache/p-map-npm-4.0.0-4677ae07c7-cb0ab21ec0.zip
new file mode 100644
index 0000000000..092fe42ff7
Binary files /dev/null and b/examples/css/.yarn/cache/p-map-npm-4.0.0-4677ae07c7-cb0ab21ec0.zip differ
diff --git a/examples/css/.yarn/cache/package-json-from-dist-npm-1.0.0-961f0fcb3b-ac706ec856.zip b/examples/css/.yarn/cache/package-json-from-dist-npm-1.0.0-961f0fcb3b-ac706ec856.zip
new file mode 100644
index 0000000000..4a5aef6d54
Binary files /dev/null and b/examples/css/.yarn/cache/package-json-from-dist-npm-1.0.0-961f0fcb3b-ac706ec856.zip differ
diff --git a/examples/css/.yarn/cache/path-key-npm-3.1.1-0e66ea8321-55cd7a9dd4.zip b/examples/css/.yarn/cache/path-key-npm-3.1.1-0e66ea8321-55cd7a9dd4.zip
new file mode 100644
index 0000000000..dd7212e2cd
Binary files /dev/null and b/examples/css/.yarn/cache/path-key-npm-3.1.1-0e66ea8321-55cd7a9dd4.zip differ
diff --git a/examples/css/.yarn/cache/path-scurry-npm-1.11.1-aaf8c339af-890d5abcd5.zip b/examples/css/.yarn/cache/path-scurry-npm-1.11.1-aaf8c339af-890d5abcd5.zip
new file mode 100644
index 0000000000..ccf042ae0e
Binary files /dev/null and b/examples/css/.yarn/cache/path-scurry-npm-1.11.1-aaf8c339af-890d5abcd5.zip differ
diff --git a/examples/css/.yarn/cache/picocolors-npm-1.0.1-39442f3da8-fa68166d1f.zip b/examples/css/.yarn/cache/picocolors-npm-1.0.1-39442f3da8-fa68166d1f.zip
new file mode 100644
index 0000000000..21041b39e9
Binary files /dev/null and b/examples/css/.yarn/cache/picocolors-npm-1.0.1-39442f3da8-fa68166d1f.zip differ
diff --git a/examples/css/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip b/examples/css/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip
new file mode 100644
index 0000000000..dad4781d48
Binary files /dev/null and b/examples/css/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip differ
diff --git a/examples/css/.yarn/cache/proc-log-npm-3.0.0-a8c21c2f0f-02b64e1b39.zip b/examples/css/.yarn/cache/proc-log-npm-3.0.0-a8c21c2f0f-02b64e1b39.zip
new file mode 100644
index 0000000000..0436b17634
Binary files /dev/null and b/examples/css/.yarn/cache/proc-log-npm-3.0.0-a8c21c2f0f-02b64e1b39.zip differ
diff --git a/examples/css/.yarn/cache/proc-log-npm-4.2.0-4d65296a9d-98f6cd012d.zip b/examples/css/.yarn/cache/proc-log-npm-4.2.0-4d65296a9d-98f6cd012d.zip
new file mode 100644
index 0000000000..1082cda733
Binary files /dev/null and b/examples/css/.yarn/cache/proc-log-npm-4.2.0-4d65296a9d-98f6cd012d.zip differ
diff --git a/examples/css/.yarn/cache/promise-retry-npm-2.0.1-871f0b01b7-f96a3f6d90.zip b/examples/css/.yarn/cache/promise-retry-npm-2.0.1-871f0b01b7-f96a3f6d90.zip
new file mode 100644
index 0000000000..9cefe07769
Binary files /dev/null and b/examples/css/.yarn/cache/promise-retry-npm-2.0.1-871f0b01b7-f96a3f6d90.zip differ
diff --git a/examples/css/.yarn/cache/retry-npm-0.12.0-72ac7fb4cc-623bd7d2e5.zip b/examples/css/.yarn/cache/retry-npm-0.12.0-72ac7fb4cc-623bd7d2e5.zip
new file mode 100644
index 0000000000..12e25fcd41
Binary files /dev/null and b/examples/css/.yarn/cache/retry-npm-0.12.0-72ac7fb4cc-623bd7d2e5.zip differ
diff --git a/examples/css/.yarn/cache/rollup-npm-4.18.0-9eadb97a09-54cde921e7.zip b/examples/css/.yarn/cache/rollup-npm-4.18.0-9eadb97a09-54cde921e7.zip
new file mode 100644
index 0000000000..91ffeb4307
Binary files /dev/null and b/examples/css/.yarn/cache/rollup-npm-4.18.0-9eadb97a09-54cde921e7.zip differ
diff --git a/examples/css/.yarn/cache/safer-buffer-npm-2.1.2-8d5c0b705e-cab8f25ae6.zip b/examples/css/.yarn/cache/safer-buffer-npm-2.1.2-8d5c0b705e-cab8f25ae6.zip
new file mode 100644
index 0000000000..1a93be6423
Binary files /dev/null and b/examples/css/.yarn/cache/safer-buffer-npm-2.1.2-8d5c0b705e-cab8f25ae6.zip differ
diff --git a/examples/css/.yarn/cache/semver-npm-7.6.2-0fec6944bb-40f6a95101.zip b/examples/css/.yarn/cache/semver-npm-7.6.2-0fec6944bb-40f6a95101.zip
new file mode 100644
index 0000000000..2b284e4a78
Binary files /dev/null and b/examples/css/.yarn/cache/semver-npm-7.6.2-0fec6944bb-40f6a95101.zip differ
diff --git a/examples/css/.yarn/cache/shebang-command-npm-2.0.0-eb2b01921d-6b52fe8727.zip b/examples/css/.yarn/cache/shebang-command-npm-2.0.0-eb2b01921d-6b52fe8727.zip
new file mode 100644
index 0000000000..727c5471e2
Binary files /dev/null and b/examples/css/.yarn/cache/shebang-command-npm-2.0.0-eb2b01921d-6b52fe8727.zip differ
diff --git a/examples/css/.yarn/cache/shebang-regex-npm-3.0.0-899a0cd65e-1a2bcae50d.zip b/examples/css/.yarn/cache/shebang-regex-npm-3.0.0-899a0cd65e-1a2bcae50d.zip
new file mode 100644
index 0000000000..3e891cda95
Binary files /dev/null and b/examples/css/.yarn/cache/shebang-regex-npm-3.0.0-899a0cd65e-1a2bcae50d.zip differ
diff --git a/examples/css/.yarn/cache/signal-exit-npm-4.1.0-61fb957687-64c757b498.zip b/examples/css/.yarn/cache/signal-exit-npm-4.1.0-61fb957687-64c757b498.zip
new file mode 100644
index 0000000000..7242dbce48
Binary files /dev/null and b/examples/css/.yarn/cache/signal-exit-npm-4.1.0-61fb957687-64c757b498.zip differ
diff --git a/examples/css/.yarn/cache/smart-buffer-npm-4.2.0-5ac3f668bb-b5167a7142.zip b/examples/css/.yarn/cache/smart-buffer-npm-4.2.0-5ac3f668bb-b5167a7142.zip
new file mode 100644
index 0000000000..d587b3db7a
Binary files /dev/null and b/examples/css/.yarn/cache/smart-buffer-npm-4.2.0-5ac3f668bb-b5167a7142.zip differ
diff --git a/examples/css/.yarn/cache/socks-npm-2.8.3-3532b59899-7a6b7f6eed.zip b/examples/css/.yarn/cache/socks-npm-2.8.3-3532b59899-7a6b7f6eed.zip
new file mode 100644
index 0000000000..6b88cd2069
Binary files /dev/null and b/examples/css/.yarn/cache/socks-npm-2.8.3-3532b59899-7a6b7f6eed.zip differ
diff --git a/examples/css/.yarn/cache/socks-proxy-agent-npm-8.0.3-30471cff1b-8fab38821c.zip b/examples/css/.yarn/cache/socks-proxy-agent-npm-8.0.3-30471cff1b-8fab38821c.zip
new file mode 100644
index 0000000000..e15d8ef97a
Binary files /dev/null and b/examples/css/.yarn/cache/socks-proxy-agent-npm-8.0.3-30471cff1b-8fab38821c.zip differ
diff --git a/examples/css/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip b/examples/css/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip
new file mode 100644
index 0000000000..22143e39bd
Binary files /dev/null and b/examples/css/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip differ
diff --git a/examples/css/.yarn/cache/sprintf-js-npm-1.1.3-b99efd75b2-a3fdac7b49.zip b/examples/css/.yarn/cache/sprintf-js-npm-1.1.3-b99efd75b2-a3fdac7b49.zip
new file mode 100644
index 0000000000..8e2aa35645
Binary files /dev/null and b/examples/css/.yarn/cache/sprintf-js-npm-1.1.3-b99efd75b2-a3fdac7b49.zip differ
diff --git a/examples/css/.yarn/cache/ssri-npm-10.0.6-6b8eaec5ce-4603d53a05.zip b/examples/css/.yarn/cache/ssri-npm-10.0.6-6b8eaec5ce-4603d53a05.zip
new file mode 100644
index 0000000000..cead1a79ce
Binary files /dev/null and b/examples/css/.yarn/cache/ssri-npm-10.0.6-6b8eaec5ce-4603d53a05.zip differ
diff --git a/examples/css/.yarn/cache/string-width-npm-4.2.3-2c27177bae-e52c10dc3f.zip b/examples/css/.yarn/cache/string-width-npm-4.2.3-2c27177bae-e52c10dc3f.zip
new file mode 100644
index 0000000000..9b4c088118
Binary files /dev/null and b/examples/css/.yarn/cache/string-width-npm-4.2.3-2c27177bae-e52c10dc3f.zip differ
diff --git a/examples/css/.yarn/cache/string-width-npm-5.1.2-bf60531341-7369deaa29.zip b/examples/css/.yarn/cache/string-width-npm-5.1.2-bf60531341-7369deaa29.zip
new file mode 100644
index 0000000000..bd88405658
Binary files /dev/null and b/examples/css/.yarn/cache/string-width-npm-5.1.2-bf60531341-7369deaa29.zip differ
diff --git a/examples/css/.yarn/cache/strip-ansi-npm-6.0.1-caddc7cb40-f3cd25890a.zip b/examples/css/.yarn/cache/strip-ansi-npm-6.0.1-caddc7cb40-f3cd25890a.zip
new file mode 100644
index 0000000000..1a63f3baa2
Binary files /dev/null and b/examples/css/.yarn/cache/strip-ansi-npm-6.0.1-caddc7cb40-f3cd25890a.zip differ
diff --git a/examples/css/.yarn/cache/strip-ansi-npm-7.1.0-7453b80b79-859c73fcf2.zip b/examples/css/.yarn/cache/strip-ansi-npm-7.1.0-7453b80b79-859c73fcf2.zip
new file mode 100644
index 0000000000..2cc856e86a
Binary files /dev/null and b/examples/css/.yarn/cache/strip-ansi-npm-7.1.0-7453b80b79-859c73fcf2.zip differ
diff --git a/examples/css/.yarn/cache/tar-npm-6.2.1-237800bb20-f1322768c9.zip b/examples/css/.yarn/cache/tar-npm-6.2.1-237800bb20-f1322768c9.zip
new file mode 100644
index 0000000000..40ff59da9e
Binary files /dev/null and b/examples/css/.yarn/cache/tar-npm-6.2.1-237800bb20-f1322768c9.zip differ
diff --git a/examples/css/.yarn/cache/unique-filename-npm-3.0.0-77d68e0a45-8e2f59b356.zip b/examples/css/.yarn/cache/unique-filename-npm-3.0.0-77d68e0a45-8e2f59b356.zip
new file mode 100644
index 0000000000..bb91bbf957
Binary files /dev/null and b/examples/css/.yarn/cache/unique-filename-npm-3.0.0-77d68e0a45-8e2f59b356.zip differ
diff --git a/examples/css/.yarn/cache/unique-slug-npm-4.0.0-e6b08f28aa-0884b58365.zip b/examples/css/.yarn/cache/unique-slug-npm-4.0.0-e6b08f28aa-0884b58365.zip
new file mode 100644
index 0000000000..9d1cb9ff3d
Binary files /dev/null and b/examples/css/.yarn/cache/unique-slug-npm-4.0.0-e6b08f28aa-0884b58365.zip differ
diff --git a/examples/css/.yarn/cache/vite-npm-5.3.2-0bfa725124-d6872cb727.zip b/examples/css/.yarn/cache/vite-npm-5.3.2-0bfa725124-d6872cb727.zip
new file mode 100644
index 0000000000..1e536e2598
Binary files /dev/null and b/examples/css/.yarn/cache/vite-npm-5.3.2-0bfa725124-d6872cb727.zip differ
diff --git a/examples/css/.yarn/cache/which-npm-2.0.2-320ddf72f7-1a5c563d3c.zip b/examples/css/.yarn/cache/which-npm-2.0.2-320ddf72f7-1a5c563d3c.zip
new file mode 100644
index 0000000000..389ec5e25e
Binary files /dev/null and b/examples/css/.yarn/cache/which-npm-2.0.2-320ddf72f7-1a5c563d3c.zip differ
diff --git a/examples/css/.yarn/cache/which-npm-4.0.0-dd31cd4928-f17e84c042.zip b/examples/css/.yarn/cache/which-npm-4.0.0-dd31cd4928-f17e84c042.zip
new file mode 100644
index 0000000000..093e6f578f
Binary files /dev/null and b/examples/css/.yarn/cache/which-npm-4.0.0-dd31cd4928-f17e84c042.zip differ
diff --git a/examples/css/.yarn/cache/wrap-ansi-npm-7.0.0-ad6e1a0554-a790b846fd.zip b/examples/css/.yarn/cache/wrap-ansi-npm-7.0.0-ad6e1a0554-a790b846fd.zip
new file mode 100644
index 0000000000..ab6ea6e871
Binary files /dev/null and b/examples/css/.yarn/cache/wrap-ansi-npm-7.0.0-ad6e1a0554-a790b846fd.zip differ
diff --git a/examples/css/.yarn/cache/wrap-ansi-npm-8.1.0-26a4e6ae28-371733296d.zip b/examples/css/.yarn/cache/wrap-ansi-npm-8.1.0-26a4e6ae28-371733296d.zip
new file mode 100644
index 0000000000..2ee78f31c8
Binary files /dev/null and b/examples/css/.yarn/cache/wrap-ansi-npm-8.1.0-26a4e6ae28-371733296d.zip differ
diff --git a/examples/css/.yarn/cache/yallist-npm-4.0.0-b493d9e907-343617202a.zip b/examples/css/.yarn/cache/yallist-npm-4.0.0-b493d9e907-343617202a.zip
new file mode 100644
index 0000000000..f2d3306fed
Binary files /dev/null and b/examples/css/.yarn/cache/yallist-npm-4.0.0-b493d9e907-343617202a.zip differ
diff --git a/examples/css/.yarn/install-state.gz b/examples/css/.yarn/install-state.gz
new file mode 100644
index 0000000000..a65944a918
Binary files /dev/null and b/examples/css/.yarn/install-state.gz differ
diff --git a/examples/css/README.md b/examples/css/README.md
new file mode 100644
index 0000000000..14ca012ea9
--- /dev/null
+++ b/examples/css/README.md
@@ -0,0 +1,168 @@
+# Mistica css
+
+If you can't use the Mistica React components in your project, you can still use the Mistica css to style your
+app.
+
+Mistica css is a set of stylesheets that you can use to style your app with the design tokens of the system.
+It includes css custom properties (css variables) for colors, border radius, typography, etc.
+
+## How to use
+
+### 1. Install the package
+
+```bash
+yarn add @telefonica/mistica
+```
+
+This is the same package which includes the react components, but if you aren't using React, you can just
+import the css files in your app.
+
+### 2. Import the css
+
+You need to import the `mistica-common.css` file and at least one skin file.
+
+For example:
+
+```css
+@import '@telefonica/mistica/css/mistica-common.css';
+@import '@telefonica/mistica/css/movistar.css';
+```
+
+There is one css file for each skin (`movistar`, `o2`, `vivo`, `tu`, `telefonica`, etc)
+
+:warning: The css import method will depend on your bundler or tooling. The files are located inside the
+`css/` folder in the package (`node_modules/@telefonica/mistica/css/`)
+
+### 3. Setup the mistica skin in your html
+
+```html
+<body data-mistica-skin="movistar"></body>
+```
+
+## Example
+
+You can run the example in this folder to see how it works:
+
+```bash
+yarn dev
+```
+
+Take a look at the `index.html` and `styles.css` files.
+
+## Dark mode support
+
+By default, color tokens will change folloging the user's system preferences. If you want to force the dark or
+light mode, you can add the `data-mistica-color-scheme` attribute:
+
+```html
+<body data-mistica-skin="movistar" data-mistica-color-scheme="light"></body>
+```
+
+`data-mistica-color-scheme` can be `light`, `dark` or `auto` (default).
+
+## CSS custom properties
+
+You can use the css custom properties in your css files. For example:
+
+```css
+.my-component {
+  color: var(--mistica-color-textPrimary);
+  background: var(--mistica-color-backgroundContainer);
+  border: 1px solid var(--mistica-color-border);
+  border-radius: var(--mistica-border-radius-container);
+}
+```
+
+In general, the defined custom properties have the following naming convention:
+`--mistica-{category}-{tokenName}`. Categories are `color`, `border-radius`, `font-size`, `font-weight`,
+`line-height`.
+
+To see all the available tokens, you can read the
+[design tokens definition](https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar.json)
+or take a look inside one of the skin css files.
+
+### Color tokens
+
+Naming convention:
+
+- `--mistica-color-{colorName}`
+
+For example:
+
+- `--mistica-color-textPrimary`
+- `--mistica-color-backgroundContainer`, etc.
+
+### Border radius tokens
+
+Naming convention:
+
+- `--mistica-border-radius-{radiusName}`
+
+For example:
+
+- `--mistica-border-radius-container`
+- `--mistica-border-radius-button`, etc.
+
+### Typography tokens
+
+We define custom properties for `font-size`, `font-weight` and `line-height`. These tokens have the folloging
+naming convention:
+
+- `--mistica-font-size-{sizeName}`
+- `--mistica-font-weight-{weightName}`
+- `--mistica-line-height-{lineHeightName}`
+
+For example:
+
+- `--mistica-font-size-title1`
+- `--mistica-font-weight-cardTitle`
+- `--mistica-line-height-tabsLabel`, etc.
+
+:warning: `font-size` and `line-height` custom properties are defined in `rem` units, so you should configure
+your base font size in the `html` element to make them work properly. See
+[fonts doc](https://github.com/Telefonica/mistica-web/blob/master/doc/fonts.md#dynamic-font-sizes)
+
+:warning: some of these tokens have different values depending on the screen size, so usually font-sizes are
+bigger in desktop (`@media (min-width: 1024px)`) than in mobile.
+
+## Utility classes
+
+Apart from the css custom properties, we also provide some utility classes that you can use in your html
+
+### Typography
+
+We group the typography styles (`font-size`, `line-height`, `font-weight`) in classes that you can use in your
+html.
+
+Naming convention:
+
+- `mistica-text-{sizeName}`
+
+For example:
+
+```html
+<h1 class="mistica-text-title2">Title</h1>
+```
+
+The available classes are:
+
+Base [text presets](https://mistica-web.vercel.app/?path=/story/components-text--text-components):
+
+- `mistica-text-1`
+- `mistica-text-2`
+- `mistica-text-3`
+- `mistica-text-4`
+- `mistica-text-5`
+- `mistica-text-6`
+- `mistica-text-7`
+- `mistica-text-8`
+- `mistica-text-9`
+- `mistica-text-10`
+
+Title presets:
+
+- `mistica-text-title1`
+- `mistica-text-title2`
+
+Others: see the full list in the
+[token definition file](https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar.json#L1384).
diff --git a/examples/css/index.html b/examples/css/index.html
new file mode 100644
index 0000000000..1efb0ad0ea
--- /dev/null
+++ b/examples/css/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Mistica CSS Example</title>
+        <link rel="stylesheet" href="/style.css" />
+    </head>
+    <body data-mistica-skin="o2-new">
+        <div id="app" class="mistica-responsive-layout">
+            <h1 class="mistica-text-6">Hello mistica css</h1>
+
+            <div class="controls">
+                <div>
+                    <label for="skin-select">Skin:</label>
+                    <select id="skin-select">
+                        <option value="o2-new">o2-new</option>
+                        <option value="movistar">movistar</option>
+                        <option value="vivo-new">vivo-new</option>
+                        <option value="blau">blau</option>
+                        <option value="telefonica">telefonica</option>
+                        <option value="tu">tu</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label for="color-scheme-select">Color scheme:</label>
+                    <select id="color-scheme-select">
+                        <option value="system">system</option>
+                        <option value="light">light</option>
+                        <option value="dark">dark</option>
+                    </select>
+                </div>
+            </div>
+
+            <section class="card mistica-boxed">
+                <div class="tag">Headline</div>
+                <h2 class="mistica-text-cardTitle">Title</h2>
+                <p class="mistica-text-2">Subtitle</p>
+                <p class="description mistica-text-2">Description</p>
+                <button class="button small">Action</button>
+            </section>
+        </div>
+        <script type="module" src="/main.js"></script>
+    </body>
+</html>
diff --git a/examples/css/main.js b/examples/css/main.js
new file mode 100644
index 0000000000..55bc5a31ac
--- /dev/null
+++ b/examples/css/main.js
@@ -0,0 +1,9 @@
+document.querySelector('#skin-select').addEventListener('change', (e) => {
+    const newSkin = e.target.value;
+    document.body.dataset.misticaSkin = newSkin;
+});
+
+document.querySelector('#color-scheme-select').addEventListener('change', (e) => {
+    const newColorScheme = e.target.value;
+    document.body.dataset.misticaColorScheme = newColorScheme;
+});
diff --git a/examples/css/package.json b/examples/css/package.json
new file mode 100644
index 0000000000..039adbf946
--- /dev/null
+++ b/examples/css/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "mistica-example-css",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": " build",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "vite": "^5.3.1"
+    },
+    "packageManager": "yarn@4.2.2"
+}
diff --git a/examples/css/style.css b/examples/css/style.css
new file mode 100644
index 0000000000..ac9d76bb7c
--- /dev/null
+++ b/examples/css/style.css
@@ -0,0 +1,120 @@
+@import url('../../css/roboto.css');
+@import url('../../css/reset.css');
+
+/* Mistica common tyles */
+@import url('../../css/mistica-common.css');
+
+/* Different skins */
+@import url('../../css/o2-new.css');
+@import url('../../css/blau.css');
+@import url('../../css/vivo-new.css');
+@import url('../../css/movistar.css');
+@import url('../../css/telefonica.css');
+@import url('../../css/tu.css');
+
+html {
+    font-size: 100%;
+}
+
+/**
+ * To enable Dynamic Type in apple devices:
+ * See: https://dev.to/colingourlay/how-to-support-apple-s-dynamic-text-in-your-web-content-with-css-40c0
+ */
+@supports (font: -apple-system-body) {
+    html {
+        font: -apple-system-body !important;
+    }
+}
+
+#app {
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
+h1 {
+    margin-bottom: 16px;
+}
+
+.controls {
+    margin-bottom: 32px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+}
+
+.controls label {
+    margin-right: 8px;
+}
+
+select {
+    color: var(--mistica-color-textPrimary);
+    background: var(--mistica-color-backgroundContainer);
+    border: 1px solid var(--mistica-color-border);
+    border-radius: var(--mistica-border-radius-input);
+    padding: 8px 16px;
+    outline: none;
+}
+
+.card {
+    padding: 24px 16px;
+}
+
+.card h2 {
+    margin-bottom: 4px;
+}
+
+.card .description {
+    color: var(--mistica-color-textSecondary);
+    margin-top: 4px;
+}
+
+.card .tag {
+    margin-bottom: 8px;
+}
+
+.card button {
+    margin-top: 16px;
+}
+
+.tag {
+    background: var(--mistica-color-tagBackgroundPromo);
+    color: var(--mistica-color-tagTextPromo);
+    font-weight: var(--mistica-font-weight-indicator);
+    border-radius: var(--mistica-border-radius-indicator);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 56px;
+    padding: 4px 12px;
+    vertical-align: middle;
+}
+
+button {
+    color: var(--mistica-color-textButtonPrimary);
+    background: var(--mistica-color-buttonPrimaryBackground);
+    border-radius: var(--mistica-border-radius-button);
+    font-size: var(--mistica-font-size-2);
+    line-height: var(--mistica-line-height-2);
+    font-weight: var(--mistica-font-weight-button);
+    border: 1.5px solid transparent;
+    min-width: 104px;
+    padding: 12px 16px;
+    cursor: pointer;
+    outline: none;
+}
+
+button.small {
+    padding: 6px 12px;
+    min-width: 80px;
+}
+
+button:hover {
+    background: var(--mistica-color-buttonPrimaryBackgroundHover);
+}
+
+button:active {
+    background: var(--mistica-color-buttonPrimaryBackgroundSelected);
+}
diff --git a/examples/css/yarn.lock b/examples/css/yarn.lock
new file mode 100644
index 0000000000..a46c440285
--- /dev/null
+++ b/examples/css/yarn.lock
@@ -0,0 +1,1372 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 6
+  cacheKey: 8
+
+"@esbuild/aix-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/aix-ppc64@npm:0.21.5"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm64@npm:0.21.5"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm@npm:0.21.5"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-x64@npm:0.21.5"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-arm64@npm:0.21.5"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-x64@npm:0.21.5"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-x64@npm:0.21.5"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm64@npm:0.21.5"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm@npm:0.21.5"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ia32@npm:0.21.5"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-loong64@npm:0.21.5"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-mips64el@npm:0.21.5"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ppc64@npm:0.21.5"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-riscv64@npm:0.21.5"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-s390x@npm:0.21.5"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-x64@npm:0.21.5"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/netbsd-x64@npm:0.21.5"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/openbsd-x64@npm:0.21.5"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/sunos-x64@npm:0.21.5"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-arm64@npm:0.21.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-ia32@npm:0.21.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-x64@npm:0.21.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@isaacs/cliui@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@isaacs/cliui@npm:8.0.2"
+  dependencies:
+    string-width: ^5.1.2
+    string-width-cjs: "npm:string-width@^4.2.0"
+    strip-ansi: ^7.0.1
+    strip-ansi-cjs: "npm:strip-ansi@^6.0.1"
+    wrap-ansi: ^8.1.0
+    wrap-ansi-cjs: "npm:wrap-ansi@^7.0.0"
+  checksum: 4a473b9b32a7d4d3cfb7a614226e555091ff0c5a29a1734c28c72a182c2f6699b26fc6b5c2131dfd841e86b185aea714c72201d7c98c2fba5f17709333a67aeb
+  languageName: node
+  linkType: hard
+
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "@npmcli/agent@npm:2.2.2"
+  dependencies:
+    agent-base: ^7.1.0
+    http-proxy-agent: ^7.0.0
+    https-proxy-agent: ^7.0.1
+    lru-cache: ^10.0.1
+    socks-proxy-agent: ^8.0.3
+  checksum: 67de7b88cc627a79743c88bab35e023e23daf13831a8aa4e15f998b92f5507b644d8ffc3788afc8e64423c612e0785a6a92b74782ce368f49a6746084b50d874
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "@npmcli/fs@npm:3.1.1"
+  dependencies:
+    semver: ^7.3.5
+  checksum: d960cab4b93adcb31ce223bfb75c5714edbd55747342efb67dcc2f25e023d930a7af6ece3e75f2f459b6f38fc14d031c766f116cd124fdc937fd33112579e820
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 6ad6a00fc4f2f2cfc6bff76fb1d88b8ee20bc0601e18ebb01b6d4be583733a860239a521a7fbca73b612e66705078809483549d2b18f370eb346c5155c8e4a0f
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm-eabi@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.18.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm64@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.18.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-arm64@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.18.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-x64@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.18.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.18.0"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-musleabihf@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.18.0"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-gnu@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.18.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-musl@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.18.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.18.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-gnu@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.18.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-s390x-gnu@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.18.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-gnu@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.18.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-musl@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.18.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.18.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-ia32-msvc@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.18.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.18.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@types/estree@npm:1.0.5"
+  checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a
+  languageName: node
+  linkType: hard
+
+"abbrev@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "abbrev@npm:2.0.0"
+  checksum: 0e994ad2aa6575f94670d8a2149afe94465de9cedaaaac364e7fb43a40c3691c980ff74899f682f4ca58fa96b4cbd7421a015d3a6defe43a442117d7821a2f36
+  languageName: node
+  linkType: hard
+
+"agent-base@npm:^7.0.2, agent-base@npm:^7.1.0, agent-base@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "agent-base@npm:7.1.1"
+  dependencies:
+    debug: ^4.3.4
+  checksum: 51c158769c5c051482f9ca2e6e1ec085ac72b5a418a9b31b4e82fe6c0a6699adb94c1c42d246699a587b3335215037091c79e0de512c516f73b6ea844202f037
+  languageName: node
+  linkType: hard
+
+"aggregate-error@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "aggregate-error@npm:3.1.0"
+  dependencies:
+    clean-stack: ^2.0.0
+    indent-string: ^4.0.0
+  checksum: 1101a33f21baa27a2fa8e04b698271e64616b886795fd43c31068c07533c7b3facfcaf4e9e0cab3624bd88f729a592f1c901a1a229c9e490eafce411a8644b79
+  languageName: node
+  linkType: hard
+
+"ansi-regex@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "ansi-regex@npm:5.0.1"
+  checksum: 2aa4bb54caf2d622f1afdad09441695af2a83aa3fe8b8afa581d205e57ed4261c183c4d3877cee25794443fde5876417d859c108078ab788d6af7e4fe52eb66b
+  languageName: node
+  linkType: hard
+
+"ansi-regex@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "ansi-regex@npm:6.0.1"
+  checksum: 1ff8b7667cded1de4fa2c9ae283e979fc87036864317da86a2e546725f96406746411d0d85e87a2d12fa5abd715d90006de7fa4fa0477c92321ad3b4c7d4e169
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^4.0.0":
+  version: 4.3.0
+  resolution: "ansi-styles@npm:4.3.0"
+  dependencies:
+    color-convert: ^2.0.1
+  checksum: 513b44c3b2105dd14cc42a19271e80f386466c4be574bccf60b627432f9198571ebf4ab1e4c3ba17347658f4ee1711c163d574248c0c1cdc2d5917a0ad582ec4
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^6.1.0":
+  version: 6.2.1
+  resolution: "ansi-styles@npm:6.2.1"
+  checksum: ef940f2f0ced1a6347398da88a91da7930c33ecac3c77b72c5905f8b8fe402c52e6fde304ff5347f616e27a742da3f1dc76de98f6866c69251ad0b07a66776d9
+  languageName: node
+  linkType: hard
+
+"balanced-match@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "balanced-match@npm:1.0.2"
+  checksum: 9706c088a283058a8a99e0bf91b0a2f75497f185980d9ffa8b304de1d9e58ebda7c72c07ebf01dadedaac5b2907b2c6f566f660d62bd336c3468e960403b9d65
+  languageName: node
+  linkType: hard
+
+"brace-expansion@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "brace-expansion@npm:2.0.1"
+  dependencies:
+    balanced-match: ^1.0.0
+  checksum: a61e7cd2e8a8505e9f0036b3b6108ba5e926b4b55089eeb5550cd04a471fe216c96d4fe7e4c7f995c728c554ae20ddfc4244cad10aef255e72b62930afd233d1
+  languageName: node
+  linkType: hard
+
+"cacache@npm:^18.0.0":
+  version: 18.0.3
+  resolution: "cacache@npm:18.0.3"
+  dependencies:
+    "@npmcli/fs": ^3.1.0
+    fs-minipass: ^3.0.0
+    glob: ^10.2.2
+    lru-cache: ^10.0.1
+    minipass: ^7.0.3
+    minipass-collect: ^2.0.1
+    minipass-flush: ^1.0.5
+    minipass-pipeline: ^1.2.4
+    p-map: ^4.0.0
+    ssri: ^10.0.0
+    tar: ^6.1.11
+    unique-filename: ^3.0.0
+  checksum: b717fd9b36e9c3279bfde4545c3a8f6d5a539b084ee26a9504d48f83694beb724057d26e090b97540f9cc62bea18b9f6cf671c50e18fb7dac60eda9db691714f
+  languageName: node
+  linkType: hard
+
+"chownr@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "chownr@npm:2.0.0"
+  checksum: c57cf9dd0791e2f18a5ee9c1a299ae6e801ff58fee96dc8bfd0dcb4738a6ce58dd252a3605b1c93c6418fe4f9d5093b28ffbf4d66648cb2a9c67eaef9679be2f
+  languageName: node
+  linkType: hard
+
+"clean-stack@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "clean-stack@npm:2.2.0"
+  checksum: 2ac8cd2b2f5ec986a3c743935ec85b07bc174d5421a5efc8017e1f146a1cf5f781ae962618f416352103b32c9cd7e203276e8c28241bbe946160cab16149fb68
+  languageName: node
+  linkType: hard
+
+"color-convert@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "color-convert@npm:2.0.1"
+  dependencies:
+    color-name: ~1.1.4
+  checksum: 79e6bdb9fd479a205c71d89574fccfb22bd9053bd98c6c4d870d65c132e5e904e6034978e55b43d69fcaa7433af2016ee203ce76eeba9cfa554b373e7f7db336
+  languageName: node
+  linkType: hard
+
+"color-name@npm:~1.1.4":
+  version: 1.1.4
+  resolution: "color-name@npm:1.1.4"
+  checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
+  languageName: node
+  linkType: hard
+
+"cross-spawn@npm:^7.0.0":
+  version: 7.0.3
+  resolution: "cross-spawn@npm:7.0.3"
+  dependencies:
+    path-key: ^3.1.0
+    shebang-command: ^2.0.0
+    which: ^2.0.1
+  checksum: 671cc7c7288c3a8406f3c69a3ae2fc85555c04169e9d611def9a675635472614f1c0ed0ef80955d5b6d4e724f6ced67f0ad1bb006c2ea643488fcfef994d7f52
+  languageName: node
+  linkType: hard
+
+"debug@npm:4, debug@npm:^4.3.4":
+  version: 4.3.5
+  resolution: "debug@npm:4.3.5"
+  dependencies:
+    ms: 2.1.2
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 7c002b51e256257f936dda09eb37167df952758c57badf6bf44bdc40b89a4bcb8e5a0a2e4c7b53f97c69e2970dd5272d33a757378a12c8f8e64ea7bf99e8e86e
+  languageName: node
+  linkType: hard
+
+"eastasianwidth@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "eastasianwidth@npm:0.2.0"
+  checksum: 7d00d7cd8e49b9afa762a813faac332dee781932d6f2c848dc348939c4253f1d4564341b7af1d041853bc3f32c2ef141b58e0a4d9862c17a7f08f68df1e0f1ed
+  languageName: node
+  linkType: hard
+
+"emoji-regex@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "emoji-regex@npm:8.0.0"
+  checksum: d4c5c39d5a9868b5fa152f00cada8a936868fd3367f33f71be515ecee4c803132d11b31a6222b2571b1e5f7e13890156a94880345594d0ce7e3c9895f560f192
+  languageName: node
+  linkType: hard
+
+"emoji-regex@npm:^9.2.2":
+  version: 9.2.2
+  resolution: "emoji-regex@npm:9.2.2"
+  checksum: 8487182da74aabd810ac6d6f1994111dfc0e331b01271ae01ec1eb0ad7b5ecc2bbbbd2f053c05cb55a1ac30449527d819bbfbf0e3de1023db308cbcb47f86601
+  languageName: node
+  linkType: hard
+
+"encoding@npm:^0.1.13":
+  version: 0.1.13
+  resolution: "encoding@npm:0.1.13"
+  dependencies:
+    iconv-lite: ^0.6.2
+  checksum: bb98632f8ffa823996e508ce6a58ffcf5856330fde839ae42c9e1f436cc3b5cc651d4aeae72222916545428e54fd0f6aa8862fd8d25bdbcc4589f1e3f3715e7f
+  languageName: node
+  linkType: hard
+
+"env-paths@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "env-paths@npm:2.2.1"
+  checksum: 65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e
+  languageName: node
+  linkType: hard
+
+"err-code@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "err-code@npm:2.0.3"
+  checksum: 8b7b1be20d2de12d2255c0bc2ca638b7af5171142693299416e6a9339bd7d88fc8d7707d913d78e0993176005405a236b066b45666b27b797252c771156ace54
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.21.3":
+  version: 0.21.5
+  resolution: "esbuild@npm:0.21.5"
+  dependencies:
+    "@esbuild/aix-ppc64": 0.21.5
+    "@esbuild/android-arm": 0.21.5
+    "@esbuild/android-arm64": 0.21.5
+    "@esbuild/android-x64": 0.21.5
+    "@esbuild/darwin-arm64": 0.21.5
+    "@esbuild/darwin-x64": 0.21.5
+    "@esbuild/freebsd-arm64": 0.21.5
+    "@esbuild/freebsd-x64": 0.21.5
+    "@esbuild/linux-arm": 0.21.5
+    "@esbuild/linux-arm64": 0.21.5
+    "@esbuild/linux-ia32": 0.21.5
+    "@esbuild/linux-loong64": 0.21.5
+    "@esbuild/linux-mips64el": 0.21.5
+    "@esbuild/linux-ppc64": 0.21.5
+    "@esbuild/linux-riscv64": 0.21.5
+    "@esbuild/linux-s390x": 0.21.5
+    "@esbuild/linux-x64": 0.21.5
+    "@esbuild/netbsd-x64": 0.21.5
+    "@esbuild/openbsd-x64": 0.21.5
+    "@esbuild/sunos-x64": 0.21.5
+    "@esbuild/win32-arm64": 0.21.5
+    "@esbuild/win32-ia32": 0.21.5
+    "@esbuild/win32-x64": 0.21.5
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 2911c7b50b23a9df59a7d6d4cdd3a4f85855787f374dce751148dbb13305e0ce7e880dde1608c2ab7a927fc6cec3587b80995f7fc87a64b455f8b70b55fd8ec1
+  languageName: node
+  linkType: hard
+
+"exponential-backoff@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "exponential-backoff@npm:3.1.1"
+  checksum: 3d21519a4f8207c99f7457287291316306255a328770d320b401114ec8481986e4e467e854cb9914dd965e0a1ca810a23ccb559c642c88f4c7f55c55778a9b48
+  languageName: node
+  linkType: hard
+
+"foreground-child@npm:^3.1.0":
+  version: 3.2.1
+  resolution: "foreground-child@npm:3.2.1"
+  dependencies:
+    cross-spawn: ^7.0.0
+    signal-exit: ^4.0.1
+  checksum: 3e2e844d6003c96d70affe8ae98d7eaaba269a868c14d997620c088340a8775cd5d2d9043e6ceebae1928d8d9a874911c4d664b9a267e8995945df20337aebc0
+  languageName: node
+  linkType: hard
+
+"fs-minipass@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "fs-minipass@npm:2.1.0"
+  dependencies:
+    minipass: ^3.0.0
+  checksum: 1b8d128dae2ac6cc94230cc5ead341ba3e0efaef82dab46a33d171c044caaa6ca001364178d42069b2809c35a1c3c35079a32107c770e9ffab3901b59af8c8b1
+  languageName: node
+  linkType: hard
+
+"fs-minipass@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "fs-minipass@npm:3.0.3"
+  dependencies:
+    minipass: ^7.0.3
+  checksum: 8722a41109130851d979222d3ec88aabaceeaaf8f57b2a8f744ef8bd2d1ce95453b04a61daa0078822bc5cd21e008814f06fe6586f56fef511e71b8d2394d802
+  languageName: node
+  linkType: hard
+
+"fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
+  version: 2.3.3
+  resolution: "fsevents@npm:2.3.3"
+  dependencies:
+    node-gyp: latest
+  checksum: 11e6ea6fea15e42461fc55b4b0e4a0a3c654faa567f1877dbd353f39156f69def97a69936d1746619d656c4b93de2238bf731f6085a03a50cabf287c9d024317
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.3#~builtin<compat/fsevents>":
+  version: 2.3.3
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
+  dependencies:
+    node-gyp: latest
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"glob@npm:^10.2.2, glob@npm:^10.3.10":
+  version: 10.4.2
+  resolution: "glob@npm:10.4.2"
+  dependencies:
+    foreground-child: ^3.1.0
+    jackspeak: ^3.1.2
+    minimatch: ^9.0.4
+    minipass: ^7.1.2
+    package-json-from-dist: ^1.0.0
+    path-scurry: ^1.11.1
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: bd7c0e30701136e936f414e5f6f82c7f04503f01df77408f177aa584927412f0bde0338e6ec541618cd21eacc57dde33e7b3c6c0a779cc1c6e6a0e14f3d15d9b
+  languageName: node
+  linkType: hard
+
+"graceful-fs@npm:^4.2.6":
+  version: 4.2.11
+  resolution: "graceful-fs@npm:4.2.11"
+  checksum: ac85f94da92d8eb6b7f5a8b20ce65e43d66761c55ce85ac96df6865308390da45a8d3f0296dd3a663de65d30ba497bd46c696cc1e248c72b13d6d567138a4fc7
+  languageName: node
+  linkType: hard
+
+"http-cache-semantics@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "http-cache-semantics@npm:4.1.1"
+  checksum: 83ac0bc60b17a3a36f9953e7be55e5c8f41acc61b22583060e8dedc9dd5e3607c823a88d0926f9150e571f90946835c7fe150732801010845c72cd8bbff1a236
+  languageName: node
+  linkType: hard
+
+"http-proxy-agent@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "http-proxy-agent@npm:7.0.2"
+  dependencies:
+    agent-base: ^7.1.0
+    debug: ^4.3.4
+  checksum: 670858c8f8f3146db5889e1fa117630910101db601fff7d5a8aa637da0abedf68c899f03d3451cac2f83bcc4c3d2dabf339b3aa00ff8080571cceb02c3ce02f3
+  languageName: node
+  linkType: hard
+
+"https-proxy-agent@npm:^7.0.1":
+  version: 7.0.4
+  resolution: "https-proxy-agent@npm:7.0.4"
+  dependencies:
+    agent-base: ^7.0.2
+    debug: 4
+  checksum: daaab857a967a2519ddc724f91edbbd388d766ff141b9025b629f92b9408fc83cee8a27e11a907aede392938e9c398e240d643e178408a59e4073539cde8cfe9
+  languageName: node
+  linkType: hard
+
+"iconv-lite@npm:^0.6.2":
+  version: 0.6.3
+  resolution: "iconv-lite@npm:0.6.3"
+  dependencies:
+    safer-buffer: ">= 2.1.2 < 3.0.0"
+  checksum: 3f60d47a5c8fc3313317edfd29a00a692cc87a19cac0159e2ce711d0ebc9019064108323b5e493625e25594f11c6236647d8e256fbe7a58f4a3b33b89e6d30bf
+  languageName: node
+  linkType: hard
+
+"imurmurhash@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "imurmurhash@npm:0.1.4"
+  checksum: 7cae75c8cd9a50f57dadd77482359f659eaebac0319dd9368bcd1714f55e65badd6929ca58569da2b6494ef13fdd5598cd700b1eba23f8b79c5f19d195a3ecf7
+  languageName: node
+  linkType: hard
+
+"indent-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "indent-string@npm:4.0.0"
+  checksum: 824cfb9929d031dabf059bebfe08cf3137365e112019086ed3dcff6a0a7b698cb80cf67ccccde0e25b9e2d7527aa6cc1fed1ac490c752162496caba3e6699612
+  languageName: node
+  linkType: hard
+
+"ip-address@npm:^9.0.5":
+  version: 9.0.5
+  resolution: "ip-address@npm:9.0.5"
+  dependencies:
+    jsbn: 1.1.0
+    sprintf-js: ^1.1.3
+  checksum: aa15f12cfd0ef5e38349744e3654bae649a34c3b10c77a674a167e99925d1549486c5b14730eebce9fea26f6db9d5e42097b00aa4f9f612e68c79121c71652dc
+  languageName: node
+  linkType: hard
+
+"is-fullwidth-code-point@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "is-fullwidth-code-point@npm:3.0.0"
+  checksum: 44a30c29457c7fb8f00297bce733f0a64cd22eca270f83e58c105e0d015e45c019491a4ab2faef91ab51d4738c670daff901c799f6a700e27f7314029e99e348
+  languageName: node
+  linkType: hard
+
+"is-lambda@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-lambda@npm:1.0.1"
+  checksum: 93a32f01940220532e5948538699ad610d5924ac86093fcee83022252b363eb0cc99ba53ab084a04e4fb62bf7b5731f55496257a4c38adf87af9c4d352c71c35
+  languageName: node
+  linkType: hard
+
+"isexe@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "isexe@npm:2.0.0"
+  checksum: 26bf6c5480dda5161c820c5b5c751ae1e766c587b1f951ea3fcfc973bafb7831ae5b54a31a69bd670220e42e99ec154475025a468eae58ea262f813fdc8d1c62
+  languageName: node
+  linkType: hard
+
+"isexe@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "isexe@npm:3.1.1"
+  checksum: 7fe1931ee4e88eb5aa524cd3ceb8c882537bc3a81b02e438b240e47012eef49c86904d0f0e593ea7c3a9996d18d0f1f3be8d3eaa92333977b0c3a9d353d5563e
+  languageName: node
+  linkType: hard
+
+"jackspeak@npm:^3.1.2":
+  version: 3.4.0
+  resolution: "jackspeak@npm:3.4.0"
+  dependencies:
+    "@isaacs/cliui": ^8.0.2
+    "@pkgjs/parseargs": ^0.11.0
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 350f6f311018bb175ffbe736b19c26ac0b134bb5a17a638169e89594eb0c24ab1c658ab3a2fda24ff63b3b19292e1a5ec19d2255bc526df704e8168d392bef85
+  languageName: node
+  linkType: hard
+
+"jsbn@npm:1.1.0":
+  version: 1.1.0
+  resolution: "jsbn@npm:1.1.0"
+  checksum: 944f924f2bd67ad533b3850eee47603eed0f6ae425fd1ee8c760f477e8c34a05f144c1bd4f5a5dd1963141dc79a2c55f89ccc5ab77d039e7077f3ad196b64965
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
+  version: 10.2.2
+  resolution: "lru-cache@npm:10.2.2"
+  checksum: 98e8fc93691c546f719a76103ef2bee5a3ac823955c755a47641ec41f8c7fafa1baeaba466937cc1cbfa9cfd47e03536d10e2db3158a64ad91ff3a58a32c893e
+  languageName: node
+  linkType: hard
+
+"make-fetch-happen@npm:^13.0.0":
+  version: 13.0.1
+  resolution: "make-fetch-happen@npm:13.0.1"
+  dependencies:
+    "@npmcli/agent": ^2.0.0
+    cacache: ^18.0.0
+    http-cache-semantics: ^4.1.1
+    is-lambda: ^1.0.1
+    minipass: ^7.0.2
+    minipass-fetch: ^3.0.0
+    minipass-flush: ^1.0.5
+    minipass-pipeline: ^1.2.4
+    negotiator: ^0.6.3
+    proc-log: ^4.2.0
+    promise-retry: ^2.0.1
+    ssri: ^10.0.0
+  checksum: 5c9fad695579b79488fa100da05777213dd9365222f85e4757630f8dd2a21a79ddd3206c78cfd6f9b37346819681782b67900ac847a57cf04190f52dda5343fd
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^9.0.4":
+  version: 9.0.5
+  resolution: "minimatch@npm:9.0.5"
+  dependencies:
+    brace-expansion: ^2.0.1
+  checksum: 2c035575eda1e50623c731ec6c14f65a85296268f749b9337005210bb2b34e2705f8ef1a358b188f69892286ab99dc42c8fb98a57bde55c8d81b3023c19cea28
+  languageName: node
+  linkType: hard
+
+"minipass-collect@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "minipass-collect@npm:2.0.1"
+  dependencies:
+    minipass: ^7.0.3
+  checksum: b251bceea62090f67a6cced7a446a36f4cd61ee2d5cea9aee7fff79ba8030e416327a1c5aa2908dc22629d06214b46d88fdab8c51ac76bacbf5703851b5ad342
+  languageName: node
+  linkType: hard
+
+"minipass-fetch@npm:^3.0.0":
+  version: 3.0.5
+  resolution: "minipass-fetch@npm:3.0.5"
+  dependencies:
+    encoding: ^0.1.13
+    minipass: ^7.0.3
+    minipass-sized: ^1.0.3
+    minizlib: ^2.1.2
+  dependenciesMeta:
+    encoding:
+      optional: true
+  checksum: 8047d273236157aab27ab7cd8eab7ea79e6ecd63e8f80c3366ec076cb9a0fed550a6935bab51764369027c414647fd8256c2a20c5445fb250c483de43350de83
+  languageName: node
+  linkType: hard
+
+"minipass-flush@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "minipass-flush@npm:1.0.5"
+  dependencies:
+    minipass: ^3.0.0
+  checksum: 56269a0b22bad756a08a94b1ffc36b7c9c5de0735a4dd1ab2b06c066d795cfd1f0ac44a0fcae13eece5589b908ecddc867f04c745c7009be0b566421ea0944cf
+  languageName: node
+  linkType: hard
+
+"minipass-pipeline@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "minipass-pipeline@npm:1.2.4"
+  dependencies:
+    minipass: ^3.0.0
+  checksum: b14240dac0d29823c3d5911c286069e36d0b81173d7bdf07a7e4a91ecdef92cdff4baaf31ea3746f1c61e0957f652e641223970870e2353593f382112257971b
+  languageName: node
+  linkType: hard
+
+"minipass-sized@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "minipass-sized@npm:1.0.3"
+  dependencies:
+    minipass: ^3.0.0
+  checksum: 79076749fcacf21b5d16dd596d32c3b6bf4d6e62abb43868fac21674078505c8b15eaca4e47ed844985a4514854f917d78f588fcd029693709417d8f98b2bd60
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^3.0.0":
+  version: 3.3.6
+  resolution: "minipass@npm:3.3.6"
+  dependencies:
+    yallist: ^4.0.0
+  checksum: a30d083c8054cee83cdcdc97f97e4641a3f58ae743970457b1489ce38ee1167b3aaf7d815cd39ec7a99b9c40397fd4f686e83750e73e652b21cb516f6d845e48
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "minipass@npm:5.0.0"
+  checksum: 425dab288738853fded43da3314a0b5c035844d6f3097a8e3b5b29b328da8f3c1af6fc70618b32c29ff906284cf6406b6841376f21caaadd0793c1d5a6a620ea
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "minipass@npm:7.1.2"
+  checksum: 2bfd325b95c555f2b4d2814d49325691c7bee937d753814861b0b49d5edcda55cbbf22b6b6a60bb91eddac8668771f03c5ff647dcd9d0f798e9548b9cdc46ee3
+  languageName: node
+  linkType: hard
+
+"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "minizlib@npm:2.1.2"
+  dependencies:
+    minipass: ^3.0.0
+    yallist: ^4.0.0
+  checksum: f1fdeac0b07cf8f30fcf12f4b586795b97be856edea22b5e9072707be51fc95d41487faec3f265b42973a304fe3a64acd91a44a3826a963e37b37bafde0212c3
+  languageName: node
+  linkType: hard
+
+"mistica-example-css@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "mistica-example-css@workspace:."
+  dependencies:
+    vite: ^5.3.1
+  languageName: unknown
+  linkType: soft
+
+"mkdirp@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "mkdirp@npm:1.0.4"
+  bin:
+    mkdirp: bin/cmd.js
+  checksum: a96865108c6c3b1b8e1d5e9f11843de1e077e57737602de1b82030815f311be11f96f09cce59bd5b903d0b29834733e5313f9301e3ed6d6f6fba2eae0df4298f
+  languageName: node
+  linkType: hard
+
+"ms@npm:2.1.2":
+  version: 2.1.2
+  resolution: "ms@npm:2.1.2"
+  checksum: 673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f
+  languageName: node
+  linkType: hard
+
+"nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
+  languageName: node
+  linkType: hard
+
+"negotiator@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "negotiator@npm:0.6.3"
+  checksum: b8ffeb1e262eff7968fc90a2b6767b04cfd9842582a9d0ece0af7049537266e7b2506dfb1d107a32f06dd849ab2aea834d5830f7f4d0e5cb7d36e1ae55d021d9
+  languageName: node
+  linkType: hard
+
+"node-gyp@npm:latest":
+  version: 10.1.0
+  resolution: "node-gyp@npm:10.1.0"
+  dependencies:
+    env-paths: ^2.2.0
+    exponential-backoff: ^3.1.1
+    glob: ^10.3.10
+    graceful-fs: ^4.2.6
+    make-fetch-happen: ^13.0.0
+    nopt: ^7.0.0
+    proc-log: ^3.0.0
+    semver: ^7.3.5
+    tar: ^6.1.2
+    which: ^4.0.0
+  bin:
+    node-gyp: bin/node-gyp.js
+  checksum: 72e2ab4b23fc32007a763da94018f58069fc0694bf36115d49a2b195c8831e12cf5dd1e7a3718fa85c06969aedf8fc126722d3b672ec1cb27e06ed33caee3c60
+  languageName: node
+  linkType: hard
+
+"nopt@npm:^7.0.0":
+  version: 7.2.1
+  resolution: "nopt@npm:7.2.1"
+  dependencies:
+    abbrev: ^2.0.0
+  bin:
+    nopt: bin/nopt.js
+  checksum: 6fa729cc77ce4162cfad8abbc9ba31d4a0ff6850c3af61d59b505653bef4781ec059f8890ecfe93ee8aa0c511093369cca88bfc998101616a2904e715bbbb7c9
+  languageName: node
+  linkType: hard
+
+"p-map@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "p-map@npm:4.0.0"
+  dependencies:
+    aggregate-error: ^3.0.0
+  checksum: cb0ab21ec0f32ddffd31dfc250e3afa61e103ef43d957cc45497afe37513634589316de4eb88abdfd969fe6410c22c0b93ab24328833b8eb1ccc087fc0442a1c
+  languageName: node
+  linkType: hard
+
+"package-json-from-dist@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "package-json-from-dist@npm:1.0.0"
+  checksum: ac706ec856a5a03f5261e4e48fa974f24feb044d51f84f8332e2af0af04fbdbdd5bbbfb9cbbe354190409bc8307c83a9e38c6672c3c8855f709afb0006a009ea
+  languageName: node
+  linkType: hard
+
+"path-key@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "path-key@npm:3.1.1"
+  checksum: 55cd7a9dd4b343412a8386a743f9c746ef196e57c823d90ca3ab917f90ab9f13dd0ded27252ba49dbdfcab2b091d998bc446f6220cd3cea65db407502a740020
+  languageName: node
+  linkType: hard
+
+"path-scurry@npm:^1.11.1":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
+  dependencies:
+    lru-cache: ^10.2.0
+    minipass: ^5.0.0 || ^6.0.2 || ^7.0.0
+  checksum: 890d5abcd593a7912dcce7cf7c6bf7a0b5648e3dee6caf0712c126ca0a65c7f3d7b9d769072a4d1baf370f61ce493ab5b038d59988688e0c5f3f646ee3c69023
+  languageName: node
+  linkType: hard
+
+"picocolors@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "picocolors@npm:1.0.1"
+  checksum: fa68166d1f56009fc02a34cdfd112b0dd3cf1ef57667ac57281f714065558c01828cdf4f18600ad6851cbe0093952ed0660b1e0156bddf2184b6aaf5817553a5
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.2.0
+  checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+  languageName: node
+  linkType: hard
+
+"proc-log@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "proc-log@npm:3.0.0"
+  checksum: 02b64e1b3919e63df06f836b98d3af002b5cd92655cab18b5746e37374bfb73e03b84fe305454614b34c25b485cc687a9eebdccf0242cda8fda2475dd2c97e02
+  languageName: node
+  linkType: hard
+
+"proc-log@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "proc-log@npm:4.2.0"
+  checksum: 98f6cd012d54b5334144c5255ecb941ee171744f45fca8b43b58ae5a0c1af07352475f481cadd9848e7f0250376ee584f6aa0951a856ff8f021bdfbff4eb33fc
+  languageName: node
+  linkType: hard
+
+"promise-retry@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "promise-retry@npm:2.0.1"
+  dependencies:
+    err-code: ^2.0.2
+    retry: ^0.12.0
+  checksum: f96a3f6d90b92b568a26f71e966cbbc0f63ab85ea6ff6c81284dc869b41510e6cdef99b6b65f9030f0db422bf7c96652a3fff9f2e8fb4a0f069d8f4430359429
+  languageName: node
+  linkType: hard
+
+"retry@npm:^0.12.0":
+  version: 0.12.0
+  resolution: "retry@npm:0.12.0"
+  checksum: 623bd7d2e5119467ba66202d733ec3c2e2e26568074923bc0585b6b99db14f357e79bdedb63cab56cec47491c4a0da7e6021a7465ca6dc4f481d3898fdd3158c
+  languageName: node
+  linkType: hard
+
+"rollup@npm:^4.13.0":
+  version: 4.18.0
+  resolution: "rollup@npm:4.18.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": 4.18.0
+    "@rollup/rollup-android-arm64": 4.18.0
+    "@rollup/rollup-darwin-arm64": 4.18.0
+    "@rollup/rollup-darwin-x64": 4.18.0
+    "@rollup/rollup-linux-arm-gnueabihf": 4.18.0
+    "@rollup/rollup-linux-arm-musleabihf": 4.18.0
+    "@rollup/rollup-linux-arm64-gnu": 4.18.0
+    "@rollup/rollup-linux-arm64-musl": 4.18.0
+    "@rollup/rollup-linux-powerpc64le-gnu": 4.18.0
+    "@rollup/rollup-linux-riscv64-gnu": 4.18.0
+    "@rollup/rollup-linux-s390x-gnu": 4.18.0
+    "@rollup/rollup-linux-x64-gnu": 4.18.0
+    "@rollup/rollup-linux-x64-musl": 4.18.0
+    "@rollup/rollup-win32-arm64-msvc": 4.18.0
+    "@rollup/rollup-win32-ia32-msvc": 4.18.0
+    "@rollup/rollup-win32-x64-msvc": 4.18.0
+    "@types/estree": 1.0.5
+    fsevents: ~2.3.2
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm-musleabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-powerpc64le-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 54cde921e763017ce952ba76ec77d58dd9c01e3536c3be628d4af8c59d9b2f0e1e6a11b30fda44845c7b74098646cd972feb3bcd2f4a35d3293366f2eeb0a39e
+  languageName: node
+  linkType: hard
+
+"safer-buffer@npm:>= 2.1.2 < 3.0.0":
+  version: 2.1.2
+  resolution: "safer-buffer@npm:2.1.2"
+  checksum: cab8f25ae6f1434abee8d80023d7e72b598cf1327164ddab31003c51215526801e40b66c5e65d658a0af1e9d6478cadcb4c745f4bd6751f97d8644786c0978b0
+  languageName: node
+  linkType: hard
+
+"semver@npm:^7.3.5":
+  version: 7.6.2
+  resolution: "semver@npm:7.6.2"
+  bin:
+    semver: bin/semver.js
+  checksum: 40f6a95101e8d854357a644da1b8dd9d93ce786d5c6a77227bc69dbb17bea83d0d1d1d7c4cd5920a6df909f48e8bd8a5909869535007f90278289f2451d0292d
+  languageName: node
+  linkType: hard
+
+"shebang-command@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "shebang-command@npm:2.0.0"
+  dependencies:
+    shebang-regex: ^3.0.0
+  checksum: 6b52fe87271c12968f6a054e60f6bde5f0f3d2db483a1e5c3e12d657c488a15474121a1d55cd958f6df026a54374ec38a4a963988c213b7570e1d51575cea7fa
+  languageName: node
+  linkType: hard
+
+"shebang-regex@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "shebang-regex@npm:3.0.0"
+  checksum: 1a2bcae50de99034fcd92ad4212d8e01eedf52c7ec7830eedcf886622804fe36884278f2be8be0ea5fde3fd1c23911643a4e0f726c8685b61871c8908af01222
+  languageName: node
+  linkType: hard
+
+"signal-exit@npm:^4.0.1":
+  version: 4.1.0
+  resolution: "signal-exit@npm:4.1.0"
+  checksum: 64c757b498cb8629ffa5f75485340594d2f8189e9b08700e69199069c8e3070fb3e255f7ab873c05dc0b3cec412aea7402e10a5990cb6a050bd33ba062a6c549
+  languageName: node
+  linkType: hard
+
+"smart-buffer@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "smart-buffer@npm:4.2.0"
+  checksum: b5167a7142c1da704c0e3af85c402002b597081dd9575031a90b4f229ca5678e9a36e8a374f1814c8156a725d17008ae3bde63b92f9cfd132526379e580bec8b
+  languageName: node
+  linkType: hard
+
+"socks-proxy-agent@npm:^8.0.3":
+  version: 8.0.3
+  resolution: "socks-proxy-agent@npm:8.0.3"
+  dependencies:
+    agent-base: ^7.1.1
+    debug: ^4.3.4
+    socks: ^2.7.1
+  checksum: 8fab38821c327c190c28f1658087bc520eb065d55bc07b4a0fdf8d1e0e7ad5d115abbb22a95f94f944723ea969dd771ad6416b1e3cde9060c4c71f705c8b85c5
+  languageName: node
+  linkType: hard
+
+"socks@npm:^2.7.1":
+  version: 2.8.3
+  resolution: "socks@npm:2.8.3"
+  dependencies:
+    ip-address: ^9.0.5
+    smart-buffer: ^4.2.0
+  checksum: 7a6b7f6eedf7482b9e4597d9a20e09505824208006ea8f2c49b71657427f3c137ca2ae662089baa73e1971c62322d535d9d0cf1c9235cf6f55e315c18203eadd
+  languageName: node
+  linkType: hard
+
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+  languageName: node
+  linkType: hard
+
+"sprintf-js@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "sprintf-js@npm:1.1.3"
+  checksum: a3fdac7b49643875b70864a9d9b469d87a40dfeaf5d34d9d0c5b1cda5fd7d065531fcb43c76357d62254c57184a7b151954156563a4d6a747015cfb41021cad0
+  languageName: node
+  linkType: hard
+
+"ssri@npm:^10.0.0":
+  version: 10.0.6
+  resolution: "ssri@npm:10.0.6"
+  dependencies:
+    minipass: ^7.0.3
+  checksum: 4603d53a05bcd44188747d38f1cc43833b9951b5a1ee43ba50535bdfc5fe4a0897472dbe69837570a5417c3c073377ef4f8c1a272683b401857f72738ee57299
+  languageName: node
+  linkType: hard
+
+"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0":
+  version: 4.2.3
+  resolution: "string-width@npm:4.2.3"
+  dependencies:
+    emoji-regex: ^8.0.0
+    is-fullwidth-code-point: ^3.0.0
+    strip-ansi: ^6.0.1
+  checksum: e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb
+  languageName: node
+  linkType: hard
+
+"string-width@npm:^5.0.1, string-width@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "string-width@npm:5.1.2"
+  dependencies:
+    eastasianwidth: ^0.2.0
+    emoji-regex: ^9.2.2
+    strip-ansi: ^7.0.1
+  checksum: 7369deaa29f21dda9a438686154b62c2c5f661f8dda60449088f9f980196f7908fc39fdd1803e3e01541970287cf5deae336798337e9319a7055af89dafa7193
+  languageName: node
+  linkType: hard
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "strip-ansi@npm:6.0.1"
+  dependencies:
+    ansi-regex: ^5.0.1
+  checksum: f3cd25890aef3ba6e1a74e20896c21a46f482e93df4a06567cebf2b57edabb15133f1f94e57434e0a958d61186087b1008e89c94875d019910a213181a14fc8c
+  languageName: node
+  linkType: hard
+
+"strip-ansi@npm:^7.0.1":
+  version: 7.1.0
+  resolution: "strip-ansi@npm:7.1.0"
+  dependencies:
+    ansi-regex: ^6.0.1
+  checksum: 859c73fcf27869c22a4e4d8c6acfe690064659e84bef9458aa6d13719d09ca88dcfd40cbf31fd0be63518ea1a643fe070b4827d353e09533a5b0b9fd4553d64d
+  languageName: node
+  linkType: hard
+
+"tar@npm:^6.1.11, tar@npm:^6.1.2":
+  version: 6.2.1
+  resolution: "tar@npm:6.2.1"
+  dependencies:
+    chownr: ^2.0.0
+    fs-minipass: ^2.0.0
+    minipass: ^5.0.0
+    minizlib: ^2.1.1
+    mkdirp: ^1.0.3
+    yallist: ^4.0.0
+  checksum: f1322768c9741a25356c11373bce918483f40fa9a25c69c59410c8a1247632487edef5fe76c5f12ac51a6356d2f1829e96d2bc34098668a2fc34d76050ac2b6c
+  languageName: node
+  linkType: hard
+
+"unique-filename@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "unique-filename@npm:3.0.0"
+  dependencies:
+    unique-slug: ^4.0.0
+  checksum: 8e2f59b356cb2e54aab14ff98a51ac6c45781d15ceaab6d4f1c2228b780193dc70fae4463ce9e1df4479cb9d3304d7c2043a3fb905bdeca71cc7e8ce27e063df
+  languageName: node
+  linkType: hard
+
+"unique-slug@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unique-slug@npm:4.0.0"
+  dependencies:
+    imurmurhash: ^0.1.4
+  checksum: 0884b58365af59f89739e6f71e3feacb5b1b41f2df2d842d0757933620e6de08eff347d27e9d499b43c40476cbaf7988638d3acb2ffbcb9d35fd035591adfd15
+  languageName: node
+  linkType: hard
+
+"vite@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "vite@npm:5.3.2"
+  dependencies:
+    esbuild: ^0.21.3
+    fsevents: ~2.3.3
+    postcss: ^8.4.38
+    rollup: ^4.13.0
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: d6872cb72701ec4b8d8dbccc5deacb5af03c3f247df02750787d6dcf4e49e207effed7a06e4f103008a918188cdf0789ff7348db451ebd0d59ef1a22ae4a267d
+  languageName: node
+  linkType: hard
+
+"which@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "which@npm:2.0.2"
+  dependencies:
+    isexe: ^2.0.0
+  bin:
+    node-which: ./bin/node-which
+  checksum: 1a5c563d3c1b52d5f893c8b61afe11abc3bab4afac492e8da5bde69d550de701cf9806235f20a47b5c8fa8a1d6a9135841de2596535e998027a54589000e66d1
+  languageName: node
+  linkType: hard
+
+"which@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "which@npm:4.0.0"
+  dependencies:
+    isexe: ^3.1.1
+  bin:
+    node-which: bin/which.js
+  checksum: f17e84c042592c21e23c8195108cff18c64050b9efb8459589116999ea9da6dd1509e6a1bac3aeebefd137be00fabbb61b5c2bc0aa0f8526f32b58ee2f545651
+  languageName: node
+  linkType: hard
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version: 7.0.0
+  resolution: "wrap-ansi@npm:7.0.0"
+  dependencies:
+    ansi-styles: ^4.0.0
+    string-width: ^4.1.0
+    strip-ansi: ^6.0.0
+  checksum: a790b846fd4505de962ba728a21aaeda189b8ee1c7568ca5e817d85930e06ef8d1689d49dbf0e881e8ef84436af3a88bc49115c2e2788d841ff1b8b5b51a608b
+  languageName: node
+  linkType: hard
+
+"wrap-ansi@npm:^8.1.0":
+  version: 8.1.0
+  resolution: "wrap-ansi@npm:8.1.0"
+  dependencies:
+    ansi-styles: ^6.1.0
+    string-width: ^5.0.1
+    strip-ansi: ^7.0.1
+  checksum: 371733296dc2d616900ce15a0049dca0ef67597d6394c57347ba334393599e800bab03c41d4d45221b6bc967b8c453ec3ae4749eff3894202d16800fdfe0e238
+  languageName: node
+  linkType: hard
+
+"yallist@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "yallist@npm:4.0.0"
+  checksum: 343617202af32df2a15a3be36a5a8c0c8545208f3d3dfbc6bb7c3e3b7e8c6f8e7485432e4f3b88da3031a6e20afa7c711eded32ddfb122896ac5d914e75848d5
+  languageName: node
+  linkType: hard
diff --git a/examples/vite/index.html b/examples/vite/index.html
index 3021743eca..1a97ba8a53 100644
--- a/examples/vite/index.html
+++ b/examples/vite/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS + Mistica</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS + Mistica</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/packages/generate-design-tokens/css-generator.js b/packages/generate-design-tokens/css-generator.js
new file mode 100644
index 0000000000..e008491331
--- /dev/null
+++ b/packages/generate-design-tokens/css-generator.js
@@ -0,0 +1,352 @@
+import fs from 'fs';
+import path from 'path';
+
+const pxToRem = (px) => `${(px / 16).toFixed(3)}rem`;
+
+const fromHexToRgb = (hexColor) => {
+    if (!hexColor.startsWith('#')) {
+        throw Error(`Bad hex color, ${hexColor}`);
+    }
+    if (hexColor.length === 4) {
+        return [
+            parseInt(hexColor.substr(-3, 1).repeat(2), 16),
+            parseInt(hexColor.substr(-2, 1).repeat(2), 16),
+            parseInt(hexColor.substr(-1, 1).repeat(2), 16),
+        ];
+    }
+    if (hexColor.length === 7) {
+        return [
+            parseInt(hexColor.substr(-6, 2), 16),
+            parseInt(hexColor.substr(-4, 2), 16),
+            parseInt(hexColor.substr(-2, 2), 16),
+        ];
+    }
+    throw Error(`Bad hex color, ${hexColor}`);
+};
+
+export const buildRadius = (radiusDescription) => {
+    if (radiusDescription.value.endsWith('%')) {
+        return radiusDescription.value;
+    }
+    if (radiusDescription.value === 'circle') {
+        return '50%';
+    }
+    if (radiusDescription.value.endsWith('px')) {
+        return radiusDescription.value;
+    }
+    if (/\d+/.test(radiusDescription.value)) {
+        return `${radiusDescription.value}px`;
+    }
+
+    throw new Error(`Unknown radius format: ${radiusDescription.value}`);
+};
+
+const prefix = 'mistica-';
+const colorSchemeSelector = (colorScheme) => `[data-${prefix}color-scheme="${colorScheme}"]`;
+const buildVarName = (propertyName, name) => `--${prefix}${propertyName}-${name}`;
+const buildColorVarName = (colorName) => buildVarName('color', colorName);
+const buildBorderRadiusVarName = (radiusName) => buildVarName('border-radius', radiusName);
+const buildFontSizeVarName = (textPreset) => buildVarName('font-size', textPreset);
+const buildLineHeightVarName = (textPreset) => buildVarName('line-height', textPreset);
+const buildFontWeightVarName = (textPreset) => buildVarName('font-weight', textPreset);
+const tabletMediaQuery = '@media (min-width: 768px)';
+const desktopMediaQuery = '@media (min-width: 1024px)';
+const largeDesktopMediaQuery = '@media (min-width: 1368px)';
+
+export const generateSkinCssSrc = (skinName, DESIGN_TOKENS_FOLDER) => {
+    const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`), 'utf8');
+    const designTokens = JSON.parse(designTokensFile);
+
+    const skinSelector = `[data-${prefix}skin='${skinName}']`;
+    const palettePrefix = prefix + `${skinName}-`;
+    const buildPaletteColorVarName = (colorName) => `--${palettePrefix}${colorName}`;
+    const buildRawPaletteColorVarName = (colorName) => `--${palettePrefix}raw-${colorName}`;
+
+    const usedPaleteColors = new Set();
+    const usedRawPaletteColors = new Set();
+
+    /**
+     * @param {{angle: number, colors: Array<{
+     *     value: string,
+     *     stop: number, // value from 0 to 1
+     * }>}} gradientDescription
+     * @returns {string}
+     */
+    const buildCssGradient = (gradientDescription) => {
+        const stops = gradientDescription.colors.map((color) => {
+            // eslint-disable-next-line no-use-before-define
+            return `${buildCssColor(color)} ${color.stop * 100}%`;
+        });
+        return `linear-gradient(${gradientDescription.angle}deg, ${stops.join(', ')})`;
+    };
+
+    const buildCssColor = (colorDescription) => {
+        if (colorDescription.type === 'linear-gradient') {
+            return buildCssGradient(colorDescription.value);
+        }
+
+        if (colorDescription.value.startsWith('{palette.') && colorDescription.value.endsWith('}')) {
+            const paletteColorName = colorDescription.value.replace('{palette.', '').replace('}', '');
+            usedPaleteColors.add(paletteColorName);
+            return `var(${buildPaletteColorVarName(paletteColorName)})`;
+        }
+
+        // https://regexper.com/#%2Frgba%5C%28%5C%7Bpalette%5C.%28.%2B%29%5C%7D%2C%20%28%5B01%5D%28%3F%3A%5C.%5Cd%2B%29%3F%29%5C%29%2F
+        const colorWithAlphaRegExp = /rgba\(\{palette\.(.+)\}, ([01](?:\.\d+)?)\)/;
+        const colorWithAlphaMatches = colorDescription.value.match(colorWithAlphaRegExp);
+
+        if (colorWithAlphaMatches) {
+            const colorName = colorWithAlphaMatches[1];
+            const alpha = colorWithAlphaMatches[2];
+            usedRawPaletteColors.add(colorName);
+            return `rgba(var(${buildRawPaletteColorVarName(colorName)}), ${alpha})`;
+        }
+
+        throw new Error(`Unknown color format: ${colorDescription.value}`);
+    };
+
+    const lightColors = Object.entries(designTokens.light)
+        .map(
+            ([colorName, colorDescription]) =>
+                `${buildColorVarName(colorName)}: ${buildCssColor(colorDescription)};`
+        )
+        .join('\n');
+
+    const darkModeColors = Object.entries(designTokens.dark)
+        .map(
+            ([colorName, colorDescription]) =>
+                `${buildColorVarName(colorName)}: ${buildCssColor(colorDescription)};`
+        )
+        .join('\n');
+
+    const forceLightModeColors = Object.keys(designTokens.dark)
+        .map(
+            (colorName) => `${buildColorVarName(colorName)}: ${buildCssColor(designTokens.light[colorName])};`
+        )
+        .join('\n');
+
+    const paletteColors = Array.from(usedPaleteColors)
+        .map((colorName) => {
+            return `${buildPaletteColorVarName(colorName)}: ${designTokens.global.palette[colorName].value};`;
+        })
+        .join('\n');
+
+    const rawPaletteColors = Array.from(usedRawPaletteColors)
+        .map((colorName) => {
+            const colorValue = designTokens.global.palette[colorName].value;
+            const [r, g, b] = fromHexToRgb(colorValue);
+            return `${buildRawPaletteColorVarName(colorName)}: ${r}, ${g}, ${b};`;
+        })
+        .join('\n');
+
+    const borderRadii = Object.entries(designTokens.radius)
+        .map(
+            ([radiusName, radiusDescription]) =>
+                `${buildBorderRadiusVarName(radiusName)}: ${buildRadius(radiusDescription)};`
+        )
+        .join('\n');
+
+    const textPresets = {
+        1: {
+            size: {mobile: 12, desktop: 14},
+            lineHeight: {mobile: 16, desktop: 20},
+        },
+        2: {
+            size: {mobile: 14, desktop: 16},
+            lineHeight: {mobile: 20, desktop: 24},
+        },
+        3: {
+            size: {mobile: 16, desktop: 18},
+            lineHeight: {mobile: 24, desktop: 24},
+        },
+        4: {
+            size: {mobile: 18, desktop: 20},
+            lineHeight: {mobile: 24, desktop: 28},
+        },
+        5: {
+            size: {mobile: 20, desktop: 28},
+            lineHeight: {mobile: 24, desktop: 32},
+        },
+        6: {
+            size: {mobile: 24, desktop: 32},
+            lineHeight: {mobile: 32, desktop: 40},
+        },
+        7: {
+            size: {mobile: 28, desktop: 40},
+            lineHeight: {mobile: 32, desktop: 48},
+        },
+        8: {
+            size: {mobile: 32, desktop: 48},
+            lineHeight: {mobile: 40, desktop: 56},
+        },
+        9: {
+            size: {mobile: 40, desktop: 56},
+            lineHeight: {mobile: 48, desktop: 64},
+        },
+        10: {
+            size: {mobile: 48, desktop: 64},
+            lineHeight: {mobile: 56, desktop: 72},
+        },
+        cardTitle: {
+            size: {mobile: 20, desktop: 24},
+            lineHeight: {mobile: 24, desktop: 28},
+        },
+    };
+    Object.entries(designTokens.text).forEach(([textAttribute, textAttributeConfig]) => {
+        Object.entries(textAttributeConfig).forEach(([presetName, {value}]) => {
+            presetName = presetName.startsWith('text') ? presetName.replace('text', '') : presetName;
+
+            textPresets[presetName] = {
+                ...(textPresets[presetName] ?? {}),
+                [textAttribute]: value,
+            };
+        });
+    });
+
+    const textVars = Object.entries(textPresets)
+        .map(([presetName, preset]) => {
+            const sizeVar = preset.size
+                ? `${buildFontSizeVarName(presetName)}: ${pxToRem(preset.size.mobile)};`
+                : '';
+            const lineHeightVar = preset.lineHeight
+                ? `${buildLineHeightVarName(presetName)}: ${pxToRem(preset.lineHeight.mobile)};`
+                : '';
+            const weightVar = preset.weight
+                ? `${buildFontWeightVarName(presetName)}: ${
+                      {
+                          light: 300,
+                          regular: 400,
+                          medium: 500,
+                          bold: 700,
+                      }[preset.weight]
+                  };`
+                : '';
+            return [sizeVar, lineHeightVar, weightVar].filter(Boolean).join('\n');
+        })
+        .join('\n');
+
+    const desktopTextVars = Object.entries(textPresets)
+        .map(([presetName, preset]) => {
+            const sizeVar = preset.size
+                ? `${buildFontSizeVarName(presetName)}: ${pxToRem(preset.size.desktop)};`
+                : '';
+            const lineHeightVar = preset.lineHeight
+                ? `${buildLineHeightVarName(presetName)}: ${pxToRem(preset.lineHeight.desktop)};`
+                : '';
+            return [sizeVar, lineHeightVar].filter(Boolean).join('\n');
+        })
+        .join('\n');
+
+    return `
+${skinSelector} {
+    /* Palette colors */
+    ${paletteColors}
+
+    /* Raw palette colors, for use with rgba() */
+    ${rawPaletteColors}
+
+    /* Colors */
+    ${lightColors}
+
+    /* Border radius */
+    ${borderRadii}
+
+    /* Text */
+    ${textVars}
+}
+
+${skinSelector}${colorSchemeSelector('dark')} {
+    ${darkModeColors}
+}
+
+@media (prefers-color-scheme: dark) {
+    ${skinSelector} {
+        ${darkModeColors}
+    }
+    
+    ${skinSelector}${colorSchemeSelector('light')} {
+        ${forceLightModeColors}
+    }
+}
+
+${desktopMediaQuery} {
+    ${skinSelector} {
+        /* Text */
+        ${desktopTextVars}
+    }
+}
+`;
+};
+
+export const generateCommonCssSrc = (DESIGN_TOKENS_FOLDER) => {
+    const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `movistar.json`), 'utf8');
+    const designTokens = JSON.parse(designTokensFile);
+
+    const textPresets = new Set([
+        'text1',
+        'text2',
+        'text3',
+        'text4',
+        'text5',
+        'text6',
+        'text7',
+        'text8',
+        'text9',
+        'text10',
+        ...Object.values(designTokens.text).flatMap(Object.keys),
+    ]);
+    const textClasses = Array.from(textPresets)
+        .map((presetName) => (presetName.startsWith('text') ? presetName.replace('text', '') : presetName))
+        .map(
+            (presetName) => `.${prefix}text-${presetName} {
+                font-size: var(${buildFontSizeVarName(presetName)});
+                line-height: var(${buildLineHeightVarName(presetName)});
+                font-weight: var(${buildFontWeightVarName(presetName)});
+            }`
+        )
+        .join('\n');
+
+    return `
+/* Default text color */
+[data-${prefix}skin] {
+    color: var(${buildColorVarName('textPrimary')});
+    background: var(${buildColorVarName('background')});
+}
+
+/* text utility classes */
+${textClasses}
+
+/* Boxed */
+.${prefix}boxed {
+    border: 1px solid var(${buildColorVarName('border')});
+    border-radius: var(${buildBorderRadiusVarName('container')});
+    background: var(${buildColorVarName('backgroundContainer')});
+}
+
+/* Responsive layout */
+.${prefix}responsive-layout {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    margin: 0 var(--${prefix}responsive-layout-margin);
+    --${prefix}responsive-layout-margin: 16px;
+}
+
+${tabletMediaQuery} {
+    .${prefix}responsive-layout {
+        --${prefix}responsive-layout-margin: 24px;
+    }
+}
+
+${desktopMediaQuery} {
+    .${prefix}responsive-layout {
+        --${prefix}responsive-layout-margin: 40px;
+    }
+}
+
+${largeDesktopMediaQuery} {
+    .${prefix}responsive-layout {
+        --${prefix}responsive-layout-margin: calc((100vw - 1224px) / 2);
+    }
+}
+    `;
+};
diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js
index 52caff64c1..2f1ce8b455 100644
--- a/packages/generate-design-tokens/index.js
+++ b/packages/generate-design-tokens/index.js
@@ -1,5 +1,8 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
+import url from 'url';
+// eslint-disable-next-line import/extensions
+import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
 
 /*
 By default, this script will look for the design tokens inside .github folder but you may want to clone the mistica-design repo elsewhere.
@@ -13,11 +16,14 @@ To run this script locally using a custom path for the tokens, you can do the fo
     DESIGN_TOKENS_FOLDER="/path/to/mistica-design/tokens" node index.js
 */
 
-const DESIGN_TOKENS_FOLDER =
-    process.env.DESIGN_TOKENS_FOLDER ||
-    path.join(__dirname, '..', '..', '.github', 'mistica-design', 'tokens');
+const DESIGN_TOKENS_FOLDER = process.env.DESIGN_TOKENS_FOLDER || '../../../mistica-design/tokens/';
 
-const SKINS_FOLDER = path.join(__dirname, '..', '..', 'src', 'skins');
+// in node >= 20 we could use import.meta.dirname instead
+// @ts-ignore
+const currentDir = url.fileURLToPath(new URL('.', import.meta.url));
+
+const SKINS_FOLDER = path.join(currentDir, '..', '..', 'src', 'skins');
+const CSS_FOLDER = path.join(currentDir, '..', '..', 'css');
 
 const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'o2-new', 'telefonica', 'vivo', 'vivo-new', 'tu'];
 
@@ -68,23 +74,6 @@ const buildColor = (colorDescription) => {
     throw new Error(`Unknown color format: ${colorDescription.value}`);
 };
 
-const buildRadius = (radiusDescription) => {
-    if (radiusDescription.value.endsWith('%')) {
-        return radiusDescription.value;
-    }
-    if (radiusDescription.value === 'circle') {
-        return '50%';
-    }
-    if (radiusDescription.value.endsWith('px')) {
-        return radiusDescription.value;
-    }
-    if (/\d+/.test(radiusDescription.value)) {
-        return `${radiusDescription.value}px`;
-    }
-
-    throw new Error(`Unknown radius format: ${radiusDescription.value}`);
-};
-
 const generateSkinSrc = (skinName) => {
     const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`), 'utf8');
     const needsApplyAlphaImport = designTokensFile.includes('rgba');
@@ -166,12 +155,19 @@ const generateSkinFiles = () => {
 
         const skinSrc = generateSkinSrc(skinName);
         fs.writeFileSync(path.join(SKINS_FOLDER, `${skinName}.tsx`), skinSrc);
+
+        const skinCssSrc = generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER);
+        fs.writeFileSync(path.join(CSS_FOLDER, `${skinName}.css`), skinCssSrc);
+
         anyGeneratedSkin = skinName;
     });
 
     if (anyGeneratedSkin) {
         const typesSrc = generateColorTypesSrc(anyGeneratedSkin);
         fs.writeFileSync(path.join(SKINS_FOLDER, 'types', 'colors.tsx'), typesSrc);
+
+        const commonCssSrc = generateCommonCssSrc(DESIGN_TOKENS_FOLDER);
+        fs.writeFileSync(path.join(CSS_FOLDER, `mistica-common.css`), commonCssSrc);
     }
 };
 
diff --git a/packages/generate-design-tokens/package.json b/packages/generate-design-tokens/package.json
index 69541fd133..210a24edd2 100644
--- a/packages/generate-design-tokens/package.json
+++ b/packages/generate-design-tokens/package.json
@@ -1,4 +1,5 @@
 {
     "name": "generate-design-tokens",
+    "type": "module",
     "packageManager": "yarn@3.2.4"
 }
diff --git a/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-1-snap.png
index 61d5a22d62..6d1b3db6db 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-1-snap.png
index 7bdb539a74..24b0d9e474 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/text-screenshot-test-tsx-text-in-mobile-ios-1-snap.png differ
diff --git a/src/__stories__/text-story.tsx b/src/__stories__/text-story.tsx
index 5809b0b967..2c3604dee6 100644
--- a/src/__stories__/text-story.tsx
+++ b/src/__stories__/text-story.tsx
@@ -33,7 +33,7 @@ export const TextComponents: StoryComponent = () => (
 
         <Text3 light>Text3 Light 16/24 (Mobile) | 18/24 (Desktop)</Text3>
 
-        <Text2 medium>Text2 Medium 14/24 (Mobile) | 16/24 (Desktop)</Text2>
+        <Text2 medium>Text2 Medium 14/20 (Mobile) | 16/24 (Desktop)</Text2>
 
         <Text2 regular>Text2 Regular 14/20 (Mobile) | 16/24 (Desktop)</Text2>
 
diff --git a/src/skins/vivo-new.tsx b/src/skins/vivo-new.tsx
index 9b6bbb0518..39b99d3dfa 100644
--- a/src/skins/vivo-new.tsx
+++ b/src/skins/vivo-new.tsx
@@ -159,7 +159,7 @@ export const getVivoNewSkin: GetKnownSkin = () => {
             textNavigationBarSecondary: palette.vivoPurpleLight50,
             textNavigationSearchBarHint: palette.vivoPurpleLight50,
             textNavigationSearchBarText: palette.white,
-            textAppBar: palette.grey5,
+            textAppBar: palette.grey4,
             textAppBarSelected: palette.vivoPurple,
             customTabsBackground: palette.white,
             tagTextPromo: palette.vivoPurple,