diff --git a/.github/workflows/import-design-tokens.yml b/.github/workflows/import-design-tokens.yml
index 878252469a..a0dbe8bcbd 100644
--- a/.github/workflows/import-design-tokens.yml
+++ b/.github/workflows/import-design-tokens.yml
@@ -58,7 +58,7 @@ jobs:
               run: yarn install --immutable --immutable-cache
 
             - name: Generate skins from design tokens
-              run: cd packages/generate-design-tokens && yarn && node index.js
+              run: cd packages/generate-design-tokens && yarn && node index.ts
 
             - name: Prettier
               run: yarn prettier src/skins --write
diff --git a/css/blau.css b/css/blau.css
index 1e8912d61e..6a66cb64e4 100644
--- a/css/blau.css
+++ b/css/blau.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='blau'] {
     /* Palette colors */
     --mistica-blau-white: #ffffff;
diff --git a/css/community/cyber.css b/css/community/cyber.css
new file mode 100644
index 0000000000..715b8b4f1f
--- /dev/null
+++ b/css/community/cyber.css
@@ -0,0 +1,1490 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
+[data-mistica-skin='cyber'] {
+    /* Palette colors */
+    --mistica-cyber-white: #ffffff;
+    --mistica-cyber-red10: #f9eeed;
+    --mistica-cyber-brand: #0066ff;
+    --mistica-cyber-brand70: #0356c9;
+    --mistica-cyber-brand10: #f7f7ff;
+    --mistica-cyber-grey900: #031a34;
+    --mistica-cyber-grey100: #d1d5e4;
+    --mistica-cyber-grey15: #f5f5f5;
+    --mistica-cyber-grey400: #6e7894;
+    --mistica-cyber-red50: #d22a1e;
+    --mistica-cyber-red60: #bf2618;
+    --mistica-cyber-grey10: #f2f2f2;
+    --mistica-cyber-black: #000000;
+    --mistica-cyber-brand15: #e5f0ff;
+    --mistica-cyber-brand30: #80b3ff;
+    --mistica-cyber-grey500: #5a637c;
+    --mistica-cyber-teal: #75c0c7;
+    --mistica-cyber-yellow60: #bea537;
+    --mistica-cyber-purple: #b86be8;
+    --mistica-cyber-red20: #f2b1a5;
+    --mistica-cyber-teal10: #ebffff;
+    --mistica-cyber-yellow15: #fcf7db;
+    --mistica-cyber-purple10: #f8f0fd;
+    --mistica-cyber-teal70: #528889;
+    --mistica-cyber-purple70: #9e2eb1;
+    --mistica-cyber-grey300: #8f97af;
+    --mistica-cyber-purple80: #471551;
+    --mistica-cyber-teal80: #253d3c;
+    --mistica-cyber-yellow80: #473515;
+    --mistica-cyber-teal20: #bfeaec;
+    --mistica-cyber-darkModeBlack: #070706;
+    --mistica-cyber-darkModeGrey: #151414;
+    --mistica-cyber-grey700: #2f4255;
+    --mistica-cyber-grey800: #393f46;
+    --mistica-cyber-darkModeBrand: #227aff;
+    --mistica-cyber-red30: #d6786b;
+    --mistica-cyber-brand20: #b2d1ff;
+    --mistica-cyber-grey200: #b0b6ca;
+    --mistica-cyber-brandDark: #00264d;
+    --mistica-cyber-teal40: #9ed3d8;
+    --mistica-cyber-yellow40: #f0d57c;
+    --mistica-cyber-purple40: #cd97ef;
+    --mistica-cyber-brand80: #002e73;
+    --mistica-cyber-red90: #491818;
+
+    /* Raw palette colors, for use with rgba() */
+    --mistica-cyber-raw-brand70: 3, 86, 201;
+    --mistica-cyber-raw-darkModeBlack: 7, 7, 6;
+    --mistica-cyber-raw-white: 255, 255, 255;
+    --mistica-cyber-raw-grey900: 3, 26, 52;
+    --mistica-cyber-raw-black: 0, 0, 0;
+    --mistica-cyber-raw-brand: 0, 102, 255;
+    --mistica-cyber-raw-brand80: 0, 46, 115;
+    --mistica-cyber-raw-darkModeBrand: 34, 122, 255;
+    --mistica-cyber-raw-darkModeGrey: 21, 20, 20;
+    --mistica-cyber-raw-red50: 210, 42, 30;
+    --mistica-cyber-raw-brand30: 128, 179, 255;
+
+    /* Colors */
+    --mistica-color-appBarBackground: var(--mistica-cyber-white);
+    --mistica-color-background: var(--mistica-cyber-white);
+    --mistica-color-backgroundContainer: var(--mistica-cyber-white);
+    --mistica-color-backgroundContainerError: var(--mistica-cyber-red10);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
+    --mistica-color-backgroundContainerBrand: var(--mistica-cyber-brand);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.2);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.4);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-brand70);
+    --mistica-color-backgroundContainerNegative: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-brand70);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-brand10);
+    --mistica-color-backgroundBrand: var(--mistica-cyber-brand);
+    --mistica-color-backgroundNegative: var(--mistica-cyber-grey900);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-brand);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-grey900), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey100);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-brand70);
+    --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-cyber-raw-black), 0.2);
+    --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-brand70);
+    --mistica-color-navigationBarBackground: var(--mistica-cyber-brand);
+    --mistica-color-backgroundAlternative: var(--mistica-cyber-brand10);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-brand), 0.08);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-brand), 0.12);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-brand), 0.16);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.16);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.24);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.32);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.28);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.35);
+    --mistica-color-backgroundBrandTop: var(--mistica-cyber-brand);
+    --mistica-color-backgroundBrandBottom: var(--mistica-cyber-brand);
+    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+    --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.08);
+    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
+    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
+    --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.17);
+    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
+    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
+    --mistica-color-skeletonWave: var(--mistica-cyber-grey100);
+    --mistica-color-borderLow: var(--mistica-cyber-grey15);
+    --mistica-color-border: var(--mistica-cyber-grey100);
+    --mistica-color-borderHigh: var(--mistica-cyber-grey400);
+    --mistica-color-borderSelected: var(--mistica-cyber-brand);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
+    --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-cyber-red10);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-cyber-red10);
+    --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-cyber-red10);
+    --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-cyber-red10);
+    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
+    --mistica-color-buttonLinkBackgroundPressed: var(--mistica-cyber-brand10);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-cyber-grey10);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-cyber-grey10);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-cyber-grey10);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-cyber-grey10);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-black);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-brand);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-brand70);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonSecondary: var(--mistica-cyber-black);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
+    --mistica-color-textLink: var(--mistica-cyber-brand);
+    --mistica-color-textLinkInverse: var(--mistica-cyber-white);
+    --mistica-color-textLinkNegative: var(--mistica-cyber-white);
+    --mistica-color-textLinkBrand: var(--mistica-cyber-white);
+    --mistica-color-textLinkMedia: var(--mistica-cyber-white);
+    --mistica-color-textLinkDanger: var(--mistica-cyber-red50);
+    --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
+    --mistica-color-textLinkSnackbar: var(--mistica-cyber-brand30);
+    --mistica-color-textLinkNeutral: var(--mistica-cyber-grey900);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-grey900);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-grey900);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-grey900);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-grey900);
+    --mistica-color-textActivated: var(--mistica-cyber-brand70);
+    --mistica-color-textBrand: var(--mistica-cyber-brand70);
+    --mistica-color-inputBorder: var(--mistica-cyber-grey400);
+    --mistica-color-inputBorderInverse: var(--mistica-cyber-white);
+    --mistica-color-inputBorderNegative: var(--mistica-cyber-white);
+    --mistica-color-inputBorderBrand: var(--mistica-cyber-white);
+    --mistica-color-completedStep: var(--mistica-cyber-brand);
+    --mistica-color-completedStepInverse: var(--mistica-cyber-brand70);
+    --mistica-color-completedStepNegative: var(--mistica-cyber-brand70);
+    --mistica-color-completedStepBrand: var(--mistica-cyber-brand70);
+    --mistica-color-control: var(--mistica-cyber-grey400);
+    --mistica-color-controlActivated: var(--mistica-cyber-brand);
+    --mistica-color-controlInverse: var(--mistica-cyber-brand10);
+    --mistica-color-controlNegative: var(--mistica-cyber-brand10);
+    --mistica-color-controlBrand: var(--mistica-cyber-brand10);
+    --mistica-color-controlActivatedInverse: var(--mistica-cyber-white);
+    --mistica-color-controlActivatedNegative: var(--mistica-cyber-white);
+    --mistica-color-controlActivatedBrand: var(--mistica-cyber-white);
+    --mistica-color-controlError: var(--mistica-cyber-red50);
+    --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
+    --mistica-color-barTrack: var(--mistica-cyber-grey100);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-cyber-raw-white), 0.3);
+    --mistica-color-barTrackNegative: rgba(var(--mistica-cyber-raw-white), 0.3);
+    --mistica-color-barTrackBrand: rgba(var(--mistica-cyber-raw-white), 0.3);
+    --mistica-color-loadingBar: var(--mistica-cyber-brand30);
+    --mistica-color-loadingBarBackground: var(--mistica-cyber-brand70);
+    --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-grey100);
+    --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-white);
+    --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
+    --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-grey100);
+    --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-brand10);
+    --mistica-color-iosControlKnob: var(--mistica-cyber-white);
+    --mistica-color-controlKnobInverse: var(--mistica-cyber-brand);
+    --mistica-color-controlKnobNegative: var(--mistica-cyber-brand);
+    --mistica-color-controlKnobBrand: var(--mistica-cyber-brand);
+    --mistica-color-divider: var(--mistica-cyber-grey100);
+    --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.2);
+    --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
+    --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.2);
+    --mistica-color-navigationBarDivider: var(--mistica-cyber-brand);
+    --mistica-color-badge: var(--mistica-cyber-red50);
+    --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red50);
+    --mistica-color-feedbackInfoBackground: var(--mistica-cyber-grey900);
+    --mistica-color-brand: var(--mistica-cyber-brand);
+    --mistica-color-brandHigh: var(--mistica-cyber-brand70);
+    --mistica-color-inverse: var(--mistica-cyber-white);
+    --mistica-color-negative: var(--mistica-cyber-white);
+    --mistica-color-neutralHigh: var(--mistica-cyber-grey900);
+    --mistica-color-neutralHighNegative: var(--mistica-cyber-white);
+    --mistica-color-neutralHighBrand: var(--mistica-cyber-white);
+    --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
+    --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
+    --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
+    --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
+    --mistica-color-neutralLow: var(--mistica-cyber-brand10);
+    --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey100);
+    --mistica-color-textPrimary: var(--mistica-cyber-grey900);
+    --mistica-color-textPrimaryInverse: var(--mistica-cyber-white);
+    --mistica-color-textPrimaryNegative: var(--mistica-cyber-white);
+    --mistica-color-textPrimaryBrand: var(--mistica-cyber-white);
+    --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
+    --mistica-color-textSecondary: var(--mistica-cyber-grey500);
+    --mistica-color-textSecondaryInverse: var(--mistica-cyber-white);
+    --mistica-color-textSecondaryNegative: var(--mistica-cyber-white);
+    --mistica-color-textSecondaryBrand: var(--mistica-cyber-white);
+    --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
+    --mistica-color-error: var(--mistica-cyber-red50);
+    --mistica-color-textError: var(--mistica-cyber-red50);
+    --mistica-color-textErrorInverse: var(--mistica-cyber-white);
+    --mistica-color-textErrorNegative: var(--mistica-cyber-white);
+    --mistica-color-textErrorBrand: var(--mistica-cyber-white);
+    --mistica-color-success: var(--mistica-cyber-teal);
+    --mistica-color-warning: var(--mistica-cyber-yellow60);
+    --mistica-color-promo: var(--mistica-cyber-purple);
+    --mistica-color-highlight: var(--mistica-cyber-red20);
+    --mistica-color-successLow: var(--mistica-cyber-teal10);
+    --mistica-color-warningLow: var(--mistica-cyber-yellow15);
+    --mistica-color-errorLow: var(--mistica-cyber-red10);
+    --mistica-color-promoLow: var(--mistica-cyber-purple10);
+    --mistica-color-brandLow: var(--mistica-cyber-brand15);
+    --mistica-color-successHigh: var(--mistica-cyber-teal70);
+    --mistica-color-warningHigh: var(--mistica-cyber-yellow60);
+    --mistica-color-errorHigh: var(--mistica-cyber-red60);
+    --mistica-color-promoHigh: var(--mistica-cyber-purple70);
+    --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
+    --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
+    --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
+    --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
+    --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
+    --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
+    --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
+    --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
+    --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
+    --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
+    --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
+    --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-brand10);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-brand10);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
+    --mistica-color-textAppBar: var(--mistica-cyber-grey300);
+    --mistica-color-textAppBarSelected: var(--mistica-cyber-brand70);
+    --mistica-color-iosGlassAppBar: var(--mistica-cyber-grey900);
+    --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-brand70);
+    --mistica-color-customTabsBackground: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextPromo: var(--mistica-cyber-purple80);
+    --mistica-color-tagTextActive: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextInactive: var(--mistica-cyber-grey500);
+    --mistica-color-tagTextInfo: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextSuccess: var(--mistica-cyber-teal80);
+    --mistica-color-tagTextWarning: var(--mistica-cyber-yellow80);
+    --mistica-color-tagTextError: var(--mistica-cyber-red60);
+    --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple10);
+    --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundInactive: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand15);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal20);
+    --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow15);
+    --mistica-color-tagBackgroundError: var(--mistica-cyber-red10);
+    --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple80);
+    --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple80);
+    --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple80);
+    --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey500);
+    --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey500);
+    --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey500);
+    --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand70);
+    --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal80);
+    --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal80);
+    --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal80);
+    --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow80);
+    --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow80);
+    --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow80);
+    --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red60);
+    --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red60);
+    --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red60);
+    --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple10);
+    --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple10);
+    --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple10);
+    --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-brand10);
+    --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand15);
+    --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand15);
+    --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand15);
+    --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal10);
+    --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal10);
+    --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal10);
+    --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow15);
+    --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow15);
+    --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow15);
+    --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red10);
+    --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red10);
+    --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red10);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-cyber-raw-black), 0) 0%,
+        rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
+        rgba(var(--mistica-cyber-raw-black), 0.7) 100%
+    );
+    --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
+
+    /* Border radius */
+    --mistica-border-radius-avatar: 50%;
+    --mistica-border-radius-bar: 0px;
+    --mistica-border-radius-button: 32px;
+    --mistica-border-radius-checkbox: 2px;
+    --mistica-border-radius-container: 20px;
+    --mistica-border-radius-indicator: 24px;
+    --mistica-border-radius-chip: 24px;
+    --mistica-border-radius-tag: 24px;
+    --mistica-border-radius-input: 12px;
+    --mistica-border-radius-popup: 4px;
+    --mistica-border-radius-sheet: 0px;
+    --mistica-border-radius-mediaSmall: 2px;
+
+    /* 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: 500;
+    --mistica-font-size-drawerTitle: 1.25rem;
+    --mistica-line-height-drawerTitle: 1.5rem;
+    --mistica-font-weight-drawerTitle: 400;
+    --mistica-font-weight-rowTitle: 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-size-title1: 0.75rem;
+    --mistica-line-height-title1: 1rem;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-size-title2: 1rem;
+    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-weight-title2: 400;
+    --mistica-font-size-title3: 1.25rem;
+    --mistica-line-height-title3: 1.5rem;
+    --mistica-font-weight-title3: 400;
+    --mistica-font-size-title4: 1.5rem;
+    --mistica-line-height-title4: 2rem;
+    --mistica-font-weight-title4: 400;
+    --mistica-font-weight-indicator: 500;
+    --mistica-font-weight-navigationBar: 500;
+    --mistica-font-size-chipLabel: 0.875rem;
+    --mistica-line-height-chipLabel: 1.25rem;
+    --mistica-font-weight-chipLabel: 500;
+    --mistica-font-size-cardPretitleSnap: 0.875rem;
+    --mistica-line-height-cardPretitleSnap: 1.25rem;
+    --mistica-font-size-cardTitleSnap: 0.875rem;
+    --mistica-line-height-cardTitleSnap: 1.25rem;
+    --mistica-font-size-cardSubtitleSnap: 0.875rem;
+    --mistica-line-height-cardSubtitleSnap: 1.25rem;
+    --mistica-font-size-cardDescriptionSnap: 0.875rem;
+    --mistica-line-height-cardDescriptionSnap: 1.25rem;
+    --mistica-font-size-cardPretitleDefault: 0.875rem;
+    --mistica-line-height-cardPretitleDefault: 1.25rem;
+    --mistica-font-size-cardTitleDefault: 1.125rem;
+    --mistica-line-height-cardTitleDefault: 1.5rem;
+    --mistica-font-size-cardSubtitleDefault: 0.875rem;
+    --mistica-line-height-cardSubtitleDefault: 1.25rem;
+    --mistica-font-size-cardDescriptionDefault: 0.875rem;
+    --mistica-line-height-cardDescriptionDefault: 1.25rem;
+    --mistica-font-size-inputLabel: 0.75rem;
+    --mistica-line-height-inputLabel: 1rem;
+    --mistica-font-size-inputValue: 1rem;
+    --mistica-line-height-inputValue: 1.5rem;
+    --mistica-font-size-inputHelperText: 0.75rem;
+    --mistica-line-height-inputHelperText: 1rem;
+    --mistica-font-size-stepperStepLabel: 0.875rem;
+    --mistica-line-height-stepperStepLabel: 1.25rem;
+    --mistica-font-size-loadingScreenTitle: 1.125rem;
+    --mistica-line-height-loadingScreenTitle: 1.5rem;
+}
+
+[data-mistica-skin='cyber'][data-mistica-color-scheme='dark'] {
+    --mistica-color-background: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundAlternative: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
+    --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
+    --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
+    --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
+    --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
+    --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
+    --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
+    --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
+    --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
+    --mistica-color-backgroundBrand: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundNegative: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundContainer: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundContainerError: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+    --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
+    --mistica-color-backgroundContainerBrand: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+    --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundContainerNegative: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-darkModeGrey), 0.8);
+    --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey700);
+    --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-grey700);
+    --mistica-color-backgroundSkeletonNegative: var(--mistica-cyber-grey700);
+    --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-grey700);
+    --mistica-color-backgroundBrandTop: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundBrandBottom: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-appBarBackground: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-navigationBarBackground: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+    --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.07);
+    --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+    --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+    --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+    --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-skeletonWave: var(--mistica-cyber-grey700);
+    --mistica-color-borderLow: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-border: var(--mistica-cyber-grey800);
+    --mistica-color-borderHigh: var(--mistica-cyber-grey400);
+    --mistica-color-borderSelected: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
+    --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
+    --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
+    --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
+    --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
+    --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+    --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
+    --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+    --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+    --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+    --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+    --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-cyber-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-cyber-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+    --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-brand);
+    --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
+    --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
+    --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
+    --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
+    --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
+    --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+    --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+    --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
+    --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
+    --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
+    --mistica-color-textButtonSecondary: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
+    --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
+    --mistica-color-textLink: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-textLinkInverse: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-textLinkNegative: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-textLinkBrand: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-textLinkMedia: var(--mistica-cyber-white);
+    --mistica-color-textLinkDanger: var(--mistica-cyber-red30);
+    --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
+    --mistica-color-textLinkSnackbar: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-textLinkNeutral: var(--mistica-cyber-brand10);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-brand10);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-brand10);
+    --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-brand10);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-white);
+    --mistica-color-textActivated: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-textBrand: var(--mistica-cyber-brand30);
+    --mistica-color-inputBorder: var(--mistica-cyber-grey400);
+    --mistica-color-inputBorderInverse: var(--mistica-cyber-grey400);
+    --mistica-color-inputBorderNegative: var(--mistica-cyber-grey400);
+    --mistica-color-inputBorderBrand: var(--mistica-cyber-grey400);
+    --mistica-color-completedStep: var(--mistica-cyber-brand);
+    --mistica-color-completedStepInverse: var(--mistica-cyber-brand);
+    --mistica-color-completedStepNegative: var(--mistica-cyber-brand);
+    --mistica-color-completedStepBrand: var(--mistica-cyber-brand);
+    --mistica-color-control: var(--mistica-cyber-grey400);
+    --mistica-color-controlActivated: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-controlInverse: var(--mistica-cyber-grey400);
+    --mistica-color-controlNegative: var(--mistica-cyber-grey400);
+    --mistica-color-controlBrand: var(--mistica-cyber-grey400);
+    --mistica-color-controlActivatedInverse: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-controlActivatedNegative: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-controlActivatedBrand: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-controlError: var(--mistica-cyber-red30);
+    --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
+    --mistica-color-barTrack: var(--mistica-cyber-grey800);
+    --mistica-color-barTrackInverse: var(--mistica-cyber-grey800);
+    --mistica-color-barTrackNegative: var(--mistica-cyber-grey800);
+    --mistica-color-barTrackBrand: var(--mistica-cyber-grey800);
+    --mistica-color-loadingBar: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-loadingBarBackground: var(--mistica-cyber-grey500);
+    --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
+    --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-brand20);
+    --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
+    --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-brand20);
+    --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-grey400);
+    --mistica-color-iosControlKnob: var(--mistica-cyber-brand10);
+    --mistica-color-controlKnobInverse: var(--mistica-cyber-brand10);
+    --mistica-color-controlKnobNegative: var(--mistica-cyber-brand10);
+    --mistica-color-controlKnobBrand: var(--mistica-cyber-brand10);
+    --mistica-color-divider: rgba(var(--mistica-cyber-raw-white), 0.2);
+    --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-navigationBarDivider: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-badge: var(--mistica-cyber-red50);
+    --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red60);
+    --mistica-color-feedbackInfoBackground: var(--mistica-cyber-darkModeGrey);
+    --mistica-color-brand: var(--mistica-cyber-darkModeBrand);
+    --mistica-color-brandHigh: rgba(var(--mistica-cyber-raw-white), 0.05);
+    --mistica-color-inverse: var(--mistica-cyber-brand10);
+    --mistica-color-negative: var(--mistica-cyber-brand10);
+    --mistica-color-neutralHigh: var(--mistica-cyber-grey100);
+    --mistica-color-neutralHighBrand: var(--mistica-cyber-grey100);
+    --mistica-color-neutralHighNegative: var(--mistica-cyber-grey100);
+    --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
+    --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
+    --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
+    --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
+    --mistica-color-neutralLow: var(--mistica-cyber-grey700);
+    --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey700);
+    --mistica-color-textPrimary: var(--mistica-cyber-brand10);
+    --mistica-color-textPrimaryInverse: var(--mistica-cyber-brand10);
+    --mistica-color-textPrimaryNegative: var(--mistica-cyber-brand10);
+    --mistica-color-textPrimaryBrand: var(--mistica-cyber-brand10);
+    --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
+    --mistica-color-textSecondary: var(--mistica-cyber-grey200);
+    --mistica-color-textSecondaryInverse: var(--mistica-cyber-grey200);
+    --mistica-color-textSecondaryNegative: var(--mistica-cyber-grey200);
+    --mistica-color-textSecondaryBrand: var(--mistica-cyber-grey200);
+    --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
+    --mistica-color-error: var(--mistica-cyber-red30);
+    --mistica-color-textError: var(--mistica-cyber-red20);
+    --mistica-color-textErrorInverse: var(--mistica-cyber-red30);
+    --mistica-color-textErrorNegative: var(--mistica-cyber-red30);
+    --mistica-color-textErrorBrand: var(--mistica-cyber-red30);
+    --mistica-color-success: var(--mistica-cyber-teal);
+    --mistica-color-warning: var(--mistica-cyber-yellow60);
+    --mistica-color-promo: var(--mistica-cyber-purple);
+    --mistica-color-highlight: var(--mistica-cyber-red20);
+    --mistica-color-successLow: var(--mistica-cyber-brandDark);
+    --mistica-color-warningLow: var(--mistica-cyber-brandDark);
+    --mistica-color-errorLow: var(--mistica-cyber-brandDark);
+    --mistica-color-promoLow: var(--mistica-cyber-brandDark);
+    --mistica-color-brandLow: var(--mistica-cyber-brandDark);
+    --mistica-color-successHigh: var(--mistica-cyber-teal40);
+    --mistica-color-warningHigh: var(--mistica-cyber-yellow40);
+    --mistica-color-errorHigh: var(--mistica-cyber-red20);
+    --mistica-color-promoHigh: var(--mistica-cyber-purple40);
+    --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
+    --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
+    --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
+    --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
+    --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
+    --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
+    --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
+    --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
+    --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
+    --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
+    --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
+    --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
+    --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
+    --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-grey300);
+    --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-grey300);
+    --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
+    --mistica-color-textAppBar: var(--mistica-cyber-grey100);
+    --mistica-color-textAppBarSelected: var(--mistica-cyber-white);
+    --mistica-color-iosGlassAppBar: var(--mistica-cyber-white);
+    --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-white);
+    --mistica-color-customTabsBackground: var(--mistica-cyber-darkModeBlack);
+    --mistica-color-tagTextPromo: var(--mistica-cyber-purple40);
+    --mistica-color-tagTextActive: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextInactive: var(--mistica-cyber-grey200);
+    --mistica-color-tagTextInfo: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextSuccess: var(--mistica-cyber-teal40);
+    --mistica-color-tagTextWarning: var(--mistica-cyber-yellow40);
+    --mistica-color-tagTextError: var(--mistica-cyber-red20);
+    --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple80);
+    --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundInactive: var(--mistica-cyber-grey700);
+    --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal80);
+    --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow80);
+    --mistica-color-tagBackgroundError: var(--mistica-cyber-red90);
+    --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple40);
+    --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple40);
+    --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple40);
+    --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey200);
+    --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey200);
+    --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey200);
+    --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand20);
+    --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal40);
+    --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal40);
+    --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal40);
+    --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow40);
+    --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow40);
+    --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow40);
+    --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red20);
+    --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red20);
+    --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red20);
+    --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple80);
+    --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple80);
+    --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple80);
+    --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-grey700);
+    --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-grey700);
+    --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-grey700);
+    --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand80);
+    --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal80);
+    --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal80);
+    --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal80);
+    --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow80);
+    --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow80);
+    --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow80);
+    --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red90);
+    --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red90);
+    --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red90);
+    --mistica-color-cardContentOverlay: linear-gradient(
+        180deg,
+        rgba(var(--mistica-cyber-raw-black), 0) 0%,
+        rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
+        rgba(var(--mistica-cyber-raw-black), 0.7) 100%
+    );
+    --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mistica-skin='cyber'] {
+        --mistica-color-background: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundAlternative: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.18);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.25);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-darkModeBrand), 0.33);
+        --mistica-color-backgroundBrand: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundNegative: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundContainer: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundContainerError: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
+        --mistica-color-backgroundContainerBrand: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundContainerNegative: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-darkModeGrey), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey700);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-grey700);
+        --mistica-color-backgroundSkeletonNegative: var(--mistica-cyber-grey700);
+        --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-grey700);
+        --mistica-color-backgroundBrandTop: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundBrandBottom: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-appBarBackground: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-navigationBarBackground: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+        --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.07);
+        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+        --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-white), 0.03);
+        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-skeletonWave: var(--mistica-cyber-grey700);
+        --mistica-color-borderLow: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-border: var(--mistica-cyber-grey800);
+        --mistica-color-borderHigh: var(--mistica-cyber-grey400);
+        --mistica-color-borderSelected: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
+        --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundNegative: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundBrand: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-red50), 0.16);
+        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
+        --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+        --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+        --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-brand30), 0.16);
+        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-cyber-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(
+            var(--mistica-cyber-raw-white),
+            0.08
+        );
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-cyber-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-brand);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.15);
+        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonSecondary: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
+        --mistica-color-textLink: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-textLinkInverse: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-textLinkNegative: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-textLinkBrand: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-textLinkMedia: var(--mistica-cyber-white);
+        --mistica-color-textLinkDanger: var(--mistica-cyber-red30);
+        --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
+        --mistica-color-textLinkSnackbar: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-textLinkNeutral: var(--mistica-cyber-brand10);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-brand10);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-brand10);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-brand10);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-white);
+        --mistica-color-textActivated: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-textBrand: var(--mistica-cyber-brand30);
+        --mistica-color-inputBorder: var(--mistica-cyber-grey400);
+        --mistica-color-inputBorderInverse: var(--mistica-cyber-grey400);
+        --mistica-color-inputBorderNegative: var(--mistica-cyber-grey400);
+        --mistica-color-inputBorderBrand: var(--mistica-cyber-grey400);
+        --mistica-color-completedStep: var(--mistica-cyber-brand);
+        --mistica-color-completedStepInverse: var(--mistica-cyber-brand);
+        --mistica-color-completedStepNegative: var(--mistica-cyber-brand);
+        --mistica-color-completedStepBrand: var(--mistica-cyber-brand);
+        --mistica-color-control: var(--mistica-cyber-grey400);
+        --mistica-color-controlActivated: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-controlInverse: var(--mistica-cyber-grey400);
+        --mistica-color-controlNegative: var(--mistica-cyber-grey400);
+        --mistica-color-controlBrand: var(--mistica-cyber-grey400);
+        --mistica-color-controlActivatedInverse: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-controlActivatedNegative: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-controlActivatedBrand: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-controlError: var(--mistica-cyber-red30);
+        --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
+        --mistica-color-barTrack: var(--mistica-cyber-grey800);
+        --mistica-color-barTrackInverse: var(--mistica-cyber-grey800);
+        --mistica-color-barTrackNegative: var(--mistica-cyber-grey800);
+        --mistica-color-barTrackBrand: var(--mistica-cyber-grey800);
+        --mistica-color-loadingBar: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-loadingBarBackground: var(--mistica-cyber-grey500);
+        --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-brand20);
+        --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
+        --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-brand20);
+        --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-grey400);
+        --mistica-color-iosControlKnob: var(--mistica-cyber-brand10);
+        --mistica-color-controlKnobInverse: var(--mistica-cyber-brand10);
+        --mistica-color-controlKnobNegative: var(--mistica-cyber-brand10);
+        --mistica-color-controlKnobBrand: var(--mistica-cyber-brand10);
+        --mistica-color-divider: rgba(var(--mistica-cyber-raw-white), 0.2);
+        --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-navigationBarDivider: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-badge: var(--mistica-cyber-red50);
+        --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red60);
+        --mistica-color-feedbackInfoBackground: var(--mistica-cyber-darkModeGrey);
+        --mistica-color-brand: var(--mistica-cyber-darkModeBrand);
+        --mistica-color-brandHigh: rgba(var(--mistica-cyber-raw-white), 0.05);
+        --mistica-color-inverse: var(--mistica-cyber-brand10);
+        --mistica-color-negative: var(--mistica-cyber-brand10);
+        --mistica-color-neutralHigh: var(--mistica-cyber-grey100);
+        --mistica-color-neutralHighBrand: var(--mistica-cyber-grey100);
+        --mistica-color-neutralHighNegative: var(--mistica-cyber-grey100);
+        --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
+        --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
+        --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
+        --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
+        --mistica-color-neutralLow: var(--mistica-cyber-grey700);
+        --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey700);
+        --mistica-color-textPrimary: var(--mistica-cyber-brand10);
+        --mistica-color-textPrimaryInverse: var(--mistica-cyber-brand10);
+        --mistica-color-textPrimaryNegative: var(--mistica-cyber-brand10);
+        --mistica-color-textPrimaryBrand: var(--mistica-cyber-brand10);
+        --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
+        --mistica-color-textSecondary: var(--mistica-cyber-grey200);
+        --mistica-color-textSecondaryInverse: var(--mistica-cyber-grey200);
+        --mistica-color-textSecondaryNegative: var(--mistica-cyber-grey200);
+        --mistica-color-textSecondaryBrand: var(--mistica-cyber-grey200);
+        --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
+        --mistica-color-error: var(--mistica-cyber-red30);
+        --mistica-color-textError: var(--mistica-cyber-red20);
+        --mistica-color-textErrorInverse: var(--mistica-cyber-red30);
+        --mistica-color-textErrorNegative: var(--mistica-cyber-red30);
+        --mistica-color-textErrorBrand: var(--mistica-cyber-red30);
+        --mistica-color-success: var(--mistica-cyber-teal);
+        --mistica-color-warning: var(--mistica-cyber-yellow60);
+        --mistica-color-promo: var(--mistica-cyber-purple);
+        --mistica-color-highlight: var(--mistica-cyber-red20);
+        --mistica-color-successLow: var(--mistica-cyber-brandDark);
+        --mistica-color-warningLow: var(--mistica-cyber-brandDark);
+        --mistica-color-errorLow: var(--mistica-cyber-brandDark);
+        --mistica-color-promoLow: var(--mistica-cyber-brandDark);
+        --mistica-color-brandLow: var(--mistica-cyber-brandDark);
+        --mistica-color-successHigh: var(--mistica-cyber-teal40);
+        --mistica-color-warningHigh: var(--mistica-cyber-yellow40);
+        --mistica-color-errorHigh: var(--mistica-cyber-red20);
+        --mistica-color-promoHigh: var(--mistica-cyber-purple40);
+        --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
+        --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
+        --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
+        --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
+        --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
+        --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
+        --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
+        --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
+        --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
+        --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
+        --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
+        --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-grey300);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-grey300);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
+        --mistica-color-textAppBar: var(--mistica-cyber-grey100);
+        --mistica-color-textAppBarSelected: var(--mistica-cyber-white);
+        --mistica-color-iosGlassAppBar: var(--mistica-cyber-white);
+        --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-white);
+        --mistica-color-customTabsBackground: var(--mistica-cyber-darkModeBlack);
+        --mistica-color-tagTextPromo: var(--mistica-cyber-purple40);
+        --mistica-color-tagTextActive: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextInactive: var(--mistica-cyber-grey200);
+        --mistica-color-tagTextInfo: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextSuccess: var(--mistica-cyber-teal40);
+        --mistica-color-tagTextWarning: var(--mistica-cyber-yellow40);
+        --mistica-color-tagTextError: var(--mistica-cyber-red20);
+        --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple80);
+        --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundInactive: var(--mistica-cyber-grey700);
+        --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal80);
+        --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow80);
+        --mistica-color-tagBackgroundError: var(--mistica-cyber-red90);
+        --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple40);
+        --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple40);
+        --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple40);
+        --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey200);
+        --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey200);
+        --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey200);
+        --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand20);
+        --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal40);
+        --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal40);
+        --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal40);
+        --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow40);
+        --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow40);
+        --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow40);
+        --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red20);
+        --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red20);
+        --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red20);
+        --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple80);
+        --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple80);
+        --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple80);
+        --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-grey700);
+        --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-grey700);
+        --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-grey700);
+        --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand80);
+        --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal80);
+        --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal80);
+        --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal80);
+        --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow80);
+        --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow80);
+        --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow80);
+        --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red90);
+        --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red90);
+        --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red90);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-cyber-raw-black), 0) 0%,
+            rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
+            rgba(var(--mistica-cyber-raw-black), 0.7) 100%
+        );
+        --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
+    }
+
+    [data-mistica-skin='cyber'][data-mistica-color-scheme='light'] {
+        --mistica-color-background: var(--mistica-cyber-white);
+        --mistica-color-backgroundAlternative: var(--mistica-cyber-brand10);
+        --mistica-color-backgroundSelected: rgba(var(--mistica-cyber-raw-brand), 0.08);
+        --mistica-color-backgroundSelectedHover: rgba(var(--mistica-cyber-raw-brand), 0.12);
+        --mistica-color-backgroundSelectedPressed: rgba(var(--mistica-cyber-raw-brand), 0.16);
+        --mistica-color-backgroundSelectedBrand: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.16);
+        --mistica-color-backgroundSelectedBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.24);
+        --mistica-color-backgroundSelectedBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.32);
+        --mistica-color-backgroundSelectedNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
+        --mistica-color-backgroundSelectedNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.28);
+        --mistica-color-backgroundSelectedNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.35);
+        --mistica-color-backgroundBrand: var(--mistica-cyber-brand);
+        --mistica-color-backgroundNegative: var(--mistica-cyber-grey900);
+        --mistica-color-backgroundBrandSecondary: var(--mistica-cyber-brand);
+        --mistica-color-backgroundContainer: var(--mistica-cyber-white);
+        --mistica-color-backgroundContainerError: var(--mistica-cyber-red10);
+        --mistica-color-backgroundContainerHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+        --mistica-color-backgroundContainerPressed: rgba(var(--mistica-cyber-raw-brand70), 0.08);
+        --mistica-color-backgroundContainerBrand: var(--mistica-cyber-brand);
+        --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.2);
+        --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.4);
+        --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-cyber-brand70);
+        --mistica-color-backgroundContainerNegative: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-cyber-brand70);
+        --mistica-color-backgroundContainerAlternative: var(--mistica-cyber-brand10);
+        --mistica-color-backgroundOverlay: rgba(var(--mistica-cyber-raw-grey900), 0.8);
+        --mistica-color-backgroundSkeleton: var(--mistica-cyber-grey100);
+        --mistica-color-backgroundSkeletonInverse: var(--mistica-cyber-brand70);
+        --mistica-color-backgroundSkeletonNegative: rgba(var(--mistica-cyber-raw-black), 0.2);
+        --mistica-color-backgroundSkeletonBrand: var(--mistica-cyber-brand70);
+        --mistica-color-backgroundBrandTop: var(--mistica-cyber-brand);
+        --mistica-color-backgroundBrandBottom: var(--mistica-cyber-brand);
+        --mistica-color-appBarBackground: var(--mistica-cyber-white);
+        --mistica-color-navigationBarBackground: var(--mistica-cyber-brand);
+        --mistica-color-backgroundDropZoneHover: rgba(var(--mistica-cyber-raw-brand70), 0.05);
+        --mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-cyber-raw-brand70), 0.08);
+        --mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
+        --mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
+        --mistica-color-backgroundDropZoneNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-cyber-raw-white), 0.17);
+        --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-cyber-raw-brand80), 0.2);
+        --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-cyber-raw-brand80), 0.4);
+        --mistica-color-skeletonWave: var(--mistica-cyber-grey100);
+        --mistica-color-borderLow: var(--mistica-cyber-grey15);
+        --mistica-color-border: var(--mistica-cyber-grey100);
+        --mistica-color-borderHigh: var(--mistica-cyber-grey400);
+        --mistica-color-borderSelected: var(--mistica-cyber-brand);
+        --mistica-color-coverBackgroundHover: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.25);
+        --mistica-color-coverBackgroundPressed: rgba(var(--mistica-cyber-raw-darkModeBlack), 0.35);
+        --mistica-color-buttonDangerBackground: var(--mistica-cyber-red50);
+        --mistica-color-buttonDangerBackgroundPressed: var(--mistica-cyber-red60);
+        --mistica-color-buttonDangerBackgroundHover: var(--mistica-cyber-red60);
+        --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkDangerBackgroundNegative: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkDangerBackgroundBrand: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkDangerBackgroundMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-cyber-red10);
+        --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-cyber-red10);
+        --mistica-color-buttonLinkDangerBackgroundNegativePressed: var(--mistica-cyber-red10);
+        --mistica-color-buttonLinkDangerBackgroundBrandPressed: var(--mistica-cyber-red10);
+        --mistica-color-buttonLinkDangerBackgroundMediaPressed: var(--mistica-cyber-red10);
+        --mistica-color-buttonLinkBackgroundPressed: var(--mistica-cyber-brand10);
+        --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.08);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-cyber-grey10);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-cyber-grey10);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-cyber-grey10);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-cyber-grey10);
+        --mistica-color-buttonPrimaryBackground: var(--mistica-cyber-black);
+        --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundBrand: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-cyber-brand70);
+        --mistica-color-buttonPrimaryBackgroundInverseHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundNegativeHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundBrandHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundMediaHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-cyber-brand70);
+        --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundNegativePressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundBrandPressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonPrimaryBackgroundMediaPressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonSecondaryBackgroundBrand: rgba(var(--mistica-cyber-raw-white), 0);
+        --mistica-color-buttonSecondaryBorder: var(--mistica-cyber-brand);
+        --mistica-color-buttonSecondaryBorderInverse: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderNegative: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderBrand: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderMedia: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderPressed: var(--mistica-cyber-brand70);
+        --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderNegativePressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderBrandPressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBorderMediaPressed: var(--mistica-cyber-white);
+        --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-cyber-brand15);
+        --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundNegativeHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundBrandHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundMediaHover: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-cyber-brand15);
+        --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundNegativePressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundBrandPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-buttonSecondaryBackgroundMediaPressed: rgba(var(--mistica-cyber-raw-white), 0.1);
+        --mistica-color-textButtonPrimary: var(--mistica-cyber-white);
+        --mistica-color-textButtonPrimaryInverse: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryNegative: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryBrand: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryMedia: var(--mistica-cyber-brand);
+        --mistica-color-textButtonPrimaryInversePressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonPrimaryNegativePressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonPrimaryBrandPressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonPrimaryMediaPressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonSecondary: var(--mistica-cyber-black);
+        --mistica-color-textButtonSecondaryInverse: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryNegative: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryBrand: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryMedia: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryPressed: var(--mistica-cyber-brand70);
+        --mistica-color-textButtonSecondaryInversePressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryNegativePressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryBrandPressed: var(--mistica-cyber-white);
+        --mistica-color-textButtonSecondaryMediaPressed: var(--mistica-cyber-white);
+        --mistica-color-textLink: var(--mistica-cyber-brand);
+        --mistica-color-textLinkInverse: var(--mistica-cyber-white);
+        --mistica-color-textLinkNegative: var(--mistica-cyber-white);
+        --mistica-color-textLinkBrand: var(--mistica-cyber-white);
+        --mistica-color-textLinkMedia: var(--mistica-cyber-white);
+        --mistica-color-textLinkDanger: var(--mistica-cyber-red50);
+        --mistica-color-textLinkDangerMedia: var(--mistica-cyber-red50);
+        --mistica-color-textLinkSnackbar: var(--mistica-cyber-brand30);
+        --mistica-color-textLinkNeutral: var(--mistica-cyber-grey900);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-cyber-grey900);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-cyber-grey900);
+        --mistica-color-textLinkNeutralAlternative: var(--mistica-cyber-grey900);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-cyber-grey900);
+        --mistica-color-textActivated: var(--mistica-cyber-brand70);
+        --mistica-color-textBrand: var(--mistica-cyber-brand70);
+        --mistica-color-inputBorder: var(--mistica-cyber-grey400);
+        --mistica-color-inputBorderInverse: var(--mistica-cyber-white);
+        --mistica-color-inputBorderNegative: var(--mistica-cyber-white);
+        --mistica-color-inputBorderBrand: var(--mistica-cyber-white);
+        --mistica-color-completedStep: var(--mistica-cyber-brand);
+        --mistica-color-completedStepInverse: var(--mistica-cyber-brand70);
+        --mistica-color-completedStepNegative: var(--mistica-cyber-brand70);
+        --mistica-color-completedStepBrand: var(--mistica-cyber-brand70);
+        --mistica-color-control: var(--mistica-cyber-grey400);
+        --mistica-color-controlActivated: var(--mistica-cyber-brand);
+        --mistica-color-controlInverse: var(--mistica-cyber-brand10);
+        --mistica-color-controlNegative: var(--mistica-cyber-brand10);
+        --mistica-color-controlBrand: var(--mistica-cyber-brand10);
+        --mistica-color-controlActivatedInverse: var(--mistica-cyber-white);
+        --mistica-color-controlActivatedNegative: var(--mistica-cyber-white);
+        --mistica-color-controlActivatedBrand: var(--mistica-cyber-white);
+        --mistica-color-controlError: var(--mistica-cyber-red50);
+        --mistica-color-chevronIndicator: var(--mistica-cyber-grey400);
+        --mistica-color-barTrack: var(--mistica-cyber-grey100);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-cyber-raw-white), 0.3);
+        --mistica-color-barTrackNegative: rgba(var(--mistica-cyber-raw-white), 0.3);
+        --mistica-color-barTrackBrand: rgba(var(--mistica-cyber-raw-white), 0.3);
+        --mistica-color-loadingBar: var(--mistica-cyber-brand30);
+        --mistica-color-loadingBarBackground: var(--mistica-cyber-brand70);
+        --mistica-color-toggleAndroidInactive: var(--mistica-cyber-grey100);
+        --mistica-color-toggleAndroidBackgroundActive: var(--mistica-cyber-grey100);
+        --mistica-color-toggleAndroidActiveBrand: var(--mistica-cyber-white);
+        --mistica-color-toggleAndroidInactiveBrand: var(--mistica-cyber-grey100);
+        --mistica-color-toggleAndroidBackgroundActiveBrand: var(--mistica-cyber-grey100);
+        --mistica-color-toggleAndroidBackgroundInactiveBrand: var(--mistica-cyber-brand10);
+        --mistica-color-iosControlKnob: var(--mistica-cyber-white);
+        --mistica-color-controlKnobInverse: var(--mistica-cyber-brand);
+        --mistica-color-controlKnobNegative: var(--mistica-cyber-brand);
+        --mistica-color-controlKnobBrand: var(--mistica-cyber-brand);
+        --mistica-color-divider: var(--mistica-cyber-grey100);
+        --mistica-color-dividerInverse: rgba(var(--mistica-cyber-raw-white), 0.2);
+        --mistica-color-dividerNegative: rgba(var(--mistica-cyber-raw-white), 0.2);
+        --mistica-color-dividerBrand: rgba(var(--mistica-cyber-raw-white), 0.2);
+        --mistica-color-navigationBarDivider: var(--mistica-cyber-brand);
+        --mistica-color-badge: var(--mistica-cyber-red50);
+        --mistica-color-feedbackErrorBackground: var(--mistica-cyber-red50);
+        --mistica-color-feedbackInfoBackground: var(--mistica-cyber-grey900);
+        --mistica-color-brand: var(--mistica-cyber-brand);
+        --mistica-color-brandHigh: var(--mistica-cyber-brand70);
+        --mistica-color-inverse: var(--mistica-cyber-white);
+        --mistica-color-negative: var(--mistica-cyber-white);
+        --mistica-color-neutralHigh: var(--mistica-cyber-grey900);
+        --mistica-color-neutralHighBrand: var(--mistica-cyber-white);
+        --mistica-color-neutralHighNegative: var(--mistica-cyber-white);
+        --mistica-color-neutralMedium: var(--mistica-cyber-grey400);
+        --mistica-color-neutralMediumInverse: var(--mistica-cyber-grey400);
+        --mistica-color-neutralMediumNegative: var(--mistica-cyber-grey400);
+        --mistica-color-neutralMediumBrand: var(--mistica-cyber-grey400);
+        --mistica-color-neutralLow: var(--mistica-cyber-brand10);
+        --mistica-color-neutralLowAlternative: var(--mistica-cyber-grey100);
+        --mistica-color-textPrimary: var(--mistica-cyber-grey900);
+        --mistica-color-textPrimaryInverse: var(--mistica-cyber-white);
+        --mistica-color-textPrimaryNegative: var(--mistica-cyber-white);
+        --mistica-color-textPrimaryBrand: var(--mistica-cyber-white);
+        --mistica-color-textPrimaryMedia: var(--mistica-cyber-white);
+        --mistica-color-textSecondary: var(--mistica-cyber-grey500);
+        --mistica-color-textSecondaryInverse: var(--mistica-cyber-white);
+        --mistica-color-textSecondaryNegative: var(--mistica-cyber-white);
+        --mistica-color-textSecondaryBrand: var(--mistica-cyber-white);
+        --mistica-color-textSecondaryMedia: var(--mistica-cyber-white);
+        --mistica-color-error: var(--mistica-cyber-red50);
+        --mistica-color-textError: var(--mistica-cyber-red50);
+        --mistica-color-textErrorInverse: var(--mistica-cyber-white);
+        --mistica-color-textErrorNegative: var(--mistica-cyber-white);
+        --mistica-color-textErrorBrand: var(--mistica-cyber-white);
+        --mistica-color-success: var(--mistica-cyber-teal);
+        --mistica-color-warning: var(--mistica-cyber-yellow60);
+        --mistica-color-promo: var(--mistica-cyber-purple);
+        --mistica-color-highlight: var(--mistica-cyber-red20);
+        --mistica-color-successLow: var(--mistica-cyber-teal10);
+        --mistica-color-warningLow: var(--mistica-cyber-yellow15);
+        --mistica-color-errorLow: var(--mistica-cyber-red10);
+        --mistica-color-promoLow: var(--mistica-cyber-purple10);
+        --mistica-color-brandLow: var(--mistica-cyber-brand15);
+        --mistica-color-successHigh: var(--mistica-cyber-teal70);
+        --mistica-color-warningHigh: var(--mistica-cyber-yellow60);
+        --mistica-color-errorHigh: var(--mistica-cyber-red60);
+        --mistica-color-promoHigh: var(--mistica-cyber-purple70);
+        --mistica-color-successHighInverse: var(--mistica-cyber-teal70);
+        --mistica-color-successHighNegative: var(--mistica-cyber-teal70);
+        --mistica-color-successHighBrand: var(--mistica-cyber-teal70);
+        --mistica-color-warningHighInverse: var(--mistica-cyber-yellow60);
+        --mistica-color-warningHighNegative: var(--mistica-cyber-yellow60);
+        --mistica-color-warningHighBrand: var(--mistica-cyber-yellow60);
+        --mistica-color-errorHighInverse: var(--mistica-cyber-red60);
+        --mistica-color-errorHighNegative: var(--mistica-cyber-red60);
+        --mistica-color-errorHighBrand: var(--mistica-cyber-red60);
+        --mistica-color-promoHighInverse: var(--mistica-cyber-purple70);
+        --mistica-color-promoHighNegative: var(--mistica-cyber-purple70);
+        --mistica-color-promoHighBrand: var(--mistica-cyber-purple70);
+        --mistica-color-textNavigationBarPrimary: var(--mistica-cyber-white);
+        --mistica-color-textNavigationBarSecondary: var(--mistica-cyber-brand10);
+        --mistica-color-textNavigationSearchBarHint: var(--mistica-cyber-brand10);
+        --mistica-color-textNavigationSearchBarText: var(--mistica-cyber-white);
+        --mistica-color-textAppBar: var(--mistica-cyber-grey300);
+        --mistica-color-textAppBarSelected: var(--mistica-cyber-brand70);
+        --mistica-color-iosGlassAppBar: var(--mistica-cyber-grey900);
+        --mistica-color-iosGlassAppBarSelected: var(--mistica-cyber-brand70);
+        --mistica-color-customTabsBackground: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextPromo: var(--mistica-cyber-purple80);
+        --mistica-color-tagTextActive: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextInactive: var(--mistica-cyber-grey500);
+        --mistica-color-tagTextInfo: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextSuccess: var(--mistica-cyber-teal80);
+        --mistica-color-tagTextWarning: var(--mistica-cyber-yellow80);
+        --mistica-color-tagTextError: var(--mistica-cyber-red60);
+        --mistica-color-tagBackgroundPromo: var(--mistica-cyber-purple10);
+        --mistica-color-tagBackgroundActive: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundInactive: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundInfo: var(--mistica-cyber-brand15);
+        --mistica-color-tagBackgroundSuccess: var(--mistica-cyber-teal20);
+        --mistica-color-tagBackgroundWarning: var(--mistica-cyber-yellow15);
+        --mistica-color-tagBackgroundError: var(--mistica-cyber-red10);
+        --mistica-color-tagTextPromoInverse: var(--mistica-cyber-purple80);
+        --mistica-color-tagTextPromoNegative: var(--mistica-cyber-purple80);
+        --mistica-color-tagTextPromoBrand: var(--mistica-cyber-purple80);
+        --mistica-color-tagTextActiveInverse: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextActiveNegative: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextActiveBrand: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextInactiveInverse: var(--mistica-cyber-grey500);
+        --mistica-color-tagTextInactiveNegative: var(--mistica-cyber-grey500);
+        --mistica-color-tagTextInactiveBrand: var(--mistica-cyber-grey500);
+        --mistica-color-tagTextInfoInverse: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextInfoNegative: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextInfoBrand: var(--mistica-cyber-brand70);
+        --mistica-color-tagTextSuccessInverse: var(--mistica-cyber-teal80);
+        --mistica-color-tagTextSuccessNegative: var(--mistica-cyber-teal80);
+        --mistica-color-tagTextSuccessBrand: var(--mistica-cyber-teal80);
+        --mistica-color-tagTextWarningInverse: var(--mistica-cyber-yellow80);
+        --mistica-color-tagTextWarningNegative: var(--mistica-cyber-yellow80);
+        --mistica-color-tagTextWarningBrand: var(--mistica-cyber-yellow80);
+        --mistica-color-tagTextErrorInverse: var(--mistica-cyber-red60);
+        --mistica-color-tagTextErrorNegative: var(--mistica-cyber-red60);
+        --mistica-color-tagTextErrorBrand: var(--mistica-cyber-red60);
+        --mistica-color-tagBackgroundPromoInverse: var(--mistica-cyber-purple10);
+        --mistica-color-tagBackgroundPromoNegative: var(--mistica-cyber-purple10);
+        --mistica-color-tagBackgroundPromoBrand: var(--mistica-cyber-purple10);
+        --mistica-color-tagBackgroundActiveInverse: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundActiveNegative: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundActiveBrand: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundInactiveInverse: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundInactiveNegative: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundInactiveBrand: var(--mistica-cyber-brand10);
+        --mistica-color-tagBackgroundInfoInverse: var(--mistica-cyber-brand15);
+        --mistica-color-tagBackgroundInfoNegative: var(--mistica-cyber-brand15);
+        --mistica-color-tagBackgroundInfoBrand: var(--mistica-cyber-brand15);
+        --mistica-color-tagBackgroundSuccessInverse: var(--mistica-cyber-teal10);
+        --mistica-color-tagBackgroundSuccessNegative: var(--mistica-cyber-teal10);
+        --mistica-color-tagBackgroundSuccessBrand: var(--mistica-cyber-teal10);
+        --mistica-color-tagBackgroundWarningInverse: var(--mistica-cyber-yellow15);
+        --mistica-color-tagBackgroundWarningNegative: var(--mistica-cyber-yellow15);
+        --mistica-color-tagBackgroundWarningBrand: var(--mistica-cyber-yellow15);
+        --mistica-color-tagBackgroundErrorInverse: var(--mistica-cyber-red10);
+        --mistica-color-tagBackgroundErrorNegative: var(--mistica-cyber-red10);
+        --mistica-color-tagBackgroundErrorBrand: var(--mistica-cyber-red10);
+        --mistica-color-cardContentOverlay: linear-gradient(
+            180deg,
+            rgba(var(--mistica-cyber-raw-black), 0) 0%,
+            rgba(var(--mistica-cyber-raw-black), 0.4) 30%,
+            rgba(var(--mistica-cyber-raw-black), 0.7) 100%
+        );
+        --mistica-color-cardFooterOverlay: rgba(var(--mistica-cyber-raw-black), 0.7);
+    }
+}
+
+@media (min-width: 1024px) {
+    [data-mistica-skin='cyber'] {
+        /* 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-drawerTitle: 1.75rem;
+        --mistica-line-height-drawerTitle: 2rem;
+
+        --mistica-font-size-tabsLabel: 1.125rem;
+        --mistica-line-height-tabsLabel: 1.5rem;
+
+        --mistica-font-size-title1: 0.875rem;
+        --mistica-line-height-title1: 1.25rem;
+        --mistica-font-size-title2: 1.125rem;
+        --mistica-line-height-title2: 1.5rem;
+        --mistica-font-size-title3: 1.75rem;
+        --mistica-line-height-title3: 2rem;
+        --mistica-font-size-title4: 2rem;
+        --mistica-line-height-title4: 2.5rem;
+
+        --mistica-font-size-chipLabel: 1rem;
+        --mistica-line-height-chipLabel: 1.5rem;
+        --mistica-font-size-cardPretitleSnap: 1rem;
+        --mistica-line-height-cardPretitleSnap: 1.5rem;
+        --mistica-font-size-cardTitleSnap: 1rem;
+        --mistica-line-height-cardTitleSnap: 1.5rem;
+        --mistica-font-size-cardSubtitleSnap: 1rem;
+        --mistica-line-height-cardSubtitleSnap: 1.5rem;
+        --mistica-font-size-cardDescriptionSnap: 1rem;
+        --mistica-line-height-cardDescriptionSnap: 1.5rem;
+        --mistica-font-size-cardPretitleDefault: 1rem;
+        --mistica-line-height-cardPretitleDefault: 1.5rem;
+        --mistica-font-size-cardTitleDefault: 1.25rem;
+        --mistica-line-height-cardTitleDefault: 1.75rem;
+        --mistica-font-size-cardSubtitleDefault: 1rem;
+        --mistica-line-height-cardSubtitleDefault: 1.5rem;
+        --mistica-font-size-cardDescriptionDefault: 1rem;
+        --mistica-line-height-cardDescriptionDefault: 1.5rem;
+        --mistica-font-size-inputLabel: 0.875rem;
+        --mistica-line-height-inputLabel: 1.25rem;
+        --mistica-font-size-inputValue: 1.125rem;
+        --mistica-line-height-inputValue: 1.5rem;
+        --mistica-font-size-inputHelperText: 0.875rem;
+        --mistica-line-height-inputHelperText: 1.25rem;
+        --mistica-font-size-stepperStepLabel: 1rem;
+        --mistica-line-height-stepperStepLabel: 1.5rem;
+        --mistica-font-size-loadingScreenTitle: 1.25rem;
+        --mistica-line-height-loadingScreenTitle: 1.75rem;
+    }
+}
diff --git a/css/esimflag.css b/css/esimflag.css
index 09de5af679..6fc5edbf89 100644
--- a/css/esimflag.css
+++ b/css/esimflag.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='esimflag'] {
     /* Palette colors */
     --mistica-esimflag-white: #ffffff;
