[data-mistica-skin='telefonica'] { /* Palette colors */ --mistica-telefonica-white: #ffffff; --mistica-telefonica-coral10: #fdf0ef; --mistica-telefonica-telefonicaBlue: #0066ff; --mistica-telefonica-telefonicaBlue70: #0356c9; --mistica-telefonica-grey1: #f2f4ff; --mistica-telefonica-grey2: #d1d5e4; --mistica-telefonica-grey5: #6e7894; --mistica-telefonica-coral: #e66c64; --mistica-telefonica-coral80: #912c31; --mistica-telefonica-telefonicaBlue30: #80b3ff; --mistica-telefonica-telefonicaBlue10: #e5f0ff; --mistica-telefonica-grey3: #b0b6ca; --mistica-telefonica-coral70: #d50000; --mistica-telefonica-grey9: #031a34; --mistica-telefonica-turquoise: #59c2c9; --mistica-telefonica-ambar: #eac344; --mistica-telefonica-orchid: #c466ef; --mistica-telefonica-coral40: #e3a19a; --mistica-telefonica-turquoise10: #eef9fa; --mistica-telefonica-ambar10: #fdf9ec; --mistica-telefonica-orchid10: #f9f0fd; --mistica-telefonica-turquoise70: #3e888d; --mistica-telefonica-ambar70: #69581f; --mistica-telefonica-orchid70: #8a1a93; --mistica-telefonica-grey4: #8f97af; --mistica-telefonica-darkModeBlack: #191919; --mistica-telefonica-darkModeGrey: #242424; --mistica-telefonica-grey6: #58617a; --mistica-telefonica-darkModeGrey6: #313235; --mistica-telefonica-telefonicaBlue20: #b2d1ff; --mistica-telefonica-grey8: #2b3447; --mistica-telefonica-turquoise40: #8bd4d9; --mistica-telefonica-ambar40: #f0d57c; --mistica-telefonica-orchid40: #d694f4; /* Raw palette colors, for use with rgba() */ --mistica-telefonica-raw-telefonicaBlue70: 3, 86, 201; --mistica-telefonica-raw-darkModeBlack: 25, 25, 25; --mistica-telefonica-raw-grey6: 88, 97, 122; --mistica-telefonica-raw-white: 255, 255, 255; --mistica-telefonica-raw-black: 0, 0, 0; --mistica-telefonica-raw-darkModeGrey: 36, 36, 36; /* Colors */ --mistica-color-appBarBackground: var(--mistica-telefonica-white); --mistica-color-background: var(--mistica-telefonica-white); --mistica-color-backgroundContainer: var(--mistica-telefonica-white); --mistica-color-backgroundContainerError: var(--mistica-telefonica-coral10); --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.05); --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.08); --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.2); --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.4); --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-grey1); --mistica-color-backgroundBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-grey6), 0.8); --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey2); --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-navigationBarBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundAlternative: var(--mistica-telefonica-grey1); --mistica-color-backgroundBrandTop: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-telefonicaBlue); --mistica-color-skeletonWave: var(--mistica-telefonica-grey2); --mistica-color-borderLow: var(--mistica-telefonica-grey1); --mistica-color-border: var(--mistica-telefonica-grey2); --mistica-color-borderHigh: var(--mistica-telefonica-grey5); --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue); --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25); --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35); --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral); --mistica-color-buttonDangerBackgroundPressed: var(--mistica-telefonica-coral80); --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80); --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-telefonica-coral10); --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-telefonica-white); --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-telefonica-coral10); --mistica-color-buttonLinkBackgroundPressed: var(--mistica-telefonica-grey1); --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-white); --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonSecondaryBorderPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-telefonica-raw-white), 0.1); --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.1); --mistica-color-textButtonPrimary: var(--mistica-telefonica-white); --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textButtonPrimaryInversePressed: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textButtonSecondary: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textButtonSecondaryPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-white); --mistica-color-textButtonSecondaryInversePressed: var(--mistica-telefonica-white); --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textLinkInverse: var(--mistica-telefonica-white); --mistica-color-textLinkDanger: var(--mistica-telefonica-coral); --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-control: var(--mistica-telefonica-grey3); --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-controlInverse: var(--mistica-telefonica-grey1); --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white); --mistica-color-controlError: var(--mistica-telefonica-coral); --mistica-color-barTrack: var(--mistica-telefonica-grey2); --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3); --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2); --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2); --mistica-color-iosControlKnob: var(--mistica-telefonica-white); --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-divider: var(--mistica-telefonica-grey2); --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2); --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue); --mistica-color-badge: var(--mistica-telefonica-coral70); --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral); --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey9); --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-brandHigh: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-inverse: var(--mistica-telefonica-white); --mistica-color-neutralHigh: var(--mistica-telefonica-grey9); --mistica-color-neutralMedium: var(--mistica-telefonica-grey5); --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5); --mistica-color-neutralLow: var(--mistica-telefonica-grey1); --mistica-color-neutralLowAlternative: var(--mistica-telefonica-grey2); --mistica-color-textPrimary: var(--mistica-telefonica-grey9); --mistica-color-textPrimaryInverse: var(--mistica-telefonica-white); --mistica-color-textSecondary: var(--mistica-telefonica-grey5); --mistica-color-textSecondaryInverse: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-error: var(--mistica-telefonica-coral); --mistica-color-textError: var(--mistica-telefonica-coral); --mistica-color-textErrorInverse: var(--mistica-telefonica-white); --mistica-color-success: var(--mistica-telefonica-turquoise); --mistica-color-warning: var(--mistica-telefonica-ambar); --mistica-color-promo: var(--mistica-telefonica-orchid); --mistica-color-highlight: var(--mistica-telefonica-coral40); --mistica-color-successLow: var(--mistica-telefonica-turquoise10); --mistica-color-warningLow: var(--mistica-telefonica-ambar10); --mistica-color-errorLow: var(--mistica-telefonica-coral10); --mistica-color-promoLow: var(--mistica-telefonica-orchid10); --mistica-color-brandLow: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-successHigh: var(--mistica-telefonica-turquoise70); --mistica-color-warningHigh: var(--mistica-telefonica-ambar70); --mistica-color-errorHigh: var(--mistica-telefonica-coral70); --mistica-color-promoHigh: var(--mistica-telefonica-orchid70); --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70); --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70); --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70); --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70); --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-white); --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey1); --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey1); --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white); --mistica-color-textAppBar: var(--mistica-telefonica-grey4); --mistica-color-textAppBarSelected: var(--mistica-telefonica-telefonicaBlue); --mistica-color-customTabsBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid70); --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise70); --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar70); --mistica-color-tagTextError: var(--mistica-telefonica-coral70); --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-orchid10); --mistica-color-tagBackgroundActive: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-grey1); --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-turquoise10); --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-ambar10); --mistica-color-tagBackgroundError: var(--mistica-telefonica-coral10); --mistica-color-tagTextPromoInverse: var(--mistica-telefonica-orchid70); --mistica-color-tagTextActiveInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactiveInverse: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccessInverse: var(--mistica-telefonica-turquoise70); --mistica-color-tagTextWarningInverse: var(--mistica-telefonica-ambar70); --mistica-color-tagTextErrorInverse: var(--mistica-telefonica-coral70); --mistica-color-tagBackgroundPromoInverse: var(--mistica-telefonica-orchid10); --mistica-color-tagBackgroundActiveInverse: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-tagBackgroundInactiveInverse: var(--mistica-telefonica-grey1); --mistica-color-tagBackgroundSuccessInverse: var(--mistica-telefonica-turquoise10); --mistica-color-tagBackgroundWarningInverse: var(--mistica-telefonica-ambar10); --mistica-color-tagBackgroundErrorInverse: var(--mistica-telefonica-coral10); --mistica-color-cardContentOverlay: linear-gradient( 180deg, rgba(var(--mistica-telefonica-raw-black), 0) 0%, rgba(var(--mistica-telefonica-raw-black), 0.4) 30%, rgba(var(--mistica-telefonica-raw-black), 0.7) 100% ); /* Border radius */ --mistica-border-radius-avatar: 50%; --mistica-border-radius-bar: 0px; --mistica-border-radius-button: 999px; --mistica-border-radius-checkbox: 0px; --mistica-border-radius-container: 0px; --mistica-border-radius-indicator: 999px; --mistica-border-radius-input: 0px; --mistica-border-radius-legacyDisplay: 0px; --mistica-border-radius-popup: 0px; --mistica-border-radius-sheet: 0px; --mistica-border-radius-mediaSmall: 0px; /* Text */ --mistica-font-size-1: 0.75rem; --mistica-line-height-1: 1rem; --mistica-font-size-2: 0.875rem; --mistica-line-height-2: 1.25rem; --mistica-font-size-3: 1rem; --mistica-line-height-3: 1.5rem; --mistica-font-size-4: 1.125rem; --mistica-line-height-4: 1.5rem; --mistica-font-size-5: 1.25rem; --mistica-line-height-5: 1.5rem; --mistica-font-weight-5: 400; --mistica-font-size-6: 1.5rem; --mistica-line-height-6: 2rem; --mistica-font-weight-6: 400; --mistica-font-size-7: 1.75rem; --mistica-line-height-7: 2rem; --mistica-font-weight-7: 400; --mistica-font-size-8: 2rem; --mistica-line-height-8: 2.5rem; --mistica-font-weight-8: 400; --mistica-font-size-9: 2.5rem; --mistica-line-height-9: 3rem; --mistica-font-weight-9: 400; --mistica-font-size-10: 3rem; --mistica-line-height-10: 3.5rem; --mistica-font-weight-10: 400; --mistica-font-size-cardTitle: 1.25rem; --mistica-line-height-cardTitle: 1.5rem; --mistica-font-weight-cardTitle: 400; --mistica-font-weight-button: 500; --mistica-font-size-tabsLabel: 1rem; --mistica-line-height-tabsLabel: 1.5rem; --mistica-font-weight-tabsLabel: 500; --mistica-font-weight-link: 500; --mistica-font-weight-title1: 500; --mistica-font-weight-title2: 400; --mistica-font-size-title3: 1.25rem; --mistica-line-height-title3: 1.5rem; --mistica-font-weight-title3: 400; --mistica-font-weight-indicator: 500; --mistica-font-weight-navigationBar: 500; } [data-mistica-skin='telefonica'][data-mistica-color-scheme='dark'] { --mistica-color-background: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundAlternative: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundBrand: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundContainer: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerError: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-white), 0.03); --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-darkModeGrey), 0.8); --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey6); --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-grey6); --mistica-color-backgroundBrandTop: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-darkModeBlack); --mistica-color-appBarBackground: var(--mistica-telefonica-darkModeGrey); --mistica-color-navigationBarBackground: var(--mistica-telefonica-darkModeBlack); --mistica-color-skeletonWave: var(--mistica-telefonica-grey5); --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack); --mistica-color-border: var(--mistica-telefonica-darkModeGrey); --mistica-color-borderHigh: var(--mistica-telefonica-grey5); --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue); --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25); --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35); --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral); --mistica-color-buttonDangerBackgroundPressed: var(--mistica-telefonica-coral80); --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80); --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-telefonica-raw-white), 0); --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-telefonica-raw-white), 0.15); --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-telefonica-raw-white), 0.15); --mistica-color-buttonSecondaryBorderPressed: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-telefonica-raw-white), 0.15); --mistica-color-buttonSecondaryBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.15); --mistica-color-textButtonPrimary: var(--mistica-telefonica-grey2); --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-grey2); --mistica-color-textButtonPrimaryInversePressed: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondary: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondaryPressed: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondaryInversePressed: var(--mistica-telefonica-grey2); --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textLinkInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textLinkDanger: var(--mistica-telefonica-coral); --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-control: var(--mistica-telefonica-darkModeGrey6); --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-controlInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-controlError: var(--mistica-telefonica-coral); --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6); --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue); --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6); --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4); --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20); --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2); --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2); --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack); --mistica-color-badge: var(--mistica-telefonica-coral70); --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral); --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey8); --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-brandHigh: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-inverse: var(--mistica-telefonica-grey2); --mistica-color-neutralHigh: var(--mistica-telefonica-grey2); --mistica-color-neutralMedium: var(--mistica-telefonica-grey5); --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5); --mistica-color-neutralLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-neutralLowAlternative: var(--mistica-telefonica-darkModeGrey6); --mistica-color-textPrimary: var(--mistica-telefonica-grey2); --mistica-color-textPrimaryInverse: var(--mistica-telefonica-grey2); --mistica-color-textSecondary: var(--mistica-telefonica-grey4); --mistica-color-textSecondaryInverse: var(--mistica-telefonica-grey4); --mistica-color-error: var(--mistica-telefonica-coral); --mistica-color-textError: var(--mistica-telefonica-coral); --mistica-color-textErrorInverse: var(--mistica-telefonica-coral); --mistica-color-success: var(--mistica-telefonica-turquoise); --mistica-color-warning: var(--mistica-telefonica-ambar); --mistica-color-promo: var(--mistica-telefonica-orchid); --mistica-color-highlight: var(--mistica-telefonica-coral40); --mistica-color-successLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-warningLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-errorLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-promoLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-brandLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-successHigh: var(--mistica-telefonica-turquoise40); --mistica-color-warningHigh: var(--mistica-telefonica-ambar40); --mistica-color-errorHigh: var(--mistica-telefonica-coral40); --mistica-color-promoHigh: var(--mistica-telefonica-orchid40); --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70); --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70); --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70); --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70); --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-grey2); --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey4); --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey4); --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-grey2); --mistica-color-textAppBar: var(--mistica-telefonica-grey5); --mistica-color-textAppBarSelected: var(--mistica-telefonica-grey2); --mistica-color-customTabsBackground: var(--mistica-telefonica-darkModeBlack); --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid40); --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise40); --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar40); --mistica-color-tagTextError: var(--mistica-telefonica-coral40); --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundActive: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundError: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagTextPromoInverse: var(--mistica-telefonica-orchid40); --mistica-color-tagTextActiveInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactiveInverse: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccessInverse: var(--mistica-telefonica-turquoise40); --mistica-color-tagTextWarningInverse: var(--mistica-telefonica-ambar40); --mistica-color-tagTextErrorInverse: var(--mistica-telefonica-coral40); --mistica-color-tagBackgroundPromoInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundActiveInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundInactiveInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundSuccessInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundWarningInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundErrorInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-cardContentOverlay: linear-gradient( 180deg, rgba(var(--mistica-telefonica-raw-black), 0) 0%, rgba(var(--mistica-telefonica-raw-black), 0.4) 30%, rgba(var(--mistica-telefonica-raw-black), 0.7) 100% ); } @media (prefers-color-scheme: dark) { [data-mistica-skin='telefonica'] { --mistica-color-background: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundAlternative: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundBrand: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundContainer: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerError: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-backgroundContainerPressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-white), 0.03); --mistica-color-backgroundContainerBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-darkModeGrey); --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-darkModeGrey), 0.8); --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey6); --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-grey6); --mistica-color-backgroundBrandTop: var(--mistica-telefonica-darkModeBlack); --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-darkModeBlack); --mistica-color-appBarBackground: var(--mistica-telefonica-darkModeGrey); --mistica-color-navigationBarBackground: var(--mistica-telefonica-darkModeBlack); --mistica-color-skeletonWave: var(--mistica-telefonica-grey5); --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack); --mistica-color-border: var(--mistica-telefonica-darkModeGrey); --mistica-color-borderHigh: var(--mistica-telefonica-grey5); --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue); --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25); --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35); --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral); --mistica-color-buttonDangerBackgroundPressed: var(--mistica-telefonica-coral80); --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80); --mistica-color-buttonLinkDangerBackgroundPressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonLinkDangerBackgroundInverse: rgba(var(--mistica-telefonica-raw-white), 0); --mistica-color-buttonLinkDangerBackgroundInversePressed: rgba( var(--mistica-telefonica-raw-white), 0.08 ); --mistica-color-buttonLinkBackgroundPressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonSecondaryBackgroundPressed: rgba(var(--mistica-telefonica-raw-white), 0.15); --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBackgroundHover: rgba(var(--mistica-telefonica-raw-white), 0.15); --mistica-color-buttonSecondaryBorderPressed: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBackgroundInverseHover: rgba( var(--mistica-telefonica-raw-white), 0.15 ); --mistica-color-buttonSecondaryBackgroundInversePressed: rgba( var(--mistica-telefonica-raw-white), 0.15 ); --mistica-color-textButtonPrimary: var(--mistica-telefonica-grey2); --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-grey2); --mistica-color-textButtonPrimaryInversePressed: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondary: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondaryPressed: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-grey2); --mistica-color-textButtonSecondaryInversePressed: var(--mistica-telefonica-grey2); --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textLinkInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textLinkDanger: var(--mistica-telefonica-coral); --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-control: var(--mistica-telefonica-darkModeGrey6); --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-controlInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-controlError: var(--mistica-telefonica-coral); --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6); --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue); --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6); --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4); --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20); --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2); --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2); --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack); --mistica-color-badge: var(--mistica-telefonica-coral70); --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral); --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey8); --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-brandHigh: rgba(var(--mistica-telefonica-raw-white), 0.05); --mistica-color-inverse: var(--mistica-telefonica-grey2); --mistica-color-neutralHigh: var(--mistica-telefonica-grey2); --mistica-color-neutralMedium: var(--mistica-telefonica-grey5); --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5); --mistica-color-neutralLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-neutralLowAlternative: var(--mistica-telefonica-darkModeGrey6); --mistica-color-textPrimary: var(--mistica-telefonica-grey2); --mistica-color-textPrimaryInverse: var(--mistica-telefonica-grey2); --mistica-color-textSecondary: var(--mistica-telefonica-grey4); --mistica-color-textSecondaryInverse: var(--mistica-telefonica-grey4); --mistica-color-error: var(--mistica-telefonica-coral); --mistica-color-textError: var(--mistica-telefonica-coral); --mistica-color-textErrorInverse: var(--mistica-telefonica-coral); --mistica-color-success: var(--mistica-telefonica-turquoise); --mistica-color-warning: var(--mistica-telefonica-ambar); --mistica-color-promo: var(--mistica-telefonica-orchid); --mistica-color-highlight: var(--mistica-telefonica-coral40); --mistica-color-successLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-warningLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-errorLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-promoLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-brandLow: var(--mistica-telefonica-darkModeGrey6); --mistica-color-successHigh: var(--mistica-telefonica-turquoise40); --mistica-color-warningHigh: var(--mistica-telefonica-ambar40); --mistica-color-errorHigh: var(--mistica-telefonica-coral40); --mistica-color-promoHigh: var(--mistica-telefonica-orchid40); --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70); --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70); --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70); --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70); --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-grey2); --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey4); --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey4); --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-grey2); --mistica-color-textAppBar: var(--mistica-telefonica-grey5); --mistica-color-textAppBarSelected: var(--mistica-telefonica-grey2); --mistica-color-customTabsBackground: var(--mistica-telefonica-darkModeBlack); --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid40); --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise40); --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar40); --mistica-color-tagTextError: var(--mistica-telefonica-coral40); --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundActive: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundError: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagTextPromoInverse: var(--mistica-telefonica-orchid40); --mistica-color-tagTextActiveInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactiveInverse: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccessInverse: var(--mistica-telefonica-turquoise40); --mistica-color-tagTextWarningInverse: var(--mistica-telefonica-ambar40); --mistica-color-tagTextErrorInverse: var(--mistica-telefonica-coral40); --mistica-color-tagBackgroundPromoInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundActiveInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundInactiveInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundSuccessInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundWarningInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-tagBackgroundErrorInverse: var(--mistica-telefonica-darkModeGrey6); --mistica-color-cardContentOverlay: linear-gradient( 180deg, rgba(var(--mistica-telefonica-raw-black), 0) 0%, rgba(var(--mistica-telefonica-raw-black), 0.4) 30%, rgba(var(--mistica-telefonica-raw-black), 0.7) 100% ); } [data-mistica-skin='telefonica'][data-mistica-color-scheme='light'] { --mistica-color-background: var(--mistica-telefonica-white); --mistica-color-backgroundAlternative: var(--mistica-telefonica-grey1); --mistica-color-backgroundBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundBrandSecondary: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundContainer: var(--mistica-telefonica-white); --mistica-color-backgroundContainerError: var(--mistica-telefonica-coral10); --mistica-color-backgroundContainerHover: rgba(var(--mistica-telefonica-raw-telefonicaBlue70), 0.05); --mistica-color-backgroundContainerPressed: rgba( var(--mistica-telefonica-raw-telefonicaBlue70), 0.08 ); --mistica-color-backgroundContainerBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundContainerBrandHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.2); --mistica-color-backgroundContainerBrandPressed: rgba( var(--mistica-telefonica-raw-darkModeBlack), 0.4 ); --mistica-color-backgroundContainerBrandOverInverse: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-backgroundContainerAlternative: var(--mistica-telefonica-grey1); --mistica-color-backgroundOverlay: rgba(var(--mistica-telefonica-raw-grey6), 0.8); --mistica-color-backgroundSkeleton: var(--mistica-telefonica-grey2); --mistica-color-backgroundSkeletonInverse: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-backgroundBrandTop: var(--mistica-telefonica-telefonicaBlue); --mistica-color-backgroundBrandBottom: var(--mistica-telefonica-telefonicaBlue); --mistica-color-appBarBackground: var(--mistica-telefonica-white); --mistica-color-navigationBarBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-skeletonWave: var(--mistica-telefonica-grey2); --mistica-color-borderLow: var(--mistica-telefonica-grey1); --mistica-color-border: var(--mistica-telefonica-grey2); --mistica-color-borderHigh: var(--mistica-telefonica-grey5); --mistica-color-borderSelected: var(--mistica-telefonica-telefonicaBlue); --mistica-color-coverBackgroundHover: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.25); --mistica-color-coverBackgroundPressed: rgba(var(--mistica-telefonica-raw-darkModeBlack), 0.35); --mistica-color-buttonDangerBackground: var(--mistica-telefonica-coral); --mistica-color-buttonDangerBackgroundPressed: var(--mistica-telefonica-coral80); --mistica-color-buttonDangerBackgroundHover: var(--mistica-telefonica-coral80); --mistica-color-buttonLinkDangerBackgroundPressed: var(--mistica-telefonica-coral10); --mistica-color-buttonLinkDangerBackgroundInverse: var(--mistica-telefonica-white); --mistica-color-buttonLinkDangerBackgroundInversePressed: var(--mistica-telefonica-coral10); --mistica-color-buttonLinkBackgroundPressed: var(--mistica-telefonica-grey1); --mistica-color-buttonLinkBackgroundInversePressed: rgba(var(--mistica-telefonica-raw-white), 0.08); --mistica-color-buttonPrimaryBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-telefonica-white); --mistica-color-buttonPrimaryBackgroundPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonPrimaryBackgroundInversePressed: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-buttonSecondaryBackgroundPressed: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-buttonSecondaryBorder: var(--mistica-telefonica-telefonicaBlue); --mistica-color-buttonSecondaryBackgroundHover: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-buttonSecondaryBorderPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-buttonSecondaryBorderInverse: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBorderInversePressed: var(--mistica-telefonica-white); --mistica-color-buttonSecondaryBackgroundInverseHover: rgba(var(--mistica-telefonica-raw-white), 0.1); --mistica-color-buttonSecondaryBackgroundInversePressed: rgba( var(--mistica-telefonica-raw-white), 0.1 ); --mistica-color-textButtonPrimary: var(--mistica-telefonica-white); --mistica-color-textButtonPrimaryInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textButtonPrimaryInversePressed: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textButtonSecondary: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textButtonSecondaryPressed: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-textButtonSecondaryInverse: var(--mistica-telefonica-white); --mistica-color-textButtonSecondaryInversePressed: var(--mistica-telefonica-white); --mistica-color-textLink: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textLinkInverse: var(--mistica-telefonica-white); --mistica-color-textLinkDanger: var(--mistica-telefonica-coral); --mistica-color-textLinkSnackbar: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-textActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-textBrand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-control: var(--mistica-telefonica-grey3); --mistica-color-controlActivated: var(--mistica-telefonica-telefonicaBlue); --mistica-color-controlInverse: var(--mistica-telefonica-grey1); --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white); --mistica-color-controlError: var(--mistica-telefonica-coral); --mistica-color-barTrack: var(--mistica-telefonica-grey2); --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3); --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30); --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2); --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2); --mistica-color-iosControlKnob: var(--mistica-telefonica-white); --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-divider: var(--mistica-telefonica-grey2); --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2); --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue); --mistica-color-badge: var(--mistica-telefonica-coral70); --mistica-color-feedbackErrorBackground: var(--mistica-telefonica-coral); --mistica-color-feedbackInfoBackground: var(--mistica-telefonica-grey9); --mistica-color-brand: var(--mistica-telefonica-telefonicaBlue); --mistica-color-brandHigh: var(--mistica-telefonica-telefonicaBlue70); --mistica-color-inverse: var(--mistica-telefonica-white); --mistica-color-neutralHigh: var(--mistica-telefonica-grey9); --mistica-color-neutralMedium: var(--mistica-telefonica-grey5); --mistica-color-neutralMediumInverse: var(--mistica-telefonica-grey5); --mistica-color-neutralLow: var(--mistica-telefonica-grey1); --mistica-color-neutralLowAlternative: var(--mistica-telefonica-grey2); --mistica-color-textPrimary: var(--mistica-telefonica-grey9); --mistica-color-textPrimaryInverse: var(--mistica-telefonica-white); --mistica-color-textSecondary: var(--mistica-telefonica-grey5); --mistica-color-textSecondaryInverse: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-error: var(--mistica-telefonica-coral); --mistica-color-textError: var(--mistica-telefonica-coral); --mistica-color-textErrorInverse: var(--mistica-telefonica-white); --mistica-color-success: var(--mistica-telefonica-turquoise); --mistica-color-warning: var(--mistica-telefonica-ambar); --mistica-color-promo: var(--mistica-telefonica-orchid); --mistica-color-highlight: var(--mistica-telefonica-coral40); --mistica-color-successLow: var(--mistica-telefonica-turquoise10); --mistica-color-warningLow: var(--mistica-telefonica-ambar10); --mistica-color-errorLow: var(--mistica-telefonica-coral10); --mistica-color-promoLow: var(--mistica-telefonica-orchid10); --mistica-color-brandLow: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-successHigh: var(--mistica-telefonica-turquoise70); --mistica-color-warningHigh: var(--mistica-telefonica-ambar70); --mistica-color-errorHigh: var(--mistica-telefonica-coral70); --mistica-color-promoHigh: var(--mistica-telefonica-orchid70); --mistica-color-successHighInverse: var(--mistica-telefonica-turquoise70); --mistica-color-warningHighInverse: var(--mistica-telefonica-ambar70); --mistica-color-errorHighInverse: var(--mistica-telefonica-coral70); --mistica-color-promoHighInverse: var(--mistica-telefonica-orchid70); --mistica-color-textNavigationBarPrimary: var(--mistica-telefonica-white); --mistica-color-textNavigationBarSecondary: var(--mistica-telefonica-grey1); --mistica-color-textNavigationSearchBarHint: var(--mistica-telefonica-grey1); --mistica-color-textNavigationSearchBarText: var(--mistica-telefonica-white); --mistica-color-textAppBar: var(--mistica-telefonica-grey4); --mistica-color-textAppBarSelected: var(--mistica-telefonica-telefonicaBlue); --mistica-color-customTabsBackground: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextPromo: var(--mistica-telefonica-orchid70); --mistica-color-tagTextActive: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactive: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccess: var(--mistica-telefonica-turquoise70); --mistica-color-tagTextWarning: var(--mistica-telefonica-ambar70); --mistica-color-tagTextError: var(--mistica-telefonica-coral70); --mistica-color-tagBackgroundPromo: var(--mistica-telefonica-orchid10); --mistica-color-tagBackgroundActive: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-tagBackgroundInactive: var(--mistica-telefonica-grey1); --mistica-color-tagBackgroundSuccess: var(--mistica-telefonica-turquoise10); --mistica-color-tagBackgroundWarning: var(--mistica-telefonica-ambar10); --mistica-color-tagBackgroundError: var(--mistica-telefonica-coral10); --mistica-color-tagTextPromoInverse: var(--mistica-telefonica-orchid70); --mistica-color-tagTextActiveInverse: var(--mistica-telefonica-telefonicaBlue); --mistica-color-tagTextInactiveInverse: var(--mistica-telefonica-grey5); --mistica-color-tagTextSuccessInverse: var(--mistica-telefonica-turquoise70); --mistica-color-tagTextWarningInverse: var(--mistica-telefonica-ambar70); --mistica-color-tagTextErrorInverse: var(--mistica-telefonica-coral70); --mistica-color-tagBackgroundPromoInverse: var(--mistica-telefonica-orchid10); --mistica-color-tagBackgroundActiveInverse: var(--mistica-telefonica-telefonicaBlue10); --mistica-color-tagBackgroundInactiveInverse: var(--mistica-telefonica-grey1); --mistica-color-tagBackgroundSuccessInverse: var(--mistica-telefonica-turquoise10); --mistica-color-tagBackgroundWarningInverse: var(--mistica-telefonica-ambar10); --mistica-color-tagBackgroundErrorInverse: var(--mistica-telefonica-coral10); --mistica-color-cardContentOverlay: linear-gradient( 180deg, rgba(var(--mistica-telefonica-raw-black), 0) 0%, rgba(var(--mistica-telefonica-raw-black), 0.4) 30%, rgba(var(--mistica-telefonica-raw-black), 0.7) 100% ); } } @media (min-width: 1024px) { [data-mistica-skin='telefonica'] { /* Text */ --mistica-font-size-1: 0.875rem; --mistica-line-height-1: 1.25rem; --mistica-font-size-2: 1rem; --mistica-line-height-2: 1.5rem; --mistica-font-size-3: 1.125rem; --mistica-line-height-3: 1.5rem; --mistica-font-size-4: 1.25rem; --mistica-line-height-4: 1.75rem; --mistica-font-size-5: 1.75rem; --mistica-line-height-5: 2rem; --mistica-font-size-6: 2rem; --mistica-line-height-6: 2.5rem; --mistica-font-size-7: 2.5rem; --mistica-line-height-7: 3rem; --mistica-font-size-8: 3rem; --mistica-line-height-8: 3.5rem; --mistica-font-size-9: 3.5rem; --mistica-line-height-9: 4rem; --mistica-font-size-10: 4rem; --mistica-line-height-10: 4.5rem; --mistica-font-size-cardTitle: 1.5rem; --mistica-line-height-cardTitle: 1.75rem; --mistica-font-size-tabsLabel: 1.125rem; --mistica-line-height-tabsLabel: 1.5rem; --mistica-font-size-title3: 1.75rem; --mistica-line-height-title3: 2rem; } }