diff --git a/css/mistica-common.css b/css/mistica-common.css
index 33f90758b1..4b31128651 100644
--- a/css/mistica-common.css
+++ b/css/mistica-common.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 /* Default text color */
 [data-mistica-skin] {
     color: var(--mistica-color-textPrimary);
diff --git a/css/movistar.css b/css/movistar.css
index a2fc7572bb..827c26dc5a 100644
--- a/css/movistar.css
+++ b/css/movistar.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='movistar'] {
     /* Palette colors */
     --mistica-movistar-white: #ffffff;
diff --git a/css/o2.css b/css/o2.css
index 19f72b9cb5..4b33661978 100644
--- a/css/o2.css
+++ b/css/o2.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='o2'] {
     /* Palette colors */
     --mistica-o2-white: #ffffff;
diff --git a/css/telefonica.css b/css/telefonica.css
index 0ca0880d31..b7c8ae19cc 100644
--- a/css/telefonica.css
+++ b/css/telefonica.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='telefonica'] {
     /* Palette colors */
     --mistica-telefonica-white: #ffffff;
diff --git a/css/vivo-evolution.css b/css/vivo-evolution.css
index 55bb79920e..41b4568585 100644
--- a/css/vivo-evolution.css
+++ b/css/vivo-evolution.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='vivo-evolution'] {
     /* Palette colors */
     --mistica-vivo-evolution-vivoNeutral0: #ffffff;
diff --git a/css/vivo.css b/css/vivo.css
index 18ec783e99..db134b1d7c 100644
--- a/css/vivo.css
+++ b/css/vivo.css
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='vivo'] {
     /* Palette colors */
     --mistica-vivo-white: #ffffff;
diff --git a/packages/generate-design-tokens/README.md b/packages/generate-design-tokens/README.md
index 7ed65faaeb..f934a2e2c8 100644
--- a/packages/generate-design-tokens/README.md
+++ b/packages/generate-design-tokens/README.md
@@ -1,11 +1,28 @@
 # generate-design-tokens
 
-Script to generate mistica skins (in src/skins folder) from design tokens imported from mistica-design repo.
+Script to generate mistica skins from design tokens imported from the mistica-design repo.
 
-Run:
+## Generated Files
+
+- **Main skins** → `src/skins/` and `css/`
+- **Community skins** → `src/community/skins/` and `css/community/`
+
+The script discovers community skin tokens in the `tokens/community/` folder of the mistica-design repository
+and generates corresponding TypeScript and CSS files.
+
+## Run
+
+The script is written in TypeScript and runs directly on Node (>= 24), which strips the types at runtime, so
+no build step is required:
+
+```bash
+node index.ts
+```
+
+Type-check the package with:
 
 ```bash
-node index.js
+yarn typecheck
 ```
 
 This script is used by the import-design-tokens GitHub workflow.
diff --git a/packages/generate-design-tokens/css-generator.js b/packages/generate-design-tokens/css-generator.ts
similarity index 80%
rename from packages/generate-design-tokens/css-generator.js
rename to packages/generate-design-tokens/css-generator.ts
index 7438cb6ad9..cd7ef22446 100644
--- a/packages/generate-design-tokens/css-generator.js
+++ b/packages/generate-design-tokens/css-generator.ts
@@ -1,9 +1,11 @@
-import fs from 'fs';
-import path from 'path';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 
-const pxToRem = (px) => `${(px / 16).toFixed(3)}rem`;
+import type {ColorDescription, DesignTokens, GradientDescription, RadiusDescription} from './token-types.ts';
 
-const fromHexToRgb = (hexColor) => {
+const pxToRem = (px: number): string => `${(px / 16).toFixed(3)}rem`;
+
+const fromHexToRgb = (hexColor: string): [number, number, number] => {
     if (!hexColor.startsWith('#')) {
         throw Error(`Bad hex color, ${hexColor}`);
     }
@@ -24,7 +26,7 @@ const fromHexToRgb = (hexColor) => {
     throw Error(`Bad hex color, ${hexColor}`);
 };
 
-export const buildRadius = (radiusDescription) => {
+export const buildRadius = (radiusDescription: RadiusDescription): string => {
     if (radiusDescription.value.endsWith('%')) {
         return radiusDescription.value;
     }
@@ -42,45 +44,44 @@ export const buildRadius = (radiusDescription) => {
 };
 
 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 colorSchemeSelector = (colorScheme: string): string => `[data-${prefix}color-scheme="${colorScheme}"]`;
+const buildVarName = (propertyName: string, name: string): string => `--${prefix}${propertyName}-${name}`;
+const buildColorVarName = (colorName: string): string => buildVarName('color', colorName);
+const buildBorderRadiusVarName = (radiusName: string): string => buildVarName('border-radius', radiusName);
+const buildFontSizeVarName = (textPreset: string): string => buildVarName('font-size', textPreset);
+const buildLineHeightVarName = (textPreset: string): string => buildVarName('line-height', textPreset);
+const buildFontWeightVarName = (textPreset: string): string => buildVarName('font-weight', textPreset);
 const tabletMediaQuery = '@media (min-width: 768px)';
 const desktopMediaQuery = '@media (min-width: 1024px)';
 const largeDesktopMediaQuery = '@media (min-width: 1512px)';
 
-export const generateSkinCssSrc = (skinName, DESIGN_TOKENS_FOLDER) => {
+type TextPreset = {
+    size?: {mobile: number; desktop: number};
+    lineHeight?: {mobile: number; desktop: number};
+    weight?: 'light' | 'regular' | 'medium' | 'bold';
+};
+
+export const generateSkinCssSrc = (skinName: string, DESIGN_TOKENS_FOLDER: string): string => {
     const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`), 'utf8');
-    const designTokens = JSON.parse(designTokensFile);
+    const designTokens: 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 buildPaletteColorVarName = (colorName: string): string => `--${palettePrefix}${colorName}`;
+    const buildRawPaletteColorVarName = (colorName: string): string => `--${palettePrefix}raw-${colorName}`;
+
+    const usedPaleteColors = new Set<string>();
+    const usedRawPaletteColors = new Set<string>();
+
+    const buildCssGradient = (gradientDescription: GradientDescription): string => {
         const stops = gradientDescription.colors.map((color) => {
-            // eslint-disable-next-line no-use-before-define
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
             return `${buildCssColor(color)} ${color.stop * 100}%`;
         });
         return `linear-gradient(${gradientDescription.angle}deg, ${stops.join(', ')})`;
     };
 
-    const buildCssColor = (colorDescription) => {
+    const buildCssColor = (colorDescription: ColorDescription): string => {
         if (colorDescription.type === 'linear-gradient') {
             return buildCssGradient(colorDescription.value);
         }
@@ -146,7 +147,7 @@ export const generateSkinCssSrc = (skinName, DESIGN_TOKENS_FOLDER) => {
         )
         .join('\n');
 
-    const textPresets = {
+    const textPresets: Record<string, TextPreset> = {
         1: {
             size: {mobile: 12, desktop: 14},
             lineHeight: {mobile: 16, desktop: 20},
@@ -193,13 +194,15 @@ export const generateSkinCssSrc = (skinName, DESIGN_TOKENS_FOLDER) => {
         },
     };
     Object.entries(designTokens.text).forEach(([textAttribute, textAttributeConfig]) => {
-        Object.entries(textAttributeConfig).forEach(([presetName, {value}]) => {
-            presetName = presetName.startsWith('text') ? presetName.replace('text', '') : presetName;
+        Object.entries(textAttributeConfig).forEach(([rawPresetName, {value}]) => {
+            const presetName = rawPresetName.startsWith('text')
+                ? rawPresetName.replace('text', '')
+                : rawPresetName;
 
             textPresets[presetName] = {
                 ...(textPresets[presetName] ?? {}),
                 [textAttribute]: value,
-            };
+            } as TextPreset;
         });
     });
 
@@ -263,7 +266,7 @@ ${skinSelector}${colorSchemeSelector('dark')} {
     ${skinSelector} {
         ${darkModeColors}
     }
-    
+
     ${skinSelector}${colorSchemeSelector('light')} {
         ${forceLightModeColors}
     }
@@ -278,9 +281,9 @@ ${desktopMediaQuery} {
 `;
 };
 
-export const generateCommonCssSrc = (DESIGN_TOKENS_FOLDER) => {
+export const generateCommonCssSrc = (DESIGN_TOKENS_FOLDER: string): string => {
     const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `movistar.json`), 'utf8');
-    const designTokens = JSON.parse(designTokensFile);
+    const designTokens: DesignTokens = JSON.parse(designTokensFile);
 
     const textPresets = new Set([
         'text1',
diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js
deleted file mode 100644
index f387344c6c..0000000000
--- a/packages/generate-design-tokens/index.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-// eslint-disable-next-line import/extensions
-import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
-import prettier from 'prettier';
-
-/**
- * Generates skin files and CSS from design tokens in mistica-design.
- *
- * By default, reads tokens from .github/mistica-design/tokens.
- * To use a custom tokens folder:
- *
- *   node index.js /path/to/mistica-design/tokens
- *   # or via yarn: yarn workspace generate-design-tokens generate /path/to/mistica-design/tokens
- *
- * Can also use DESIGN_TOKENS_FOLDER env var: DESIGN_TOKENS_FOLDER="/path/to/tokens" node index.js
- *
- * @see https://github.com/Telefonica/mistica-design
- */
-
-const DESIGN_TOKENS_FOLDER = path.resolve(
-    process.argv[2] ||
-        process.env.DESIGN_TOKENS_FOLDER ||
-        path.join(import.meta.dirname, '../../.github/mistica-design/tokens/')
-);
-
-console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
-
-const SKINS_FOLDER = path.join(import.meta.dirname, '..', '..', 'src', 'skins');
-const CSS_FOLDER = path.join(import.meta.dirname, '..', '..', 'css');
-
-const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'telefonica', 'vivo', 'vivo-evolution', 'esimflag'];
-
-const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-const toPascalCase = (str) => capitalize(toCamelCase(str));
-
-const jsonSort = (obj) => {
-    if (Array.isArray(obj)) {
-        return obj.map(jsonSort);
-    }
-
-    if (typeof obj !== 'object' || obj === null) {
-        return obj;
-    }
-
-    return Object.keys(obj)
-        .sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}))
-        .reduce((acc, key) => {
-            acc[key] = jsonSort(obj[key]);
-            return acc;
-        }, {});
-};
-
-/**
- * @param {{angle: number, colors: Array<{
- *     value: string,
- *     stop: number, // value from 0 to 1
- * }>}} gradientDescription
- * @returns {string}
- */
-const buildGradient = (gradientDescription) => {
-    const stops = gradientDescription.colors.map((color) => {
-        // eslint-disable-next-line no-use-before-define
-        const formattedColor = '${' + buildColor(color) + '}';
-        return `${formattedColor} ${color.stop * 100}%`;
-    });
-    return '`' + `linear-gradient(${gradientDescription.angle}deg, ${stops.join(', ')})` + '`';
-};
-
-const buildColor = (colorDescription) => {
-    if (colorDescription.type === 'linear-gradient') {
-        return buildGradient(colorDescription.value);
-    }
-
-    if (typeof colorDescription.value !== 'string') {
-        console.error('Unexpected color description:', JSON.stringify(colorDescription, null, 2));
-        process.exit(1);
-    }
-
-    if (colorDescription.value.startsWith('{') && colorDescription.value.endsWith('}')) {
-        return colorDescription.value.replace('{', '').replace('}', '');
-    }
-
-    // https://regexper.com/#%2Frgba%5C%28%5C%7B%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\(\{(.+)\}, ([01](?:\.\d+)?)\)/;
-    const colorWithAlphaMatches = colorDescription.value.match(colorWithAlphaRegExp);
-
-    if (colorWithAlphaMatches) {
-        const colorName = colorWithAlphaMatches[1];
-        const alpha = colorWithAlphaMatches[2];
-        return `applyAlpha(${colorName}, ${alpha})`;
-    }
-
-    throw new Error(`Unknown color format: ${colorDescription.value}`);
-};
-
-const generateSkinSrc = (skinName) => {
-    const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`), 'utf8');
-    const needsApplyAlphaImport = designTokensFile.includes('rgba');
-    const designTokens = JSON.parse(designTokensFile);
-    const skinConstantName = `${skinName.toUpperCase().replace(/-/g, '_')}_SKIN`;
-
-    const textTokens = {};
-    Object.entries(designTokens.text).forEach(([textAttribute, textAttributeConfig]) => {
-        Object.entries(textAttributeConfig).forEach(([textPresetName, {value}]) => {
-            if (!textTokens[textPresetName]) {
-                textTokens[textPresetName] = {};
-            }
-            textTokens[textPresetName][textAttribute] = value;
-        });
-    });
-
-    return `
-import {${skinConstantName}} from './constants';
-${needsApplyAlphaImport ? `import {applyAlpha} from '../utils/color';` : ''}
-
-import type {GetKnownSkin, KnownSkin} from './types';
-
-export const palette = {
-    ${Object.entries(designTokens.global.palette)
-        .map(([colorName, colorDescription]) => `'${colorName}':'${colorDescription.value}'`)
-        .join(',')}
-};
-
-export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => {
-    const skin: KnownSkin = {
-        name: ${skinConstantName},
-        colors: {
-            ${Object.entries(designTokens.light)
-                .map(([colorName, colorDescription]) => `'${colorName}': ${buildColor(colorDescription)}`)
-                .join(',')}
-        },
-        darkModeColors: {
-            ${Object.entries(designTokens.dark)
-                .map(([colorName, colorDescription]) => `'${colorName}': ${buildColor(colorDescription)}`)
-                .join(',')}
-        },
-        borderRadii: {
-            ${Object.entries(designTokens.radius)
-                .map(
-                    ([radiusName, radiusDescription]) =>
-                        `'${radiusName}': '${buildRadius(radiusDescription)}'`
-                )
-                .join(',')}
-        },
-        textPresets: ${JSON.stringify(jsonSort(textTokens))},
-        themeVariants: {
-            ${Object.entries(designTokens.themeVariant)
-                .map(
-                    ([componentName, variantDescription]) =>
-                        `'${componentName}': '${variantDescription.value}'`
-                )
-                .join(',')},
-        },
-        spacing: ${JSON.stringify(
-            Object.fromEntries(Object.entries(designTokens.spacing).map(([name, {value}]) => [name, value]))
-        )},
-    };
-    return skin;
-};
-`;
-};
-
-const generateColorTypesSrc = (skinName) => {
-    const designTokensFile = fs.readFileSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`), 'utf8');
-    const designTokens = JSON.parse(designTokensFile);
-
-    return `
-export type Colors = {
-    ${Object.keys(designTokens.light)
-        .map((colorName) => `'${colorName}': string`)
-        .join(';')}
-};`;
-};
-
-const formatCss = async (source) =>
-    prettier.format(source, {
-        ...(await prettier.resolveConfig('.')),
-        parser: 'css',
-    });
-
-const formatTs = async (source) =>
-    prettier.format(source, {
-        ...(await prettier.resolveConfig('.')),
-        parser: 'typescript',
-    });
-
-const generateSkinFiles = async () => {
-    let anyGeneratedSkin;
-
-    for (const skinName of KNOWN_SKINS) {
-        console.log('Generating tokens for skin', skinName);
-
-        if (!fs.existsSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`))) {
-            console.error(`Missing ${path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`)} file`);
-            return;
-        }
-
-        // todo https://github.com/Telefonica/mistica-web/issues/1633 add @generated banner to generated skin files so they are not mistakenly edited by hand
-        const skinSrc = await formatTs(generateSkinSrc(skinName));
-        fs.writeFileSync(path.join(SKINS_FOLDER, `${skinName}.tsx`), skinSrc);
-
-        const skinCssSrc = await formatCss(generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER));
-        fs.writeFileSync(path.join(CSS_FOLDER, `${skinName}.css`), skinCssSrc);
-
-        anyGeneratedSkin = skinName;
-    }
-
-    if (anyGeneratedSkin) {
-        const typesSrc = await formatTs(generateColorTypesSrc(anyGeneratedSkin));
-        fs.writeFileSync(path.join(SKINS_FOLDER, 'types', 'colors.tsx'), typesSrc);
-
-        const commonCssSrc = await formatCss(generateCommonCssSrc(DESIGN_TOKENS_FOLDER));
-        fs.writeFileSync(path.join(CSS_FOLDER, `mistica-common.css`), commonCssSrc);
-    }
-};
-
-generateSkinFiles();
diff --git a/packages/generate-design-tokens/index.ts b/packages/generate-design-tokens/index.ts
new file mode 100644
index 0000000000..4d1aef18be
--- /dev/null
+++ b/packages/generate-design-tokens/index.ts
@@ -0,0 +1,312 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.ts';
+import * as prettier from 'prettier';
+
+import type {ColorDescription, DesignTokens, GradientDescription} from './token-types.ts';
+
+/**
+ * Generates skin files and CSS from design tokens in mistica-design.
+ *
+ * By default, reads tokens from .github/mistica-design/tokens.
+ * To use a custom tokens folder:
+ *
+ *   node index.ts /path/to/mistica-design/tokens
+ *   # or via yarn: yarn workspace generate-design-tokens generate /path/to/mistica-design/tokens
+ *
+ * Can also use DESIGN_TOKENS_FOLDER env var: DESIGN_TOKENS_FOLDER="/path/to/tokens" node index.ts
+ *
+ * @see https://github.com/Telefonica/mistica-design
+ */
+
+const DESIGN_TOKENS_FOLDER = path.resolve(
+    process.argv[2] ||
+        process.env.DESIGN_TOKENS_FOLDER ||
+        path.join(import.meta.dirname, '../../.github/mistica-design/tokens/')
+);
+
+console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
+
+const SKINS_FOLDER = path.join(import.meta.dirname, '..', '..', 'src', 'skins');
+const CSS_FOLDER = path.join(import.meta.dirname, '..', '..', 'css');
+const COMMUNITY_SKINS_FOLDER = path.join(import.meta.dirname, '..', '..', 'src', 'community', 'skins');
+const COMMUNITY_CSS_FOLDER = path.join(import.meta.dirname, '..', '..', 'css', 'community');
+
+const GENERATED_BANNER = `/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+`;
+
+/**
+ * The variant-specific parts of a generated skin module: its imports, the exported skin type,
+ * the optional skin-name constant declaration, and the generated function signature.
+ */
+type SkinModule = {
+    constantsImport: string;
+    skinTypeImport: string;
+    skinConstantDeclaration: string;
+    skinType: string;
+    functionSignature: string;
+    applyAlphaImportPath: string;
+};
+
+/**
+ * A skin family describes where its tokens live, where the generated files go, how each skin
+ * module is shaped, and which skins it contains. Known and community skins share the same
+ * generation pipeline and differ only in this descriptor.
+ */
+type SkinFamily = {
+    tokensFolder: string;
+    skinsFolder: string;
+    cssFolder: string;
+    skins: Array<string>;
+    skinFileName: (skinName: string) => string;
+    skinModule: (skinName: string, skinConstantName: string) => SkinModule;
+    generateSharedFiles?: (skinNames: Array<string>) => Promise<void>;
+};
+
+const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);
+const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+const toPascalCase = (str: string): string => capitalize(toCamelCase(str));
+
+const jsonSort = (obj: unknown): unknown => {
+    if (Array.isArray(obj)) {
+        return obj.map(jsonSort);
+    }
+
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    return Object.keys(obj)
+        .sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}))
+        .reduce<Record<string, unknown>>((acc, key) => {
+            acc[key] = jsonSort((obj as Record<string, unknown>)[key]);
+            return acc;
+        }, {});
+};
+
+const buildGradient = (gradientDescription: GradientDescription): string => {
+    const stops = gradientDescription.colors.map((color) => {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const formattedColor = '${' + buildColor(color) + '}';
+        return `${formattedColor} ${color.stop * 100}%`;
+    });
+    return '`' + `linear-gradient(${gradientDescription.angle}deg, ${stops.join(', ')})` + '`';
+};
+
+const buildColor = (colorDescription: ColorDescription): string => {
+    if (colorDescription.type === 'linear-gradient') {
+        return buildGradient(colorDescription.value);
+    }
+
+    if (typeof colorDescription.value !== 'string') {
+        console.error('Unexpected color description:', JSON.stringify(colorDescription, null, 2));
+        process.exit(1);
+    }
+
+    if (colorDescription.value.startsWith('{') && colorDescription.value.endsWith('}')) {
+        return colorDescription.value.replace('{', '').replace('}', '');
+    }
+
+    // https://regexper.com/#%2Frgba%5C%28%5C%7B%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\(\{(.+)\}, ([01](?:\.\d+)?)\)/;
+    const colorWithAlphaMatches = colorDescription.value.match(colorWithAlphaRegExp);
+
+    if (colorWithAlphaMatches) {
+        const colorName = colorWithAlphaMatches[1];
+        const alpha = colorWithAlphaMatches[2];
+        return `applyAlpha(${colorName}, ${alpha})`;
+    }
+
+    throw new Error(`Unknown color format: ${colorDescription.value}`);
+};
+
+const generateSkinSrc = (skinName: string, family: SkinFamily): string => {
+    const designTokensFile = fs.readFileSync(path.join(family.tokensFolder, `${skinName}.json`), 'utf8');
+    const needsApplyAlphaImport = designTokensFile.includes('rgba');
+    const designTokens: DesignTokens = JSON.parse(designTokensFile);
+    const skinConstantName = `${skinName.toUpperCase().replace(/-/g, '_')}_SKIN`;
+
+    const textTokens: Record<string, Record<string, unknown>> = {};
+    Object.entries(designTokens.text).forEach(([textAttribute, textAttributeConfig]) => {
+        Object.entries(textAttributeConfig).forEach(([textPresetName, {value}]) => {
+            if (!textTokens[textPresetName]) {
+                textTokens[textPresetName] = {};
+            }
+            textTokens[textPresetName][textAttribute] = value;
+        });
+    });
+
+    const {
+        constantsImport,
+        skinTypeImport,
+        skinConstantDeclaration,
+        skinType,
+        functionSignature,
+        applyAlphaImportPath,
+    } = family.skinModule(skinName, skinConstantName);
+
+    return `
+
+${constantsImport}${needsApplyAlphaImport ? `import {applyAlpha} from '${applyAlphaImportPath}';\n` : ''}
+${skinTypeImport}
+
+${skinConstantDeclaration}export const palette = {
+    ${Object.entries(designTokens.global.palette)
+        .map(([colorName, colorDescription]) => `'${colorName}':'${colorDescription.value}'`)
+        .join(',')}
+};
+
+${functionSignature}
+    const skin: ${skinType} = {
+        name: ${skinConstantName},
+        colors: {
+            ${Object.entries(designTokens.light)
+                .map(([colorName, colorDescription]) => `'${colorName}': ${buildColor(colorDescription)}`)
+                .join(',')}
+        },
+        darkModeColors: {
+            ${Object.entries(designTokens.dark)
+                .map(([colorName, colorDescription]) => `'${colorName}': ${buildColor(colorDescription)}`)
+                .join(',')}
+        },
+        borderRadii: {
+            ${Object.entries(designTokens.radius)
+                .map(
+                    ([radiusName, radiusDescription]) =>
+                        `'${radiusName}': '${buildRadius(radiusDescription)}'`
+                )
+                .join(',')}
+        },
+        textPresets: ${JSON.stringify(jsonSort(textTokens))},
+        themeVariants: {
+            ${Object.entries(designTokens.themeVariant)
+                .map(
+                    ([componentName, variantDescription]) =>
+                        `'${componentName}': '${variantDescription.value}'`
+                )
+                .join(',')},
+        },
+        spacing: ${JSON.stringify(
+            Object.fromEntries(Object.entries(designTokens.spacing).map(([name, {value}]) => [name, value]))
+        )},
+    };
+    return skin;
+};
+`;
+};
+
+const generateColorTypesSrc = (skinName: string, tokensFolder: string): string => {
+    const designTokensFile = fs.readFileSync(path.join(tokensFolder, `${skinName}.json`), 'utf8');
+    const designTokens: DesignTokens = JSON.parse(designTokensFile);
+
+    return `
+export type Colors = {
+    ${Object.keys(designTokens.light)
+        .map((colorName) => `'${colorName}': string`)
+        .join(';')}
+};`;
+};
+
+const formatCss = async (source: string): Promise<string> =>
+    prettier.format(`${GENERATED_BANNER}\n${source}`, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'css',
+    });
+
+const formatTs = async (source: string): Promise<string> =>
+    prettier.format(`${GENERATED_BANNER}\n${source}`, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'typescript',
+    });
+
+const OFFICIAL_SKINS_FAMILY: SkinFamily = {
+    skins: ['blau', 'movistar', 'o2', 'telefonica', 'vivo', 'vivo-evolution', 'esimflag'],
+    tokensFolder: DESIGN_TOKENS_FOLDER,
+    skinsFolder: SKINS_FOLDER,
+    cssFolder: CSS_FOLDER,
+    skinFileName: (skinName) => `${skinName}.tsx`,
+    skinModule: (skinName, skinConstantName) => ({
+        constantsImport: `import {${skinConstantName}} from './constants';\n`,
+        skinTypeImport: `import type {GetKnownSkin, KnownSkin} from './types';`,
+        skinConstantDeclaration: '',
+        skinType: 'KnownSkin',
+        functionSignature: `export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => {`,
+        applyAlphaImportPath: '../utils/color',
+    }),
+    async generateSharedFiles(skinNames) {
+        const [referenceSkin] = skinNames;
+        if (!referenceSkin) {
+            return;
+        }
+
+        const typesSrc = await formatTs(generateColorTypesSrc(referenceSkin, this.tokensFolder));
+        fs.writeFileSync(path.join(this.skinsFolder, 'types', 'colors.tsx'), typesSrc);
+
+        const commonCssSrc = await formatCss(generateCommonCssSrc(this.tokensFolder));
+        fs.writeFileSync(path.join(this.cssFolder, 'mistica-common.css'), commonCssSrc);
+    },
+};
+
+const COMMUNITY_SKINS_FAMILY: SkinFamily = {
+    skins: ['cyber'],
+    tokensFolder: path.join(DESIGN_TOKENS_FOLDER, 'community'),
+    skinsFolder: COMMUNITY_SKINS_FOLDER,
+    cssFolder: COMMUNITY_CSS_FOLDER,
+    skinFileName: (skinName) => `${skinName}-skin.tsx`,
+    skinModule: (skinName, skinConstantName) => ({
+        constantsImport: '',
+        skinTypeImport: `import type {Skin} from '../../skins/types';`,
+        skinConstantDeclaration: `export const ${skinConstantName} = '${toPascalCase(skinName)}';\n\n`,
+        skinType: 'Skin',
+        functionSignature: `export const get${toPascalCase(skinName)}Skin = (): Skin => {`,
+        applyAlphaImportPath: '../../utils/color',
+    }),
+};
+
+/**
+ * Returns the family's skins whose token file exists, logging an error for any that are missing.
+ */
+const listExistingSkins = (family: SkinFamily): Array<string> =>
+    family.skins.filter((skinName) => {
+        const exists = fs.existsSync(path.join(family.tokensFolder, `${skinName}.json`));
+        if (!exists) {
+            console.error(`Missing ${skinName}.json file`);
+        }
+        return exists;
+    });
+
+const generateSkinFamily = async (family: SkinFamily): Promise<void> => {
+    const skinNames = listExistingSkins(family);
+    if (skinNames.length === 0) {
+        return;
+    }
+
+    fs.mkdirSync(family.skinsFolder, {recursive: true});
+    fs.mkdirSync(family.cssFolder, {recursive: true});
+
+    for (const skinName of skinNames) {
+        console.log('Generating tokens for skin', skinName);
+
+        const skinSrc = await formatTs(generateSkinSrc(skinName, family));
+        fs.writeFileSync(path.join(family.skinsFolder, family.skinFileName(skinName)), skinSrc);
+
+        const skinCssSrc = await formatCss(generateSkinCssSrc(skinName, family.tokensFolder));
+        fs.writeFileSync(path.join(family.cssFolder, `${skinName}.css`), skinCssSrc);
+    }
+
+    await family.generateSharedFiles?.(skinNames);
+};
+
+const main = async (): Promise<void> => {
+    await generateSkinFamily(OFFICIAL_SKINS_FAMILY);
+    await generateSkinFamily(COMMUNITY_SKINS_FAMILY);
+};
+
+main().catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+});
diff --git a/packages/generate-design-tokens/jsconfig.json b/packages/generate-design-tokens/jsconfig.json
deleted file mode 100644
index 86d0c2cefc..0000000000
--- a/packages/generate-design-tokens/jsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "NodeNext",
-        "target": "es2020",
-        "checkJs": true
-    },
-    "exclude": ["node_modules", ".yarn"]
-}
diff --git a/packages/generate-design-tokens/package.json b/packages/generate-design-tokens/package.json
index 9af07563a9..f325b88775 100644
--- a/packages/generate-design-tokens/package.json
+++ b/packages/generate-design-tokens/package.json
@@ -3,11 +3,16 @@
     "type": "module",
     "packageManager": "yarn@3.6.1",
     "scripts": {
-        "generate": "node index.js"
+        "generate": "node index.ts",
+        "typecheck": "tsc"
     },
     "dependencies": {
         "@telefonica/prettier-config": "^2.0.0",
         "prettier": "^3.3.3"
     },
+    "devDependencies": {
+        "@types/node": "^25.0.3",
+        "typescript": "^5.9.3"
+    },
     "prettier": "@telefonica/prettier-config"
 }
diff --git a/packages/generate-design-tokens/token-types.ts b/packages/generate-design-tokens/token-types.ts
new file mode 100644
index 0000000000..324a521945
--- /dev/null
+++ b/packages/generate-design-tokens/token-types.ts
@@ -0,0 +1,40 @@
+export type GradientDescription = {
+    angle: number;
+    colors: Array<{
+        value: string;
+        stop: number; // value from 0 to 1
+    }>;
+};
+
+export type SolidColorDescription = {
+    value: string;
+    type?: undefined;
+};
+
+export type GradientColorDescription = {
+    type: 'linear-gradient';
+    value: GradientDescription;
+};
+
+export type ColorDescription = SolidColorDescription | GradientColorDescription;
+
+export type RadiusDescription = {
+    value: string;
+};
+
+export type TextTokenValue = string | number | {mobile: number; desktop: number};
+
+export type SpacingValue = number | string | {mobile: number; desktop: number};
+
+export type DesignTokens = {
+    global: {palette: Record<string, {value: string}>};
+    light: Record<string, ColorDescription>;
+    dark: Record<string, ColorDescription>;
+    radius: Record<string, RadiusDescription>;
+    text: Record<string, Record<string, {value: TextTokenValue}>>;
+    themeVariant: Record<string, {value: string}>;
+    spacing: {
+        responsiveLayoutMargin: {value: {mobile: number; desktop: number}};
+        [spacingName: string]: {value: SpacingValue};
+    };
+};
diff --git a/packages/generate-design-tokens/tsconfig.json b/packages/generate-design-tokens/tsconfig.json
new file mode 100644
index 0000000000..0074a322e8
--- /dev/null
+++ b/packages/generate-design-tokens/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "module": "nodenext",
+        "moduleResolution": "nodenext",
+        "target": "esnext",
+        "lib": ["esnext"],
+        "types": ["node"],
+        "strict": true,
+        "noEmit": true,
+        "allowImportingTsExtensions": true,
+        "erasableSyntaxOnly": true,
+        "resolveJsonModule": true,
+        "forceConsistentCasingInFileNames": true,
+        "skipLibCheck": true
+    },
+    "include": ["*.ts"],
+    "exclude": ["node_modules", ".yarn"]
+}
diff --git a/packages/generate-design-tokens/yarn.lock b/packages/generate-design-tokens/yarn.lock
index 0e0d359504..bc1b457fa6 100644
--- a/packages/generate-design-tokens/yarn.lock
+++ b/packages/generate-design-tokens/yarn.lock
@@ -14,12 +14,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^25.0.3":
+  version: 25.9.5
+  resolution: "@types/node@npm:25.9.5"
+  dependencies:
+    undici-types: ">=7.24.0 <7.24.7"
+  checksum: 8de12c0edf2fd5e520723293b9b5744df78f37e94e600f43d299c5e8dd4ca581669ee27dc79493cc22c4152f4256529d0d2bdba704785ec1193d76c1e69c7652
+  languageName: node
+  linkType: hard
+
 "generate-design-tokens@workspace:.":
   version: 0.0.0-use.local
   resolution: "generate-design-tokens@workspace:."
   dependencies:
     "@telefonica/prettier-config": ^2.0.0
+    "@types/node": ^25.0.3
     prettier: ^3.3.3
+    typescript: ^5.9.3
   languageName: unknown
   linkType: soft
 
@@ -31,3 +42,30 @@ __metadata:
   checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
   languageName: node
   linkType: hard
+
+"typescript@npm:^5.9.3":
+  version: 5.9.3
+  resolution: "typescript@npm:5.9.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 0d0ffb84f2cd072c3e164c79a2e5a1a1f4f168e84cb2882ff8967b92afe1def6c2a91f6838fb58b168428f9458c57a2ba06a6737711fdd87a256bbe83e9a217f
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@^5.9.3#~builtin<compat/typescript>":
+  version: 5.9.3
+  resolution: "typescript@patch:typescript@npm%3A5.9.3#~builtin<compat/typescript>::version=5.9.3&hash=14eedb"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 8bb8d86819ac86a498eada254cad7fb69c5f74778506c700c2a712daeaff21d3a6f51fd0d534fe16903cb010d1b74f89437a3d02d4d0ff5ca2ba9a4660de8497
+  languageName: node
+  linkType: hard
+
+"undici-types@npm:>=7.24.0 <7.24.7":
+  version: 7.24.6
+  resolution: "undici-types@npm:7.24.6"
+  checksum: e79802e37dc472c6324850d938b5df6b9e796f6a1bb5f8ccd24f3a6d17eae94a9cc125506c8b339a3293ffbad81daeba30b843e564c1d237b3c8deafd98b6267
+  languageName: node
+  linkType: hard
diff --git a/src/community/skins/cyber-skin.tsx b/src/community/skins/cyber-skin.tsx
index b08bc673c7..07a0975628 100644
--- a/src/community/skins/cyber-skin.tsx
+++ b/src/community/skins/cyber-skin.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {applyAlpha} from '../../utils/color';
 
 import type {Skin} from '../../skins/types';
@@ -98,15 +104,15 @@ export const getCyberSkin = (): Skin => {
             backgroundSkeletonBrand: palette.brand70,
             navigationBarBackground: palette.brand,
             backgroundAlternative: palette.brand10,
-            backgroundSelected: applyAlpha(palette.brand, 0.15),
-            backgroundSelectedHover: applyAlpha(palette.brand, 0.2),
-            backgroundSelectedPressed: applyAlpha(palette.brand, 0.25),
-            backgroundSelectedBrand: palette.brand10,
-            backgroundSelectedBrandHover: palette.brand15,
-            backgroundSelectedBrandPressed: palette.brand15,
-            backgroundSelectedNegative: applyAlpha(palette.white, 0.1),
-            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.12),
-            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.15),
+            backgroundSelected: applyAlpha(palette.brand, 0.08),
+            backgroundSelectedHover: applyAlpha(palette.brand, 0.12),
+            backgroundSelectedPressed: applyAlpha(palette.brand, 0.16),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBlack, 0.32),
+            backgroundSelectedNegative: applyAlpha(palette.white, 0.2),
+            backgroundSelectedNegativeHover: applyAlpha(palette.white, 0.28),
+            backgroundSelectedNegativePressed: applyAlpha(palette.white, 0.35),
             backgroundBrandTop: palette.brand,
             backgroundBrandBottom: palette.brand,
             backgroundDropZoneHover: applyAlpha(palette.brand70, 0.05),
@@ -141,13 +147,13 @@ export const getCyberSkin = (): Skin => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
-            buttonLinkNeutralBackgroundPressed: palette.brand10,
-            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0.08),
-            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.12),
-            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0.08),
-            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.12),
-            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0.08),
-            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.12),
+            buttonLinkNeutralBackgroundPressed: palette.grey10,
+            buttonLinkNeutralBackgroundBrand: palette.white,
+            buttonLinkNeutralBackgroundBrandPressed: palette.grey10,
+            buttonLinkNeutralBackgroundNegative: palette.white,
+            buttonLinkNeutralBackgroundNegativePressed: palette.grey10,
+            buttonLinkNeutralBackgroundMedia: palette.white,
+            buttonLinkNeutralBackgroundMediaPressed: palette.grey10,
             buttonPrimaryBackground: palette.black,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -211,11 +217,11 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red50,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.brand30,
-            textLinkNeutral: palette.black,
-            textLinkNeutralBrand: palette.white,
-            textLinkNeutralNegative: palette.white,
-            textLinkNeutralAlternative: palette.grey500,
-            textLinkNeutralMedia: palette.white,
+            textLinkNeutral: palette.grey900,
+            textLinkNeutralBrand: palette.grey900,
+            textLinkNeutralNegative: palette.grey900,
+            textLinkNeutralAlternative: palette.grey900,
+            textLinkNeutralMedia: palette.grey900,
             textActivated: palette.brand70,
             textBrand: palette.brand70,
             inputBorder: palette.grey400,
@@ -384,6 +390,15 @@ export const getCyberSkin = (): Skin => {
         darkModeColors: {
             background: palette.darkModeBlack,
             backgroundAlternative: palette.darkModeBlack,
+            backgroundSelected: applyAlpha(palette.darkModeBrand, 0.18),
+            backgroundSelectedHover: applyAlpha(palette.darkModeBrand, 0.25),
+            backgroundSelectedPressed: applyAlpha(palette.darkModeBrand, 0.33),
+            backgroundSelectedBrand: applyAlpha(palette.darkModeBrand, 0.18),
+            backgroundSelectedBrandHover: applyAlpha(palette.darkModeBrand, 0.25),
+            backgroundSelectedBrandPressed: applyAlpha(palette.darkModeBrand, 0.33),
+            backgroundSelectedNegative: applyAlpha(palette.darkModeBrand, 0.18),
+            backgroundSelectedNegativeHover: applyAlpha(palette.darkModeBrand, 0.25),
+            backgroundSelectedNegativePressed: applyAlpha(palette.darkModeBrand, 0.33),
             backgroundBrand: palette.darkModeBlack,
             backgroundNegative: palette.darkModeBlack,
             backgroundBrandSecondary: palette.darkModeBlack,
@@ -439,6 +454,13 @@ export const getCyberSkin = (): Skin => {
             buttonLinkBackgroundNegativePressed: applyAlpha(palette.brand30, 0.16),
             buttonLinkBackgroundBrandPressed: applyAlpha(palette.brand30, 0.16),
             buttonLinkBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: applyAlpha(palette.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: applyAlpha(palette.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: applyAlpha(palette.white, 0.08),
             buttonPrimaryBackground: palette.brand,
             buttonPrimaryBackgroundInverse: palette.white,
             buttonPrimaryBackgroundNegative: palette.white,
@@ -502,6 +524,11 @@ export const getCyberSkin = (): Skin => {
             textLinkDanger: palette.red30,
             textLinkDangerMedia: palette.red50,
             textLinkSnackbar: palette.darkModeBrand,
+            textLinkNeutral: palette.brand10,
+            textLinkNeutralBrand: palette.brand10,
+            textLinkNeutralNegative: palette.brand10,
+            textLinkNeutralAlternative: palette.brand10,
+            textLinkNeutralMedia: palette.white,
             textActivated: palette.darkModeBrand,
             textBrand: palette.brand30,
             inputBorder: palette.grey400,
@@ -682,336 +709,93 @@ export const getCyberSkin = (): Skin => {
             mediaSmall: '2px',
         },
         textPresets: {
-            cardTitle: {
+            button: {weight: 'medium'},
+            cardDescriptionDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardDescriptionSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardPretitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardPretitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardSubtitleDefault: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardSubtitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            cardTitle: {weight: 'medium'},
+            cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            chipLabel: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'regular',
-                size: {
-                    mobile: 20,
-                    desktop: 28,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-            },
-            rowTitle: {
-                weight: 'regular',
-            },
-            button: {
-                weight: 'medium',
             },
+            indicator: {weight: 'medium'},
+            inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            inputLabel: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            inputValue: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            link: {weight: 'medium'},
+            loadingScreenTitle: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            navigationBar: {weight: 'medium'},
+            rowTitle: {weight: 'regular'},
+            stepperStepLabel: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             tabsLabel: {
-                weight: 'medium',
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            link: {
-                weight: 'medium',
-            },
-            title1: {
-                weight: 'medium',
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
-            },
-            title2: {
-                weight: 'regular',
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            title3: {
-                weight: 'regular',
-                size: {
-                    mobile: 20,
-                    desktop: 28,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-            },
-            title4: {
-                weight: 'regular',
-                size: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40,
-                },
-            },
-            indicator: {
-                weight: 'medium',
-            },
-            navigationBar: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
             },
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             text5: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'regular',
-                size: {
-                    mobile: 20,
-                    desktop: 28,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 32,
-                },
             },
             text6: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
                 weight: 'regular',
-                size: {
-                    mobile: 24,
-                    desktop: 32,
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 40,
-                },
             },
             text7: {
+                lineHeight: {desktop: 48, mobile: 32},
+                size: {desktop: 40, mobile: 28},
                 weight: 'regular',
-                size: {
-                    mobile: 28,
-                    desktop: 40,
-                },
-                lineHeight: {
-                    mobile: 32,
-                    desktop: 48,
-                },
             },
             text8: {
+                lineHeight: {desktop: 56, mobile: 40},
+                size: {desktop: 48, mobile: 32},
                 weight: 'regular',
-                size: {
-                    mobile: 32,
-                    desktop: 48,
-                },
-                lineHeight: {
-                    mobile: 40,
-                    desktop: 56,
-                },
             },
             text9: {
+                lineHeight: {desktop: 64, mobile: 48},
+                size: {desktop: 56, mobile: 40},
                 weight: 'regular',
-                size: {
-                    mobile: 40,
-                    desktop: 56,
-                },
-                lineHeight: {
-                    mobile: 48,
-                    desktop: 64,
-                },
             },
             text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
                 weight: 'regular',
-                size: {
-                    mobile: 48,
-                    desktop: 64,
-                },
-                lineHeight: {
-                    mobile: 56,
-                    desktop: 72,
-                },
             },
-            chipLabel: {
+            title1: {
+                lineHeight: {desktop: 20, mobile: 16},
+                size: {desktop: 14, mobile: 12},
                 weight: 'medium',
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardPretitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardTitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardSubtitleSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardDescriptionSnap: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardPretitleDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardTitleDefault: {
-                size: {
-                    mobile: 18,
-                    desktop: 20,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 28,
-                },
-            },
-            cardSubtitleDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            cardDescriptionDefault: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            text1: {
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
-            },
-            text2: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
-            },
-            text3: {
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            text4: {
-                size: {
-                    mobile: 18,
-                    desktop: 20,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 28,
-                },
-            },
-            inputLabel: {
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
             },
-            inputValue: {
-                size: {
-                    mobile: 16,
-                    desktop: 18,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 24,
-                },
-            },
-            inputHelperText: {
-                size: {
-                    mobile: 12,
-                    desktop: 14,
-                },
-                lineHeight: {
-                    mobile: 16,
-                    desktop: 20,
-                },
+            title2: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'regular',
             },
-            stepperStepLabel: {
-                size: {
-                    mobile: 14,
-                    desktop: 16,
-                },
-                lineHeight: {
-                    mobile: 20,
-                    desktop: 24,
-                },
+            title3: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
+                weight: 'regular',
             },
-            loadingScreenTitle: {
-                size: {
-                    mobile: 18,
-                    desktop: 20,
-                },
-                lineHeight: {
-                    mobile: 24,
-                    desktop: 28,
-                },
+            title4: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
+                weight: 'regular',
             },
         },
         themeVariants: {
@@ -1019,119 +803,29 @@ export const getCyberSkin = (): Skin => {
             brandLoadingScreen: 'inverse',
         },
         spacing: {
-            buttonDefaultPadding: {
-                left: {
-                    mobile: 20,
-                    desktop: 20,
-                },
-                right: {
-                    mobile: 20,
-                    desktop: 20,
-                },
-            },
-            buttonSmallPadding: {
-                left: {
-                    mobile: 14,
-                    desktop: 14,
-                },
-                right: {
-                    mobile: 14,
-                    desktop: 14,
-                },
-            },
+            buttonDefaultPadding: {left: {mobile: 20, desktop: 20}, right: {mobile: 20, desktop: 20}},
+            buttonSmallPadding: {left: {mobile: 14, desktop: 14}, right: {mobile: 14, desktop: 14}},
             cardDefaultPadding: {
-                top: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                bottom: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                left: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-            },
-            inputPadding: {
-                top: {
-                    mobile: 8,
-                    desktop: 8,
-                },
-                bottom: {
-                    mobile: 8,
-                    desktop: 8,
-                },
-            },
-            tagPadding: {
-                top: {
-                    mobile: 4,
-                    desktop: 4,
-                },
-                bottom: {
-                    mobile: 4,
-                    desktop: 4,
-                },
+                top: {mobile: 16, desktop: 24},
+                bottom: {mobile: 16, desktop: 24},
+                left: {mobile: 16, desktop: 24},
+                right: {mobile: 16, desktop: 24},
             },
+            inputPadding: {top: {mobile: 8, desktop: 8}, bottom: {mobile: 8, desktop: 8}},
+            tagPadding: {top: {mobile: 4, desktop: 4}, bottom: {mobile: 4, desktop: 4}},
             feedbackScreenPadding: {
-                top: {
-                    mobile: 64,
-                    desktop: 64,
-                },
-                bottom: {
-                    mobile: 16,
-                    desktop: 64,
-                },
-                left: {
-                    mobile: 16,
-                    desktop: 64,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 64,
-                },
-            },
-            heroPadding: {
-                top: {
-                    mobile: 24,
-                    desktop: 56,
-                },
-                bottom: {
-                    mobile: 24,
-                    desktop: 56,
-                },
-            },
-            headerPadding: {
-                top: {
-                    mobile: 24,
-                    desktop: 48,
-                },
-                bottom: {
-                    mobile: 24,
-                    desktop: 48,
-                },
+                top: {mobile: 64, desktop: 64},
+                bottom: {mobile: 16, desktop: 64},
+                left: {mobile: 16, desktop: 64},
+                right: {mobile: 16, desktop: 64},
             },
+            heroPadding: {top: {mobile: 24, desktop: 56}, bottom: {mobile: 24, desktop: 56}},
+            headerPadding: {top: {mobile: 24, desktop: 48}, bottom: {mobile: 24, desktop: 48}},
             drawerPadding: {
-                top: {
-                    mobile: 32,
-                    desktop: 40,
-                },
-                bottom: {
-                    mobile: 16,
-                    desktop: 24,
-                },
-                left: {
-                    mobile: 16,
-                    desktop: 40,
-                },
-                right: {
-                    mobile: 16,
-                    desktop: 40,
-                },
+                top: {mobile: 32, desktop: 40},
+                bottom: {mobile: 16, desktop: 24},
+                left: {mobile: 16, desktop: 40},
+                right: {mobile: 16, desktop: 40},
             },
             responsiveLayoutMargin: {mobile: 16, desktop: 48},
         },
diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx
index 4d527b7a3e..5d7538c756 100644
--- a/src/skins/blau.tsx
+++ b/src/skins/blau.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {BLAU_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/src/skins/esimflag.tsx b/src/skins/esimflag.tsx
index 087b91ff0a..f70c9a876d 100644
--- a/src/skins/esimflag.tsx
+++ b/src/skins/esimflag.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {ESIMFLAG_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/src/skins/movistar.tsx b/src/skins/movistar.tsx
index ca9caf8074..3c21effac3 100644
--- a/src/skins/movistar.tsx
+++ b/src/skins/movistar.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {MOVISTAR_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/src/skins/o2.tsx b/src/skins/o2.tsx
index fe07e25fdc..2c60af0ce6 100644
--- a/src/skins/o2.tsx
+++ b/src/skins/o2.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {O2_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/src/skins/telefonica.tsx b/src/skins/telefonica.tsx
index 0c2cd34a0e..ca313750d6 100644
--- a/src/skins/telefonica.tsx
+++ b/src/skins/telefonica.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {TELEFONICA_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/src/skins/types/colors.tsx b/src/skins/types/colors.tsx
index f2911f9145..dcc5df30d4 100644
--- a/src/skins/types/colors.tsx
+++ b/src/skins/types/colors.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 export type Colors = {
     background: string;
     backgroundAlternative: string;
@@ -46,6 +52,10 @@ export type Colors = {
     border: string;
     borderHigh: string;
     borderSelected: string;
+    completedStep: string;
+    completedStepInverse: string;
+    completedStepNegative: string;
+    completedStepBrand: string;
     coverBackgroundHover: string;
     coverBackgroundPressed: string;
     buttonDangerBackground: string;
@@ -146,10 +156,6 @@ export type Colors = {
     inputBorderInverse: string;
     inputBorderNegative: string;
     inputBorderBrand: string;
-    completedStep: string;
-    completedStepInverse: string;
-    completedStepNegative: string;
-    completedStepBrand: string;
     control: string;
     controlActivated: string;
     controlInverse: string;
@@ -207,13 +213,13 @@ export type Colors = {
     textSecondaryNegative: string;
     textSecondaryBrand: string;
     textSecondaryMedia: string;
-    success: string;
-    warning: string;
     error: string;
     textError: string;
     textErrorInverse: string;
     textErrorNegative: string;
     textErrorBrand: string;
+    success: string;
+    warning: string;
     promo: string;
     highlight: string;
     successLow: string;
diff --git a/src/skins/vivo-evolution.tsx b/src/skins/vivo-evolution.tsx
index b40fbee630..45bd36db89 100644
--- a/src/skins/vivo-evolution.tsx
+++ b/src/skins/vivo-evolution.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {VIVO_EVOLUTION_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/src/skins/vivo.tsx b/src/skins/vivo.tsx
index 9ef00f9dfa..89fe07b02f 100644
--- a/src/skins/vivo.tsx
+++ b/src/skins/vivo.tsx
@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 import {VIVO_SKIN} from './constants';
 import {applyAlpha} from '../utils/color';
 
diff --git a/tsconfig.json b/tsconfig.json
index 212e4d6e67..72658f12e3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -90,5 +90,5 @@
     },
 
     // this also excludes paths from VSCode auto import feature
-    "exclude": ["dist", "dist-ts", "dist-es", "node_modules", "examples"]
+    "exclude": ["dist", "dist-ts", "dist-es", "node_modules", "examples", "packages"]
 }
diff --git a/tsconfig.production.json b/tsconfig.production.json
index c0f332a971..1345d3756a 100644
--- a/tsconfig.production.json
+++ b/tsconfig.production.json
@@ -82,6 +82,7 @@
         "playroom",
         "src/test-utils/**",
         "setup-test-env.tsx",
-        "examples"
+        "examples",
+        "packages"
     ]
 }
diff --git a/yarn.lock b/yarn.lock
index d48e428a89..28f9725f04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10939,7 +10939,9 @@ __metadata:
   resolution: "generate-design-tokens@workspace:packages/generate-design-tokens"
   dependencies:
     "@telefonica/prettier-config": ^2.0.0
+    "@types/node": ^25.0.3
     prettier: ^3.3.3
+    typescript: ^5.9.3
   languageName: unknown
   linkType: soft