// Do not edit directly
// Generated on Fri, 22 Nov 2024 08:14:50 GMT

$group-text-shadow-normal:
  0px 0px 4px rgba(0, 0, 0, 0.15),
  0px 4px 12px rgba(0, 0, 0, 0.25),
  0px 0px 80px rgba(0, 0, 0, 0.5); // Increases readability when used on a image background.
$group-shadow-large: 0 0 30px 0 rgba(0, 7, 57, 0.15); // Large shadow are used for hover effects.
$group-shadow-normal: 0 0 10px 0 rgba(0, 7, 57, 0.15); // Default shadow size to elevate an element.
$group-shadow-small: 0px 2px 5px 1px rgba(0, 7, 57, 0.12);
$group-opacity-100: 1;
$group-opacity-80: 0.8;
$group-opacity-60: 0.6;
$group-opacity-50: 0.5;
$group-opacity-40: 0.4;
$group-opacity-30: 0.3;
$group-opacity-0: 0;
$group-font-family-text: 'UniversNextforHSBC-Regular', sans-serif;
$group-font-family-title: 'UniversNextforHSBC-Bold', sans-serif;
$group-animation-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);
$group-animation-transition-duration: 300ms;
$group-z-index-tooltip: 1300; // Default z-index for tooltips.
$group-z-index-toast: 1200; // Default z-index for toast and snackbar messages.
$group-z-index-modal: 1100; // Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.
$group-z-index-popup: 1000; // Default z-index for popups that stacks on top of all other elements.
$group-z-index-navigation: 400; // Default z-index for navigation.
$group-z-index-sticky: 300; // Default z-index for sticky interface elements.
$group-z-index-mask: 200; // Default z-index for masking interface elements.
$group-z-index-masked: 100; // Default z-index for masked interface elements.
$group-z-index: 1; // The default z-index for components and elements inside components.
$group-z-index-deep: -999999; // Deep z-index is used to stack something behind everything else.
$group-space-xx-large-desktop: 4rem;
$group-space-xx-large-tablet: 3.5rem;
$group-space-xx-large: 3rem;
$group-space-x-large-desktop: 3rem;
$group-space-x-large-tablet: 2.5rem;
$group-space-x-large: 2rem; // Space between heading and card
$group-space-large-desktop: 2rem;
$group-space-large: 1.5rem; // Space between cards
$group-space-medium-desktop: 1.5rem;
$group-space-medium: 1.25rem; // Inner padding of cards
$group-space-normal: 1rem; // Space between large headings and content.
$group-space-small: 0.75rem;
$group-space-x-small: 0.5rem; // Space between text and icons or headings and content or clickable elements
$group-space-xx-small: 0.25rem; // Minimum space between two elements
$group-radius-rounded: 9999px; // The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements.
$group-radius-large: 0.75rem; // The large radius token makes a bold visual statement by significantly rounding the corners of elements.
$group-container-size-fluid: 100%; // The container for fullscreen application with a large table for example.
$group-container-size-normal: 1496px; // The default container size is versatile and suitable for various applications and website pages.
$group-container-size-compact: 896px; // Tailored container size designed for form wizard applications or pages.
$group-breakpoint-fullhd: 1920px; // Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance.
$group-breakpoint-widescreen: 1440px; // Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts.
$group-breakpoint-high-definition: 1280px; // Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity.
$group-breakpoint-desktop: 1024px; // Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation.
$group-breakpoint-tablet: 769px; // Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens.
$group-scale-3-elevation-functional-spread: 0rem;
$group-scale-3-elevation-functional-blur: 1rem;
$group-scale-3-elevation-functional-y: 0rem;
$group-scale-3-elevation-functional-x: 0rem;
$group-scale-3-elevation-decorative-spread: 0rem;
$group-scale-3-elevation-decorative-blur: 0.5rem;
$group-scale-3-elevation-decorative-y: 0rem;
$group-scale-3-elevation-decorative-x: 0rem;
$group-scale-3-icon-large-width: 2.25rem;
$group-scale-3-icon-large-height: 2.25rem;
$group-scale-3-icon-medium-width: 1.5rem;
$group-scale-3-icon-medium-height: 1.5rem;
$group-scale-3-icon-small-width: 1.125rem;
$group-scale-3-icon-small-height: 1.125rem;
$group-scale-3-icon-xsmall-width: 0.75rem;
$group-scale-3-icon-xsmall-height: 0.75rem;
$group-scale-3-icon-arrow-font-7-height: 0.5625rem;
$group-scale-3-icon-arrow-font-7-width: 0.28125rem;
$group-scale-3-icon-arrow-font-6-height: 0.625rem;
$group-scale-3-icon-arrow-font-6-width: 0.3125rem;
$group-scale-3-icon-arrow-font-5-height: 0.75rem;
$group-scale-3-icon-arrow-font-5-width: 0.375rem;
$group-scale-3-icon-arrow-font-4-height: 0.75rem;
$group-scale-3-icon-arrow-font-4-width: 0.375rem;
$group-scale-3-icon-arrow-font-3-height: 1rem;
$group-scale-3-icon-arrow-font-3-width: 0.5rem;
$group-scale-3-icon-arrow-font-2-height: 1.375rem;
$group-scale-3-icon-arrow-font-2-width: 0.6875rem;
$group-scale-3-icon-arrow-font-1-height: 1.75rem;
$group-scale-3-icon-arrow-font-1-width: 0.875rem;
$group-scale-3-typography-letter-spacing-font-7: 0rem;
$group-scale-3-typography-letter-spacing-font-6: 0rem;
$group-scale-3-typography-letter-spacing-font-5: 0rem;
$group-scale-3-typography-letter-spacing-font-4: 0rem;
$group-scale-3-typography-letter-spacing-font-3: 0rem;
$group-scale-3-typography-letter-spacing-font-2: 0rem;
$group-scale-3-typography-letter-spacing-font-1: 0rem;
$group-scale-3-typography-paragraph-spacing-font-7: 0.5rem;
$group-scale-3-typography-paragraph-spacing-font-6: 0.625rem;
$group-scale-3-typography-paragraph-spacing-font-5: 0.75rem;
$group-scale-3-typography-paragraph-spacing-font-4: 1.0625rem;
$group-scale-3-typography-paragraph-spacing-font-3: 1.3125rem;
$group-scale-3-typography-paragraph-spacing-font-2: 1.625rem;
$group-scale-3-typography-paragraph-spacing-font-1: 2rem;
$group-scale-3-typography-line-height-font-7: 1rem;
$group-scale-3-typography-line-height-font-6: 1.25rem;
$group-scale-3-typography-line-height-font-5: 1.5rem;
$group-scale-3-typography-line-height-font-4: 2.125rem;
$group-scale-3-typography-line-height-font-3: 2.625rem;
$group-scale-3-typography-line-height-font-2: 3.25rem;
$group-scale-3-typography-line-height-font-1: 4.125rem;
$group-scale-3-typography-font-size-font-7: 0.75rem;
$group-scale-3-typography-font-size-font-6: 0.875rem;
$group-scale-3-typography-font-size-font-5: 1rem;
$group-scale-3-typography-font-size-font-4: 1.5rem;
$group-scale-3-typography-font-size-font-3: 2rem;
$group-scale-3-typography-font-size-font-2: 2.6875rem;
$group-scale-3-typography-font-size-font-1: 3.5625rem;
$group-scale-3-typography-font-weight-bold: String value;
$group-scale-3-typography-font-weight-medium: medium;
$group-scale-3-typography-font-weight-regular: regular;
$group-scale-3-typography-font-weight-light: light;
$group-scale-3-typography-font-weight-thin: thin;
$group-scale-3-typography-font-family: Univers Next for HSBC;
$group-scale-3-border-width-large: 0.25rem;
$group-scale-3-border-width-medium: 0.125rem;
$group-scale-3-border-width-small: 0.0625rem;
$group-scale-3-border-radius: 0rem;
$group-scale-3-padding-arrow-font-7-left: 0.25rem;
$group-scale-3-padding-arrow-font-7-top: 0.25rem;
$group-scale-3-padding-arrow-font-6-left: 0.3125rem;
$group-scale-3-padding-arrow-font-6-top: 0.375rem;
$group-scale-3-padding-arrow-font-5-left: 0.375rem;
$group-scale-3-padding-arrow-font-5-top: 0.4375rem;
$group-scale-3-padding-arrow-font-4-left: 0.375rem;
$group-scale-3-padding-arrow-font-4-top: 0.9375rem;
$group-scale-3-padding-arrow-font-3-left: 0.5rem;
$group-scale-3-padding-arrow-font-3-top: 1.125rem;
$group-scale-3-padding-arrow-font-2-left: 0.6875rem;
$group-scale-3-padding-arrow-font-2-top: 1.375rem;
$group-scale-3-padding-arrow-font-1-left: 0.875rem;
$group-scale-3-padding-arrow-font-1-top: 1.8125rem;
$group-scale-3-padding-fixed-xlarge: 1.5rem;
$group-scale-3-padding-fixed-large: 1.25rem;
$group-scale-3-padding-fixed-medium: 1rem;
$group-scale-3-padding-fixed-small: 0.75rem;
$group-scale-3-padding-responsive-xlarge: 2rem;
$group-scale-3-padding-responsive-large: 1.75rem;
$group-scale-3-padding-responsive-medium: 1.5rem;
$group-scale-3-padding-responsive-small: 1.25rem;
$group-scale-3-padding-responsive-xsmall: 1.1875rem;
$group-scale-3-padding-responsive-xxsmall: 1.0625rem;
$group-scale-3-padding-responsive-xxxsmall: 0.625rem;
$group-scale-3-gap-responsive-section-xlarge: 8.5rem;
$group-scale-3-gap-responsive-section-large: 7.25rem;
$group-scale-3-gap-responsive-section-medium: 6rem;
$group-scale-3-gap-responsive-section-small: 5rem;
$group-scale-3-gap-responsive-section-xsmall: 4rem;
$group-scale-3-gap-responsive-subsection-large: 4rem;
$group-scale-3-gap-responsive-subsection-medium: 3.5rem;
$group-scale-3-gap-responsive-subsection-small: 2.5rem;
$group-scale-3-gap-responsive-subsection-xsmall: 2rem;
$group-scale-3-gap-responsive-content-xxlarge: 2rem;
$group-scale-3-gap-responsive-content-xlarge: 1.75rem;
$group-scale-3-gap-responsive-content-large: 1.5rem;
$group-scale-3-gap-responsive-content-medium: 1.25rem;
$group-scale-3-gap-responsive-content-small: 1rem;
$group-scale-3-gap-responsive-content-xsmall: 0.75rem;
$group-scale-3-gap-fixed-section-xlarge: 7.5rem;
$group-scale-3-gap-fixed-section-large: 6.25rem;
$group-scale-3-gap-fixed-section-medium: 5rem;
$group-scale-3-gap-fixed-section-small: 4rem;
$group-scale-3-gap-fixed-section-xsmall: 3rem;
$group-scale-3-gap-fixed-subsection-large: 3rem;
$group-scale-3-gap-fixed-subsection-medium: 2.5rem;
$group-scale-3-gap-fixed-subsection-small: 2rem;
$group-scale-3-gap-fixed-subsection-xsmall: 1.5rem;
$group-scale-3-gap-fixed-content-medium: 0.75rem;
$group-scale-3-gap-fixed-content-small: 0.5rem;
$group-scale-3-gap-fixed-content-xsmall: 0.25rem;
$group-scale-3-gap-fixed-content-xxsmall: 0.125rem;
$group-scale-3-layout-app-columns: 0.75rem;
$group-scale-3-layout-app-gutter: 1rem;
$group-scale-3-layout-app-margin: 1rem;
$group-scale-3-layout-web-columns: 0.75rem;
$group-scale-3-layout-web-gutter: 1.5rem;
$group-scale-3-layout-web-margin: 1.5rem;
$group-scale-2-elevation-functional-spread: 0rem;
$group-scale-2-elevation-functional-blur: 1rem;
$group-scale-2-elevation-functional-y: 0rem;
$group-scale-2-elevation-functional-x: 0rem;
$group-scale-2-elevation-decorative-spread: 0rem;
$group-scale-2-elevation-decorative-blur: 0.5rem;
$group-scale-2-elevation-decorative-y: 0rem;
$group-scale-2-elevation-decorative-x: 0rem;
$group-scale-2-icon-large-width: 2.25rem;
$group-scale-2-icon-large-height: 2.25rem;
$group-scale-2-icon-medium-width: 1.5rem;
$group-scale-2-icon-medium-height: 1.5rem;
$group-scale-2-icon-small-width: 1.125rem;
$group-scale-2-icon-small-height: 1.125rem;
$group-scale-2-icon-xsmall-width: 0.75rem;
$group-scale-2-icon-xsmall-height: 0.75rem;
$group-scale-2-icon-arrow-font-7-height: 0.5625rem;
$group-scale-2-icon-arrow-font-7-width: 0.28125rem;
$group-scale-2-icon-arrow-font-6-height: 0.625rem;
$group-scale-2-icon-arrow-font-6-width: 0.3125rem;
$group-scale-2-icon-arrow-font-5-height: 0.75rem;
$group-scale-2-icon-arrow-font-5-width: 0.375rem;
$group-scale-2-icon-arrow-font-4-height: 0.6875rem;
$group-scale-2-icon-arrow-font-4-width: 0.34375rem;
$group-scale-2-icon-arrow-font-3-height: 0.875rem;
$group-scale-2-icon-arrow-font-3-width: 0.4375rem;
$group-scale-2-icon-arrow-font-2-height: 1.125rem;
$group-scale-2-icon-arrow-font-2-width: 0.5625rem;
$group-scale-2-icon-arrow-font-1-height: 1.375rem;
$group-scale-2-icon-arrow-font-1-width: 0.6875rem;
$group-scale-2-typography-letter-spacing-font-7: 0rem;
$group-scale-2-typography-letter-spacing-font-6: 0rem;
$group-scale-2-typography-letter-spacing-font-5: 0rem;
$group-scale-2-typography-letter-spacing-font-4: 0rem;
$group-scale-2-typography-letter-spacing-font-3: 0rem;
$group-scale-2-typography-letter-spacing-font-2: 0rem;
$group-scale-2-typography-letter-spacing-font-1: 0rem;
$group-scale-2-typography-paragraph-spacing-font-7: 0.5rem;
$group-scale-2-typography-paragraph-spacing-font-6: 0.625rem;
$group-scale-2-typography-paragraph-spacing-font-5: 0.75rem;
$group-scale-2-typography-paragraph-spacing-font-4: 1rem;
$group-scale-2-typography-paragraph-spacing-font-3: 1.125rem;
$group-scale-2-typography-paragraph-spacing-font-2: 1.3125rem;
$group-scale-2-typography-paragraph-spacing-font-1: 1.5625rem;
$group-scale-2-typography-line-height-font-7: 1rem;
$group-scale-2-typography-line-height-font-6: 1.25rem;
$group-scale-2-typography-line-height-font-5: 1.5rem;
$group-scale-2-typography-line-height-font-4: 1.9375rem;
$group-scale-2-typography-line-height-font-3: 2.25rem;
$group-scale-2-typography-line-height-font-2: 2.625rem;
$group-scale-2-typography-line-height-font-1: 3.125rem;
$group-scale-2-typography-font-size-font-7: 0.75rem;
$group-scale-2-typography-font-size-font-6: 0.875rem;
$group-scale-2-typography-font-size-font-5: 1rem;
$group-scale-2-typography-font-size-font-4: 1.375rem;
$group-scale-2-typography-font-size-font-3: 1.75rem;
$group-scale-2-typography-font-size-font-2: 2.1875rem;
$group-scale-2-typography-font-size-font-1: 2.75rem;
$group-scale-2-typography-font-weight-bold: bold;
$group-scale-2-typography-font-weight-medium: medium;
$group-scale-2-typography-font-weight-regular: regular;
$group-scale-2-typography-font-weight-light: light;
$group-scale-2-typography-font-weight-thin: thin;
$group-scale-2-typography-font-family: Univers Next for HSBC;
$group-scale-2-border-width-large: 0.25rem;
$group-scale-2-border-width-medium: 0.125rem;
$group-scale-2-border-width-small: 0.0625rem;
$group-scale-2-border-radius: 0rem;
$group-scale-2-padding-arrow-font-7-left: 0.25rem;
$group-scale-2-padding-arrow-font-7-top: 0.25rem;
$group-scale-2-padding-arrow-font-6-left: 0.3125rem;
$group-scale-2-padding-arrow-font-6-top: 0.375rem;
$group-scale-2-padding-arrow-font-5-left: 0.375rem;
$group-scale-2-padding-arrow-font-5-top: 0.4375rem;
$group-scale-2-padding-arrow-font-4-left: 0.3125rem;
$group-scale-2-padding-arrow-font-4-top: 0.875rem;
$group-scale-2-padding-arrow-font-3-left: 0.4375rem;
$group-scale-2-padding-arrow-font-3-top: 1rem;
$group-scale-2-padding-arrow-font-2-left: 0.5625rem;
$group-scale-2-padding-arrow-font-2-top: 1.125rem;
$group-scale-2-padding-arrow-font-1-left: 0.6875rem;
$group-scale-2-padding-arrow-font-1-top: 1.3125rem;
$group-scale-2-padding-fixed-xlarge: 1.5rem;
$group-scale-2-padding-fixed-large: 1.25rem;
$group-scale-2-padding-fixed-medium: 1rem;
$group-scale-2-padding-fixed-small: 0.75rem;
$group-scale-2-padding-responsive-xlarge: 1.75rem;
$group-scale-2-padding-responsive-large: 1.5rem;
$group-scale-2-padding-responsive-medium: 1.25rem;
$group-scale-2-padding-responsive-small: 1rem;
$group-scale-2-padding-responsive-xsmall: 0.9375rem;
$group-scale-2-padding-responsive-xxsmall: 0.8125rem;
$group-scale-2-padding-responsive-xxxsmall: 0.5rem;
$group-scale-2-gap-responsive-section-xlarge: 8rem;
$group-scale-2-gap-responsive-section-large: 6.75rem;
$group-scale-2-gap-responsive-section-medium: 5.5rem;
$group-scale-2-gap-responsive-section-small: 4.5rem;
$group-scale-2-gap-responsive-section-xsmall: 3.5rem;
$group-scale-2-gap-responsive-subsection-large: 3.5rem;
$group-scale-2-gap-responsive-subsection-medium: 3rem;
$group-scale-2-gap-responsive-subsection-small: 2.25rem;
$group-scale-2-gap-responsive-subsection-xsmall: 1.75rem;
$group-scale-2-gap-responsive-content-xxlarge: 1.75rem;
$group-scale-2-gap-responsive-content-xlarge: 1.5rem;
$group-scale-2-gap-responsive-content-large: 1.25rem;
$group-scale-2-gap-responsive-content-medium: 1rem;
$group-scale-2-gap-responsive-content-small: 0.75rem;
$group-scale-2-gap-responsive-content-xsmall: 0.5rem;
$group-scale-2-gap-fixed-section-xlarge: 7.5rem;
$group-scale-2-gap-fixed-section-large: 6.25rem;
$group-scale-2-gap-fixed-section-medium: 5rem;
$group-scale-2-gap-fixed-section-small: 4rem;
$group-scale-2-gap-fixed-section-xsmall: 3rem;
$group-scale-2-gap-fixed-subsection-large: 3rem;
$group-scale-2-gap-fixed-subsection-medium: 2.5rem;
$group-scale-2-gap-fixed-subsection-small: 2rem;
$group-scale-2-gap-fixed-subsection-xsmall: 1.5rem;
$group-scale-2-gap-fixed-content-medium: 0.75rem;
$group-scale-2-gap-fixed-content-small: 0.5rem;
$group-scale-2-gap-fixed-content-xsmall: 0.25rem;
$group-scale-2-gap-fixed-content-xxsmall: 0.125rem;
$group-scale-2-layout-app-columns: 0.75rem;
$group-scale-2-layout-app-gutter: 1rem;
$group-scale-2-layout-app-margin: 1rem;
$group-scale-2-layout-web-columns: 0.75rem;
$group-scale-2-layout-web-gutter: 1.25rem;
$group-scale-2-layout-web-margin: 1.25rem;
$group-scale-1-elevation-functional-spread: 0rem;
$group-scale-1-elevation-functional-blur: 1rem;
$group-scale-1-elevation-functional-y: 0rem;
$group-scale-1-elevation-functional-x: 0rem;
$group-scale-1-elevation-decorative-spread: 0rem;
$group-scale-1-elevation-decorative-blur: 0.5rem;
$group-scale-1-elevation-decorative-y: 0rem;
$group-scale-1-elevation-decorative-x: 0rem;
$group-scale-1-icon-large-width: 2.25rem;
$group-scale-1-icon-large-height: 2.25rem;
$group-scale-1-icon-medium-width: 1.5rem;
$group-scale-1-icon-medium-height: 1.5rem;
$group-scale-1-icon-small-width: 1.125rem;
$group-scale-1-icon-small-height: 1.125rem;
$group-scale-1-icon-xsmall-width: 0.75rem;
$group-scale-1-icon-xsmall-height: 0.75rem;
$group-scale-1-icon-arrow-font-7-height: 0.5625rem;
$group-scale-1-icon-arrow-font-7-width: 0.28125rem;
$group-scale-1-icon-arrow-font-6-height: 0.625rem;
$group-scale-1-icon-arrow-font-6-width: 0.3125rem;
$group-scale-1-icon-arrow-font-5-height: 0.75rem;
$group-scale-1-icon-arrow-font-5-width: 0.375rem;
$group-scale-1-icon-arrow-font-4-height: 0.625rem;
$group-scale-1-icon-arrow-font-4-width: 0.3125rem;
$group-scale-1-icon-arrow-font-3-height: 0.75rem;
$group-scale-1-icon-arrow-font-3-width: 0.375rem;
$group-scale-1-icon-arrow-font-2-height: 0.875rem;
$group-scale-1-icon-arrow-font-2-width: 0.4375rem;
$group-scale-1-icon-arrow-font-1-height: 1.0625rem;
$group-scale-1-icon-arrow-font-1-width: 0.53125rem;
$group-scale-1-typography-letter-spacing-font-7: 0rem;
$group-scale-1-typography-letter-spacing-font-6: 0rem;
$group-scale-1-typography-letter-spacing-font-5: 0rem;
$group-scale-1-typography-letter-spacing-font-4: 0rem;
$group-scale-1-typography-letter-spacing-font-3: 0rem;
$group-scale-1-typography-letter-spacing-font-2: 0rem;
$group-scale-1-typography-letter-spacing-font-1: 0rem;
$group-scale-1-typography-paragraph-spacing-font-7: 0.5rem;
$group-scale-1-typography-paragraph-spacing-font-6: 0.625rem;
$group-scale-1-typography-paragraph-spacing-font-5: 0.75rem;
$group-scale-1-typography-paragraph-spacing-font-4: 0.875rem;
$group-scale-1-typography-paragraph-spacing-font-3: 0.9375rem;
$group-scale-1-typography-paragraph-spacing-font-2: 1.125rem;
$group-scale-1-typography-paragraph-spacing-font-1: 1.25rem;
$group-scale-1-typography-line-height-font-7: 1rem;
$group-scale-1-typography-line-height-font-6: 1.25rem;
$group-scale-1-typography-line-height-font-5: 1.5rem;
$group-scale-1-typography-line-height-font-4: 1.6875rem;
$group-scale-1-typography-line-height-font-3: 1.875rem;
$group-scale-1-typography-line-height-font-2: 2.25rem;
$group-scale-1-typography-line-height-font-1: 2.5rem;
$group-scale-1-typography-font-size-font-7: 0.75rem;
$group-scale-1-typography-font-size-font-6: 0.875rem;
$group-scale-1-typography-font-size-font-5: 1rem;
$group-scale-1-typography-font-size-font-4: 1.1875rem;
$group-scale-1-typography-font-size-font-3: 1.4375rem;
$group-scale-1-typography-font-size-font-2: 1.75rem;
$group-scale-1-typography-font-size-font-1: 2.0625rem;
$group-scale-1-typography-font-weight-bold: bold;
$group-scale-1-typography-font-weight-medium: medium;
$group-scale-1-typography-font-weight-regular: regular;
$group-scale-1-typography-font-weight-light: light;
$group-scale-1-typography-font-weight-thin: thin;
$group-scale-1-typography-font-family: Univers Next for HSBC;
$group-scale-1-border-width-large: 0.25rem;
$group-scale-1-border-width-medium: 0.125rem;
$group-scale-1-border-width-small: 0.0625rem;
$group-scale-1-border-radius: 0rem;
$group-scale-1-padding-arrow-font-7-left: 0.25rem;
$group-scale-1-padding-arrow-font-7-top: 0.25rem;
$group-scale-1-padding-arrow-font-6-left: 0.3125rem;
$group-scale-1-padding-arrow-font-6-top: 0.375rem;
$group-scale-1-padding-arrow-font-5-left: 0.375rem;
$group-scale-1-padding-arrow-font-5-top: 0.4375rem;
$group-scale-1-padding-arrow-font-4-left: 0.3125rem;
$group-scale-1-padding-arrow-font-4-top: 0.6875rem;
$group-scale-1-padding-arrow-font-3-left: 0.375rem;
$group-scale-1-padding-arrow-font-3-top: 0.8125rem;
$group-scale-1-padding-arrow-font-2-left: 0.4375rem;
$group-scale-1-padding-arrow-font-2-top: 1rem;
$group-scale-1-padding-arrow-font-1-left: 0.5rem;
$group-scale-1-padding-arrow-font-1-top: 1.0625rem;
$group-scale-1-padding-fixed-xlarge: 1.5rem;
$group-scale-1-padding-fixed-large: 1.25rem;
$group-scale-1-padding-fixed-medium: 1rem;
$group-scale-1-padding-fixed-small: 0.75rem;
$group-scale-1-padding-responsive-xlarge: 1.5rem;
$group-scale-1-padding-responsive-large: 1.25rem;
$group-scale-1-padding-responsive-medium: 1rem;
$group-scale-1-padding-responsive-small: 0.75rem;
$group-scale-1-padding-responsive-xsmall: 0.6875rem;
$group-scale-1-padding-responsive-xxsmall: 0.5625rem;
$group-scale-1-padding-responsive-xxxsmall: 0.375rem;
$group-scale-1-gap-responsive-section-xlarge: 7.5rem;
$group-scale-1-gap-responsive-section-large: 6.25rem;
$group-scale-1-gap-responsive-section-medium: 5rem;
$group-scale-1-gap-responsive-section-small: 4rem;
$group-scale-1-gap-responsive-section-xsmall: 3rem;
$group-scale-1-gap-responsive-subsection-large: 3rem;
$group-scale-1-gap-responsive-subsection-medium: 2.5rem;
$group-scale-1-gap-responsive-subsection-small: 2rem;
$group-scale-1-gap-responsive-subsection-xsmall: 1.5rem;
$group-scale-1-gap-responsive-content-xxlarge: 1.5rem;
$group-scale-1-gap-responsive-content-xlarge: 1.25rem;
$group-scale-1-gap-responsive-content-large: 1rem;
$group-scale-1-gap-responsive-content-medium: 0.75rem;
$group-scale-1-gap-responsive-content-small: 0.5rem;
$group-scale-1-gap-responsive-content-xsmall: 0.25rem;
$group-scale-1-gap-fixed-section-xlarge: 7.5rem;
$group-scale-1-gap-fixed-section-large: 6.25rem;
$group-scale-1-gap-fixed-section-medium: 5rem;
$group-scale-1-gap-fixed-section-small: 4rem;
$group-scale-1-gap-fixed-section-xsmall: 3rem;
$group-scale-1-gap-fixed-subsection-large: 3rem;
$group-scale-1-gap-fixed-subsection-medium: 2.5rem;
$group-scale-1-gap-fixed-subsection-small: 2rem;
$group-scale-1-gap-fixed-subsection-xsmall: 1.5rem;
$group-scale-1-gap-fixed-content-medium: 0.75rem;
$group-scale-1-gap-fixed-content-small: 0.5rem;
$group-scale-1-gap-fixed-content-xsmall: 0.25rem;
$group-scale-1-gap-fixed-content-xxsmall: 0.125rem;
$group-scale-1-layout-app-columns: 0.75rem;
$group-scale-1-layout-app-gutter: 1rem;
$group-scale-1-layout-app-margin: 1rem;
$group-scale-1-layout-web-columns: 0.75rem;
$group-scale-1-layout-web-gutter: 1rem;
$group-scale-1-layout-web-margin: 1rem;
$group-light-elevation-border: #ffffff00;
$group-light-elevation-functional: #00000033;
$group-light-elevation-decorative: #00000033;
$group-light-image-opacity-disabled: 20;
$group-light-image-opacity: 100;
$group-light-overlay-on-light-version2: #000000d9;
$group-light-overlay-on-light-version1: #00000080;
$group-hsbc-colour-rag-dark-blue-tint: #000d1b;
$group-hsbc-colour-rag-dark-green-tint: #001615;
$group-hsbc-colour-rag-dark-amber-tint: #221701;
$group-hsbc-colour-rag-dark-red-tint: #260005;
$group-hsbc-colour-rag-blue-tint: #ebeff4;
$group-hsbc-colour-rag-blue: #305a85;
$group-hsbc-colour-rag-green-tint: #e5f2f2;
$group-hsbc-colour-rag-green: #00847f;
$group-hsbc-colour-rag-amber-tint: #fff8ea;
$group-hsbc-colour-rag-amber: #ffbb33;
$group-hsbc-colour-rag-red-tint: #f9f2f3;
$group-hsbc-colour-rag-red: #a8000b;
$group-hsbc-colour-data-vis-green-4: #74a157;
$group-hsbc-colour-data-vis-green-3: #4da90f;
$group-hsbc-colour-data-vis-green-2: #518827;
$group-hsbc-colour-data-vis-green-1: #356512;
$group-hsbc-colour-data-vis-orange-4: #ec7046;
$group-hsbc-colour-data-vis-orange-3: #ed500d;
$group-hsbc-colour-data-vis-orange-2: #c64d24;
$group-hsbc-colour-data-vis-orange-1: #9b4822;
$group-hsbc-colour-data-vis-pink-4: #e76e84;
$group-hsbc-colour-data-vis-pink-3: #f14e73;
$group-hsbc-colour-data-vis-pink-2: #c03954;
$group-hsbc-colour-data-vis-pink-1: #933d4f;
$group-hsbc-colour-data-vis-purple-4: #b184c7;
$group-hsbc-colour-data-vis-purple-3: #a752cf;
$group-hsbc-colour-data-vis-purple-2: #8738ab;
$group-hsbc-colour-data-vis-purple-1: #7c4386;
$group-hsbc-colour-data-vis-blue-4: #509ebc;
$group-hsbc-colour-data-vis-blue-3: #1494c6;
$group-hsbc-colour-data-vis-blue-2: #347893;
$group-hsbc-colour-data-vis-blue-1: #266076;
$group-hsbc-colour-illustration-complimentary-cream-8: #5a493b;
$group-hsbc-colour-illustration-complimentary-cream-7: #725d4b;
$group-hsbc-colour-illustration-complimentary-cream-6: #987b64;
$group-hsbc-colour-illustration-complimentary-cream-5: #b59377;
$group-hsbc-colour-illustration-complimentary-cream-4: #f8dbbb;
$group-hsbc-colour-illustration-complimentary-cream-3: #fee8cf;
$group-hsbc-colour-illustration-complimentary-cream-2: #fef0e0;
$group-hsbc-colour-illustration-complimentary-cream-1: #fff7ee;
$group-hsbc-colour-illustration-complimentary-tan-8: #523821;
$group-hsbc-colour-illustration-complimentary-tan-7: #6d4a2a;
$group-hsbc-colour-illustration-complimentary-tan-6: #956539;
$group-hsbc-colour-illustration-complimentary-tan-5: #ae7d54;
$group-hsbc-colour-illustration-complimentary-tan-4: #edb97f;
$group-hsbc-colour-illustration-complimentary-tan-3: #f1cca5;
$group-hsbc-colour-illustration-complimentary-tan-2: #f5dbc0;
$group-hsbc-colour-illustration-complimentary-tan-1: #f8e5d2;
$group-hsbc-colour-illustration-complimentary-mid-brown-8: #43290e;
$group-hsbc-colour-illustration-complimentary-mid-brown-7: #5d3811;
$group-hsbc-colour-illustration-complimentary-mid-brown-6: #794817;
$group-hsbc-colour-illustration-complimentary-mid-brown-5: #915d31;
$group-hsbc-colour-illustration-complimentary-mid-brown-4: #bc8145;
$group-hsbc-colour-illustration-complimentary-mid-brown-3: #cfa67c;
$group-hsbc-colour-illustration-complimentary-mid-brown-2: #ddc1a3;
$group-hsbc-colour-illustration-complimentary-mid-brown-1: #e7d2bd;
$group-hsbc-colour-illustration-complimentary-brown-8: #28170f;
$group-hsbc-colour-illustration-complimentary-brown-7: #462918;
$group-hsbc-colour-illustration-complimentary-brown-6: #5e3620;
$group-hsbc-colour-illustration-complimentary-brown-5: #724732;
$group-hsbc-colour-illustration-complimentary-brown-4: #885c46;
$group-hsbc-colour-illustration-complimentary-brown-3: #aa8c7d;
$group-hsbc-colour-illustration-complimentary-brown-2: #c3aea4;
$group-hsbc-colour-illustration-complimentary-brown-1: #d4c5be;
$group-hsbc-colour-illustration-orange-8: #461700;
$group-hsbc-colour-illustration-orange-7: #6e2e11;
$group-hsbc-colour-illustration-orange-6: #954017;
$group-hsbc-colour-illustration-orange-5: #be511d;
$group-hsbc-colour-illustration-orange-4: #e8804c;
$group-hsbc-colour-illustration-orange-3: #fbad8d;
$group-hsbc-colour-illustration-orange-2: #f7d5c4;
$group-hsbc-colour-illustration-orange-1: #fcede5;
$group-hsbc-colour-illustration-yellow-8: #4a3800;
$group-hsbc-colour-illustration-yellow-7: #7f5f00;
$group-hsbc-colour-illustration-yellow-6: #a87c00;
$group-hsbc-colour-illustration-yellow-5: #d1a033;
$group-hsbc-colour-illustration-yellow-4: #fdc530;
$group-hsbc-colour-illustration-yellow-3: #ffdd82;
$group-hsbc-colour-illustration-yellow-2: #ffe8ab;
$group-hsbc-colour-illustration-yellow-1: #fff4d7;
$group-hsbc-colour-illustration-pink-8: #3f2f34;
$group-hsbc-colour-illustration-pink-7: #8f6470;
$group-hsbc-colour-illustration-pink-6: #b67e8f;
$group-hsbc-colour-illustration-pink-5: #d199a9;
$group-hsbc-colour-illustration-pink-4: #f8bfce;
$group-hsbc-colour-illustration-pink-3: #fad8e1;
$group-hsbc-colour-illustration-pink-2: #fbe4ea;
$group-hsbc-colour-illustration-pink-1: #fdf1f4;
$group-hsbc-colour-illustration-green-8: #0b3322;
$group-hsbc-colour-illustration-green-7: #114f35;
$group-hsbc-colour-illustration-green-6: #176a47;
$group-hsbc-colour-illustration-green-5: #1c7f55;
$group-hsbc-colour-illustration-green-4: #28b67a;
$group-hsbc-colour-illustration-green-3: #7ed3af;
$group-hsbc-colour-illustration-green-2: #bee9d7;
$group-hsbc-colour-illustration-green-1: #e5f6ef;
$group-hsbc-colour-illustration-blue-8: #152932;
$group-hsbc-colour-illustration-blue-7: #264a5c;
$group-hsbc-colour-illustration-blue-6: #366982;
$group-hsbc-colour-illustration-blue-5: #4587a7;
$group-hsbc-colour-illustration-blue-4: #63c2ef;
$group-hsbc-colour-illustration-blue-3: #a1daf6;
$group-hsbc-colour-illustration-blue-2: #c7e9fa;
$group-hsbc-colour-illustration-blue-1: #e8f6fd;
$group-hsbc-colour-neutral-dark-new-grey: #5e5e5e;
$group-hsbc-colour-neutral-dark-grey-8: #101010;
$group-hsbc-colour-neutral-dark-grey-7: #1d1d1d;
$group-hsbc-colour-neutral-dark-grey-6: #212121;
$group-hsbc-colour-neutral-black: #000000;
$group-hsbc-colour-neutral-grey-5: #333333;
$group-hsbc-colour-neutral-grey-4: #767676;
$group-hsbc-colour-neutral-grey-3: #d7d8d6;
$group-hsbc-colour-neutral-grey-2: #ededed;
$group-hsbc-colour-neutral-grey-1: #f3f3f3;
$group-hsbc-colour-neutral-white: #ffffff;
$group-hsbc-colour-complimentary-red-3: #730014;
$group-hsbc-colour-complimentary-red-2: #ba1110;
$group-hsbc-colour-complimentary-red-1: #e31e22;
$group-hsbc-colour-core-white: #ffffff;
$group-hsbc-colour-core-black: #000000;
$group-hsbc-colour-core-hsbc-red: #db0011;
$group-dark-elevation-functional: #00000033;
$group-dark-elevation-decorative: #00000000;
$group-dark-image-opacity-disabled: 20;
$group-dark-image-opacity: 100;
$group-dark-overlay-on-light-version2: #000000d9;
$group-dark-overlay-on-light-version1: #00000080;
$group-line-height-size-7-desktop: $group-scale-3-typography-line-height-font-7;
$group-line-height-size-7-tablet: $group-scale-2-typography-line-height-font-7;
$group-line-height-size-7: $group-scale-1-typography-line-height-font-7; // Should only be used for helper texts or validation messages of a form control.
$group-line-height-size-6-desktop: $group-scale-3-typography-line-height-font-6;
$group-line-height-size-6-tablet: $group-scale-2-typography-line-height-font-6;
$group-line-height-size-6: $group-scale-1-typography-line-height-font-6; // Should only be used for label texts.
$group-line-height-size-5-desktop: $group-scale-3-typography-line-height-font-5;
$group-line-height-size-5-tablet: $group-scale-2-typography-line-height-font-5;
$group-line-height-size-5: $group-scale-1-typography-line-height-font-5; // Should only be used for label texts.
$group-line-height-size-4-desktop: $group-scale-3-typography-line-height-font-4;
$group-line-height-size-4-tablet: $group-scale-2-typography-line-height-font-4;
$group-line-height-size-4: $group-scale-1-typography-line-height-font-4; // Should only be used in a 2/3 grid column to improve readability.
$group-line-height-size-3-desktop: $group-scale-3-typography-line-height-font-3;
$group-line-height-size-3-tablet: $group-scale-2-typography-line-height-font-3;
$group-line-height-size-3: $group-scale-1-typography-line-height-font-3; // Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading.
$group-line-height-size-2-desktop: $group-scale-3-typography-line-height-font-2;
$group-line-height-size-2-tablet: $group-scale-2-typography-line-height-font-2;
$group-line-height-size-2: $group-scale-1-typography-line-height-font-2; // Should only be used for form titles, quick link navigation's and headings of level 3.
$group-line-height-size-1-desktop: $group-scale-3-typography-line-height-font-1;
$group-line-height-size-1-tablet: $group-scale-2-typography-line-height-font-1;
$group-line-height-size-1: $group-scale-1-typography-line-height-font-1; // Should only be used for content titles and headings of level 2.
$group-text-size-7-desktop: $group-scale-3-typography-font-size-font-7;
$group-text-size-7-tablet: $group-scale-2-typography-font-size-font-7;
$group-text-size-7: $group-scale-1-typography-font-size-font-7; // Should only be used for helper texts or validation messages of a form control.
$group-text-size-6-desktop: $group-scale-3-typography-font-size-font-6;
$group-text-size-6-tablet: $group-scale-2-typography-font-size-font-6;
$group-text-size-6: $group-scale-1-typography-font-size-font-6; // Should only be used for label texts.
$group-text-size-5-desktop: $group-scale-3-typography-font-size-font-5;
$group-text-size-5-tablet: $group-scale-2-typography-font-size-font-5;
$group-text-size-5: $group-scale-1-typography-font-size-font-5; // Should only be used for label texts.
$group-text-size-4-desktop: $group-scale-3-typography-font-size-font-4;
$group-text-size-4-tablet: $group-scale-2-typography-font-size-font-4;
$group-text-size-4: $group-scale-1-typography-font-size-font-4; // Should only be used in a 2/3 grid column to improve readability.
$group-text-size-3-desktop: $group-scale-3-typography-font-size-font-3;
$group-text-size-3-tablet: $group-scale-2-typography-font-size-font-3;
$group-text-size-3: $group-scale-1-typography-font-size-font-3; // Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading.
$group-text-size-2-desktop: $group-scale-3-typography-font-size-font-2;
$group-text-size-2-tablet: $group-scale-2-typography-font-size-font-2;
$group-text-size-2: $group-scale-1-typography-font-size-font-2; // Should only be used for form titles, quick link navigation's and headings of level 3.
$group-text-size-1-desktop: $group-scale-3-typography-font-size-font-1;
$group-text-size-1-tablet: $group-scale-2-typography-font-size-font-1;
$group-text-size-1: $group-scale-1-typography-font-size-font-1; // Should only be used for content titles and headings of level 2.
$group-font-weight-thin: $group-scale-1-typography-font-weight-thin; // Default width of paragraphs. Only available with the font Univers Next for HSBC.
$group-font-weight-light: $group-scale-1-typography-font-weight-light; // Can be used for secondary headings. Only available with the font Univers Next for HSBC.
$group-font-weight-medium: $group-scale-1-typography-font-weight-medium; // Can be used for secondary headings. Only available with the font Univers Next for HSBC.
$group-font-weight-regular: $group-scale-1-typography-font-weight-regular; // Default width of paragraphs. Only available with the font Univers.
$group-font-weight-bold: $group-scale-1-typography-font-weight-bold; // Bold is used for headings, links and buttons.
$group-space-large-tablet: $group-space-large;
$group-space-medium-tablet: $group-space-medium;
$group-space-normal-desktop: $group-space-normal;
$group-space-normal-tablet: $group-space-normal;
$group-space-small-desktop: $group-space-small;
$group-space-small-tablet: $group-space-small;
$group-space-x-small-desktop: $group-space-x-small;
$group-space-x-small-tablet: $group-space-x-small;
$group-space-xx-small-desktop: $group-space-xx-small;
$group-space-xx-small-tablet: $group-space-xx-small;
$group-radius-normal: $group-scale-1-border-radius; // The normal radius token strikes a balance between softness and structure.
$group-column-gap: $group-space-normal;
$group-container-space-desktop: $group-space-x-large-desktop; // Default space on desktops of a container to left and right side.
$group-container-space-tablet: $group-space-x-large-tablet; // Default space on tablets of a container to left and right side.
$group-container-space: $group-space-normal; // Default space of a container to left and right side.
$group-border-large-desktop: $group-scale-3-border-width-large; // The large border size is a bold choice for creating strong visual separation between elements, such as modals or panels.
$group-border-large-tablet: $group-scale-2-border-width-large; // The large border size is a bold choice for creating strong visual separation between elements, such as modals or panels.
$group-border-large: $group-scale-1-border-width-large; // The large border size is a bold choice for creating strong visual separation between elements, such as modals or panels.
$group-border-medium-desktop: $group-scale-3-border-width-medium; // The medium border size is a versatile choice for creating visual separation between elements, such as cards or sections.
$group-border-medium-tablet: $group-scale-2-border-width-medium; // The medium border size is a versatile choice for creating visual separation between elements, such as cards or sections.
$group-border-medium: $group-scale-1-border-width-medium; // The medium border size is a versatile choice for creating visual separation between elements, such as cards or sections.
$group-border-small-desktop: $group-scale-3-border-width-small; // The small border size is ideal for creating subtle divisions between elements, such as form fields or buttons.
$group-border-small-tablet: $group-scale-2-border-width-small; // The small border size is ideal for creating subtle divisions between elements, such as form fields or buttons.
$group-border-small: $group-scale-1-border-width-small; // The small border size is ideal for creating subtle divisions between elements, such as form fields or buttons.
$group-light-rag-border-information: $group-hsbc-colour-rag-blue;
$group-light-rag-border-success: $group-hsbc-colour-rag-green;
$group-light-rag-border-warning: $group-hsbc-colour-rag-amber;
$group-light-rag-border-error: $group-hsbc-colour-rag-red;
$group-light-rag-surface-information-default2: $group-hsbc-colour-rag-blue-tint;
$group-light-rag-surface-information-default-1: $group-hsbc-colour-rag-blue;
$group-light-rag-surface-success-default2: $group-hsbc-colour-rag-green-tint;
$group-light-rag-surface-success-default-1: $group-hsbc-colour-rag-green;
$group-light-rag-surface-warning-default2: $group-hsbc-colour-rag-amber-tint;
$group-light-rag-surface-warning-default-1: $group-hsbc-colour-rag-amber;
$group-light-rag-surface-error-default2: $group-hsbc-colour-rag-red-tint;
$group-light-rag-surface-error-default-1: $group-hsbc-colour-rag-red;
$group-light-rag-icon-information-icon: $group-hsbc-colour-neutral-white;
$group-light-rag-icon-information-container: $group-hsbc-colour-rag-blue;
$group-light-rag-icon-success-icon: $group-hsbc-colour-neutral-white;
$group-light-rag-icon-success-container: $group-hsbc-colour-rag-green;
$group-light-rag-icon-warning-icon: $group-hsbc-colour-neutral-grey-5;
$group-light-rag-icon-warning-container: $group-hsbc-colour-rag-amber;
$group-light-rag-icon-error-icon: $group-hsbc-colour-neutral-white;
$group-light-rag-icon-error-container: $group-hsbc-colour-rag-red;
$group-light-rag-text-on-dark: $group-hsbc-colour-neutral-white;
$group-light-rag-text-on-light: $group-hsbc-colour-neutral-grey-5;
$group-light-data-vis-border-on-dark-indicator: $group-hsbc-colour-neutral-white;
$group-light-data-vis-border-on-dark-gridline: $group-hsbc-colour-neutral-grey-5;
$group-light-data-vis-border-on-dark-baseline-2: $group-hsbc-colour-neutral-grey-5;
$group-light-data-vis-border-on-dark-baseline-1: $group-hsbc-colour-neutral-white;
$group-light-data-vis-border-on-light-indicator: $group-hsbc-colour-neutral-grey-5;
$group-light-data-vis-border-on-light-gridline: $group-hsbc-colour-neutral-grey-2;
$group-light-data-vis-border-on-light-baseline-2: $group-hsbc-colour-neutral-grey-2;
$group-light-data-vis-border-on-light-baseline-1: $group-hsbc-colour-neutral-grey-5;
$group-light-data-vis-surface-secondary: $group-hsbc-colour-neutral-black;
$group-light-data-vis-surface-primary: $group-hsbc-colour-neutral-white;
$group-light-data-vis-data-chart-green-4: $group-hsbc-colour-data-vis-green-4;
$group-light-data-vis-data-chart-green-3: $group-hsbc-colour-data-vis-green-3;
$group-light-data-vis-data-chart-green-2: $group-hsbc-colour-data-vis-green-2;
$group-light-data-vis-data-chart-green-1: $group-hsbc-colour-data-vis-green-1;
$group-light-data-vis-data-chart-orange-4: $group-hsbc-colour-data-vis-orange-4;
$group-light-data-vis-data-chart-orange-3: $group-hsbc-colour-data-vis-orange-3;
$group-light-data-vis-data-chart-orange-2: $group-hsbc-colour-data-vis-orange-2;
$group-light-data-vis-data-chart-orange-1: $group-hsbc-colour-data-vis-orange-1;
$group-light-data-vis-data-chart-pink-4: $group-hsbc-colour-data-vis-pink-4;
$group-light-data-vis-data-chart-pink-3: $group-hsbc-colour-data-vis-pink-3;
$group-light-data-vis-data-chart-pink-2: $group-hsbc-colour-data-vis-pink-2;
$group-light-data-vis-data-chart-pink-1: $group-hsbc-colour-data-vis-pink-1;
$group-light-data-vis-data-chart-purple-4: $group-hsbc-colour-data-vis-purple-4;
$group-light-data-vis-data-chart-purple-3: $group-hsbc-colour-data-vis-purple-3;
$group-light-data-vis-data-chart-purple-2: $group-hsbc-colour-data-vis-purple-2;
$group-light-data-vis-data-chart-purple-1: $group-hsbc-colour-data-vis-purple-1;
$group-light-data-vis-data-chart-blue-4: $group-hsbc-colour-data-vis-blue-4;
$group-light-data-vis-data-chart-blue-3: $group-hsbc-colour-data-vis-blue-3;
$group-light-data-vis-data-chart-blue-2: $group-hsbc-colour-data-vis-blue-2;
$group-light-data-vis-data-chart-blue-1: $group-hsbc-colour-data-vis-blue-1;
$group-light-interactive-on-dark-border-brand-1-processing: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-1-disabled: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-border-brand-1-pressed: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-1-hover: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-1: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-2-processing: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-2-disabled: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-border-brand-2-pressed: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-2-hover: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-brand-2: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-active-pressed: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-active-hover: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-active: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-border-high-contrast-disabled: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-border-high-contrast-pressed: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-dark-border-high-contrast-hover: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-dark-border-high-contrast: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-dark-border-low-contrast-disabled: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-border-low-contrast-pressed: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-border-low-contrast-hover: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-border-low-contrast: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-surface-brand-2-processing: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-surface-brand-2-disabled: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-surface-brand-2-pressed: $group-hsbc-colour-neutral-grey-2;
$group-light-interactive-on-dark-surface-brand-2-hover: $group-hsbc-colour-neutral-grey-1;
$group-light-interactive-on-dark-surface-brand-2: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-surface-brand-1-processing: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-dark-surface-brand-1-disabled: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-surface-brand-1-pressed: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-surface-brand-1-hover: $group-hsbc-colour-complimentary-red-2;
$group-light-interactive-on-dark-surface-brand-1: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-dark-surface-active-pressed: $group-hsbc-colour-neutral-grey-2;
$group-light-interactive-on-dark-surface-active-hover: $group-hsbc-colour-neutral-grey-1;
$group-light-interactive-on-dark-surface-active: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-dark-surface-primary-disabled: $group-hsbc-colour-neutral-grey-5;
$group-light-interactive-on-dark-surface-primary-pressed: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-dark-surface-primary-hover: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-dark-surface-primary: $group-hsbc-colour-neutral-grey-5;
$group-light-interactive-on-light-border-brand-2-processing: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-brand-2-disabled: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-border-brand-2-pressed: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-brand-2-hover: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-brand-2: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-brand-1-pressed: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-light-border-brand-1-hover: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-light-border-brand-1: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-light-border-active-pressed: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-active-hover: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-active: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-border-high-contrast-disabled: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-border-high-contrast-pressed: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-light-border-high-contrast-hover: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-light-border-high-contrast: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-light-border-low-contrast-disabled: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-border-low-contrast-pressed: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-border-low-contrast-hover: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-border-low-contrast: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-surface-brand-2-processing: $group-hsbc-colour-core-black;
$group-light-interactive-on-light-surface-brand-2-disabled: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-surface-brand-2-pressed: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-light-surface-brand-2-hover: $group-hsbc-colour-neutral-grey-5;
$group-light-interactive-on-light-surface-brand-2: $group-hsbc-colour-core-black;
$group-light-interactive-on-light-surface-brand-1-processing: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-light-surface-brand-1-disabled: $group-hsbc-colour-neutral-grey-3;
$group-light-interactive-on-light-surface-brand-1-pressed: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-surface-brand-1-hover: $group-hsbc-colour-complimentary-red-2;
$group-light-interactive-on-light-surface-brand-1: $group-hsbc-colour-core-hsbc-red;
$group-light-interactive-on-light-surface-active-pressed: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-light-surface-active-hover: $group-hsbc-colour-neutral-grey-5;
$group-light-interactive-on-light-surface-active: $group-hsbc-colour-neutral-black;
$group-light-interactive-on-light-surface-primary-processing: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-light-surface-primary-disabled: $group-hsbc-colour-neutral-white;
$group-light-interactive-on-light-surface-primary-pressed: $group-hsbc-colour-neutral-grey-4;
$group-light-interactive-on-light-surface-primary-hover: $group-hsbc-colour-neutral-grey-1;
$group-light-interactive-on-light-surface-primary: $group-hsbc-colour-neutral-white;
$group-light-non-interactive-border-black: $group-hsbc-colour-neutral-black;
$group-light-non-interactive-border-neutral-5: $group-hsbc-colour-neutral-grey-5;
$group-light-non-interactive-border-neutral-4: $group-hsbc-colour-neutral-grey-4;
$group-light-non-interactive-border-neutral-3: $group-hsbc-colour-neutral-grey-3;
$group-light-non-interactive-border-neutral-2: $group-hsbc-colour-neutral-grey-2;
$group-light-non-interactive-border-neutral-1: $group-hsbc-colour-neutral-grey-1;
$group-light-non-interactive-border-white: $group-hsbc-colour-neutral-white;
$group-light-non-interactive-surface-brand-3: $group-hsbc-colour-complimentary-red-3;
$group-light-non-interactive-surface-brand-2: $group-hsbc-colour-complimentary-red-2;
$group-light-non-interactive-surface-brand-1: $group-hsbc-colour-complimentary-red-1;
$group-light-non-interactive-surface-black: $group-hsbc-colour-neutral-black;
$group-light-non-interactive-surface-neutral-5: $group-hsbc-colour-neutral-grey-5;
$group-light-non-interactive-surface-neutral-4: $group-hsbc-colour-neutral-grey-4;
$group-light-non-interactive-surface-neutral-3: $group-hsbc-colour-neutral-grey-3;
$group-light-non-interactive-surface-neutral-2: $group-hsbc-colour-neutral-grey-2;
$group-light-non-interactive-surface-neutral-1: $group-hsbc-colour-neutral-grey-1;
$group-light-non-interactive-surface-white: $group-hsbc-colour-neutral-white;
$group-light-canvas: $group-hsbc-colour-neutral-white;
$group-light-icon-on-dark-processing: $group-hsbc-colour-neutral-white;
$group-light-icon-on-dark-disabled-2: $group-hsbc-colour-neutral-grey-5;
$group-light-icon-on-dark-disabled-1: $group-hsbc-colour-neutral-grey-4;
$group-light-icon-on-dark-pressed: $group-hsbc-colour-neutral-white;
$group-light-icon-on-dark-hover: $group-hsbc-colour-neutral-white;
$group-light-icon-on-dark: $group-hsbc-colour-neutral-white;
$group-light-icon-on-light-processing: $group-hsbc-colour-neutral-grey-5;
$group-light-icon-on-light-disabled-2: $group-hsbc-colour-neutral-white;
$group-light-icon-on-light-disabled-1: $group-hsbc-colour-neutral-grey-3;
$group-light-icon-on-light-pressed-2: $group-hsbc-colour-core-hsbc-red;
$group-light-icon-on-light-hover-2: $group-hsbc-colour-core-hsbc-red;
$group-light-icon-on-light-default-2: $group-hsbc-colour-core-hsbc-red;
$group-light-icon-on-light-pressed-1: $group-hsbc-colour-neutral-grey-5;
$group-light-icon-on-light-hover-1: $group-hsbc-colour-neutral-grey-5;
$group-light-icon-on-light-default-1: $group-hsbc-colour-neutral-grey-5;
$group-light-text-on-dark-disabled-2: $group-hsbc-colour-neutral-grey-5;
$group-light-text-on-dark-disabled-1: $group-hsbc-colour-neutral-grey-4;
$group-light-text-on-dark-pressed: $group-hsbc-colour-neutral-white;
$group-light-text-on-dark-hover: $group-hsbc-colour-neutral-white;
$group-light-text-on-dark: $group-hsbc-colour-neutral-white;
$group-light-text-on-light-disabled-2: $group-hsbc-colour-neutral-white;
$group-light-text-on-light-disabled-1: $group-hsbc-colour-neutral-grey-3;
$group-light-text-on-light-pressed: $group-hsbc-colour-neutral-grey-5;
$group-light-text-on-light-hover: $group-hsbc-colour-neutral-grey-5;
$group-light-text-on-light: $group-hsbc-colour-neutral-grey-5;
$group-dark-elevation-border: $group-hsbc-colour-neutral-grey-4;
$group-dark-rag-border-information: $group-hsbc-colour-rag-blue;
$group-dark-rag-border-success: $group-hsbc-colour-rag-green;
$group-dark-rag-border-warning: $group-hsbc-colour-rag-amber;
$group-dark-rag-border-error: $group-hsbc-colour-rag-red;
$group-dark-rag-surface-information-default2: $group-hsbc-colour-rag-dark-blue-tint;
$group-dark-rag-surface-information-default-1: $group-hsbc-colour-rag-blue;
$group-dark-rag-surface-success-default2: $group-hsbc-colour-rag-dark-green-tint;
$group-dark-rag-surface-success-default-1: $group-hsbc-colour-rag-green;
$group-dark-rag-surface-warning-default2: $group-hsbc-colour-rag-dark-amber-tint;
$group-dark-rag-surface-warning-default-1: $group-hsbc-colour-rag-amber;
$group-dark-rag-surface-error-default2: $group-hsbc-colour-rag-dark-red-tint;
$group-dark-rag-surface-error-default-1: $group-hsbc-colour-rag-red;
$group-dark-rag-icon-information-icon: $group-hsbc-colour-neutral-white;
$group-dark-rag-icon-information-container: $group-hsbc-colour-rag-blue;
$group-dark-rag-icon-success-icon: $group-hsbc-colour-neutral-white;
$group-dark-rag-icon-success-container: $group-hsbc-colour-rag-green;
$group-dark-rag-icon-warning-icon: $group-hsbc-colour-neutral-grey-5;
$group-dark-rag-icon-warning-container: $group-hsbc-colour-rag-amber;
$group-dark-rag-icon-error-icon: $group-hsbc-colour-neutral-white;
$group-dark-rag-icon-error-container: $group-hsbc-colour-rag-red;
$group-dark-rag-text-on-dark: $group-hsbc-colour-neutral-white;
$group-dark-rag-text-on-light: $group-hsbc-colour-neutral-grey-5;
$group-dark-data-vis-border-on-dark-indicator: $group-hsbc-colour-neutral-white;
$group-dark-data-vis-border-on-dark-gridline: $group-hsbc-colour-neutral-grey-5;
$group-dark-data-vis-border-on-dark-baseline-2: $group-hsbc-colour-neutral-grey-5;
$group-dark-data-vis-border-on-dark-baseline-1: $group-hsbc-colour-neutral-white;
$group-dark-data-vis-border-on-light-indicator: $group-hsbc-colour-neutral-white;
$group-dark-data-vis-border-on-light-gridline: $group-hsbc-colour-neutral-grey-5;
$group-dark-data-vis-border-on-light-baseline-2: $group-hsbc-colour-neutral-grey-5;
$group-dark-data-vis-border-on-light-baseline-1: $group-hsbc-colour-neutral-white;
$group-dark-data-vis-surface-secondary: $group-hsbc-colour-neutral-black;
$group-dark-data-vis-surface-primary: $group-hsbc-colour-neutral-black;
$group-dark-data-vis-data-chart-green-4: $group-hsbc-colour-data-vis-green-4;
$group-dark-data-vis-data-chart-green-3: $group-hsbc-colour-data-vis-green-3;
$group-dark-data-vis-data-chart-green-2: $group-hsbc-colour-data-vis-green-2;
$group-dark-data-vis-data-chart-green-1: $group-hsbc-colour-data-vis-green-1;
$group-dark-data-vis-data-chart-orange-4: $group-hsbc-colour-data-vis-orange-4;
$group-dark-data-vis-data-chart-orange-3: $group-hsbc-colour-data-vis-orange-3;
$group-dark-data-vis-data-chart-orange-2: $group-hsbc-colour-data-vis-orange-2;
$group-dark-data-vis-data-chart-orange-1: $group-hsbc-colour-data-vis-orange-1;
$group-dark-data-vis-data-chart-pink-4: $group-hsbc-colour-data-vis-pink-4;
$group-dark-data-vis-data-chart-pink-3: $group-hsbc-colour-data-vis-pink-3;
$group-dark-data-vis-data-chart-pink-2: $group-hsbc-colour-data-vis-pink-2;
$group-dark-data-vis-data-chart-pink-1: $group-hsbc-colour-data-vis-pink-1;
$group-dark-data-vis-data-chart-purple-4: $group-hsbc-colour-data-vis-purple-4;
$group-dark-data-vis-data-chart-purple-3: $group-hsbc-colour-data-vis-purple-3;
$group-dark-data-vis-data-chart-purple-2: $group-hsbc-colour-data-vis-purple-2;
$group-dark-data-vis-data-chart-purple-1: $group-hsbc-colour-data-vis-purple-1;
$group-dark-data-vis-data-chart-blue-4: $group-hsbc-colour-data-vis-blue-4;
$group-dark-data-vis-data-chart-blue-3: $group-hsbc-colour-data-vis-blue-3;
$group-dark-data-vis-data-chart-blue-2: $group-hsbc-colour-data-vis-blue-2;
$group-dark-data-vis-data-chart-blue-1: $group-hsbc-colour-data-vis-blue-1;
$group-dark-interactive-on-dark-border-brand-1-processing: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-1-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-border-brand-1-pressed: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-1-hover: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-1: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-2-processing: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-2-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-border-brand-2-pressed: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-2-hover: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-brand-2: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-active-pressed: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-active-hover: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-active: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-border-high-contrast-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-border-high-contrast-pressed: $group-hsbc-colour-neutral-grey-3;
$group-dark-interactive-on-dark-border-high-contrast-hover: $group-hsbc-colour-neutral-grey-3;
$group-dark-interactive-on-dark-border-high-contrast: $group-hsbc-colour-neutral-grey-3;
$group-dark-interactive-on-dark-border-low-contrast-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-border-low-contrast-pressed: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-border-low-contrast-hover: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-border-low-contrast: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-surface-brand-2-processing: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-surface-brand-2-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-surface-brand-2-pressed: $group-hsbc-colour-neutral-grey-2;
$group-dark-interactive-on-dark-surface-brand-2-hover: $group-hsbc-colour-neutral-grey-1;
$group-dark-interactive-on-dark-surface-brand-2: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-dark-surface-brand-1-processing: $group-hsbc-colour-core-hsbc-red;
$group-dark-interactive-on-dark-surface-brand-1-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-dark-surface-brand-1-pressed: $group-hsbc-colour-neutral-black;
$group-dark-interactive-on-dark-surface-brand-1-hover: $group-hsbc-colour-complimentary-red-2;
$group-dark-interactive-on-dark-surface-brand-1: $group-hsbc-colour-core-hsbc-red;
$group-dark-interactive-on-dark-surface-active-pressed: $group-hsbc-colour-neutral-dark-grey-7;
$group-dark-interactive-on-dark-surface-active-hover: $group-hsbc-colour-neutral-dark-grey-8;
$group-dark-interactive-on-dark-surface-active: $group-hsbc-colour-neutral-black;
$group-dark-interactive-on-dark-surface-primary-disabled: $group-hsbc-colour-neutral-dark-new-grey;
$group-dark-interactive-on-dark-surface-primary-pressed: $group-hsbc-colour-neutral-dark-grey-6;
$group-dark-interactive-on-dark-surface-primary-hover: $group-hsbc-colour-neutral-grey-5;
$group-dark-interactive-on-dark-surface-primary: $group-hsbc-colour-neutral-dark-new-grey;
$group-dark-interactive-on-light-border-brand-2-processing: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-brand-2-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-border-brand-2-pressed: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-brand-2-hover: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-brand-2: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-brand-1-pressed: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-brand-1-hover: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-brand-1: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-active-pressed: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-active-hover: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-active: $group-hsbc-colour-neutral-white;
$group-dark-interactive-on-light-border-high-contrast-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-border-high-contrast-pressed: $group-hsbc-colour-neutral-grey-3;
$group-dark-interactive-on-light-border-high-contrast-hover: $group-hsbc-colour-neutral-grey-3;
$group-dark-interactive-on-light-border-high-contrast: $group-hsbc-colour-neutral-grey-3;
$group-dark-interactive-on-light-border-low-contrast-disabled: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-border-low-contrast-pressed: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-border-low-contrast-hover: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-border-low-contrast: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-surface-brand-2-processing: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-surface-brand-2-disabled: $group-hsbc-colour-neutral-dark-grey-6;
$group-dark-interactive-on-light-surface-brand-2-pressed: $group-hsbc-colour-neutral-grey-5;
$group-dark-interactive-on-light-surface-brand-2-hover: $group-hsbc-colour-neutral-dark-new-grey;
$group-dark-interactive-on-light-surface-brand-2: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-surface-brand-1-processing: $group-hsbc-colour-core-hsbc-red;
$group-dark-interactive-on-light-surface-brand-1-disabled: $group-hsbc-colour-neutral-dark-grey-6;
$group-dark-interactive-on-light-surface-brand-1-pressed: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-surface-brand-1-hover: $group-hsbc-colour-complimentary-red-2;
$group-dark-interactive-on-light-surface-brand-1: $group-hsbc-colour-core-hsbc-red;
$group-dark-interactive-on-light-surface-active-pressed: $group-hsbc-colour-neutral-grey-5;
$group-dark-interactive-on-light-surface-active-hover: $group-hsbc-colour-neutral-dark-new-grey;
$group-dark-interactive-on-light-surface-active: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-surface-primary-processing: $group-hsbc-colour-neutral-black;
$group-dark-interactive-on-light-surface-primary-disabled: $group-hsbc-colour-neutral-black;
$group-dark-interactive-on-light-surface-primary-pressed: $group-hsbc-colour-neutral-grey-4;
$group-dark-interactive-on-light-surface-primary-hover: $group-hsbc-colour-neutral-dark-grey-8;
$group-dark-interactive-on-light-surface-primary: $group-hsbc-colour-neutral-black;
$group-dark-non-interactive-border-black: $group-hsbc-colour-neutral-white;
$group-dark-non-interactive-border-neutral-5: $group-hsbc-colour-neutral-grey-2;
$group-dark-non-interactive-border-neutral-4: $group-hsbc-colour-neutral-grey-3;
$group-dark-non-interactive-border-neutral-3: $group-hsbc-colour-neutral-grey-4;
$group-dark-non-interactive-border-neutral-2: $group-hsbc-colour-neutral-dark-new-grey;
$group-dark-non-interactive-border-neutral-1: $group-hsbc-colour-neutral-grey-5;
$group-dark-non-interactive-border-white: $group-hsbc-colour-neutral-black;
$group-dark-non-interactive-surface-brand-3: $group-hsbc-colour-complimentary-red-3;
$group-dark-non-interactive-surface-brand-2: $group-hsbc-colour-complimentary-red-2;
$group-dark-non-interactive-surface-brand-1: $group-hsbc-colour-complimentary-red-1;
$group-dark-non-interactive-surface-black: $group-hsbc-colour-neutral-grey-4;
$group-dark-non-interactive-surface-neutral-5: $group-hsbc-colour-neutral-dark-new-grey;
$group-dark-non-interactive-surface-neutral-4: $group-hsbc-colour-neutral-grey-5;
$group-dark-non-interactive-surface-neutral-3: $group-hsbc-colour-neutral-dark-grey-6;
$group-dark-non-interactive-surface-neutral-2: $group-hsbc-colour-neutral-dark-grey-7;
$group-dark-non-interactive-surface-neutral-1: $group-hsbc-colour-neutral-dark-grey-8;
$group-dark-non-interactive-surface-white: $group-hsbc-colour-neutral-black;
$group-dark-canvas: $group-hsbc-colour-neutral-black;
$group-dark-icon-on-dark-processing: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-dark-disabled-2: $group-hsbc-colour-neutral-grey-5;
$group-dark-icon-on-dark-disabled-1: $group-hsbc-colour-neutral-grey-4;
$group-dark-icon-on-dark-pressed: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-dark-hover: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-dark: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-processing: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-disabled-2: $group-hsbc-colour-neutral-grey-5;
$group-dark-icon-on-light-disabled-1: $group-hsbc-colour-neutral-grey-4;
$group-dark-icon-on-light-pressed-2: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-hover-2: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-default-2: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-pressed-1: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-hover-1: $group-hsbc-colour-neutral-white;
$group-dark-icon-on-light-default-1: $group-hsbc-colour-neutral-white;
$group-dark-text-on-dark-disabled-2: $group-hsbc-colour-neutral-grey-5;
$group-dark-text-on-dark-disabled-1: $group-hsbc-colour-neutral-grey-4;
$group-dark-text-on-dark-pressed: $group-hsbc-colour-neutral-white;
$group-dark-text-on-dark-hover: $group-hsbc-colour-neutral-white;
$group-dark-text-on-dark: $group-hsbc-colour-neutral-white;
$group-dark-text-on-light-disabled-2: $group-hsbc-colour-neutral-grey-5;
$group-dark-text-on-light-disabled-1: $group-hsbc-colour-neutral-grey-4;
$group-dark-text-on-light-pressed: $group-hsbc-colour-neutral-white;
$group-dark-text-on-light-hover: $group-hsbc-colour-neutral-white;
$group-dark-text-on-light: $group-hsbc-colour-neutral-white;
$group-color-base-neutral-5: $group-hsbc-colour-neutral-grey-5;
$group-color-base-neutral-4: $group-hsbc-colour-neutral-grey-4;
$group-color-base-neutral-3: $group-hsbc-colour-neutral-grey-3;
$group-color-base-neutral-2: $group-hsbc-colour-neutral-grey-2;
$group-color-base-neutral-1: $group-hsbc-colour-neutral-grey-1;
$group-color-base-black: $group-hsbc-colour-core-black;
$group-color-base-white: $group-hsbc-colour-core-white;
$group-color-base-complimentary-red-3: $group-hsbc-colour-complimentary-red-3;
$group-color-base-complimentary-red-2: $group-hsbc-colour-complimentary-red-2;
$group-color-base-complimentary-red-1: $group-hsbc-colour-complimentary-red-1;
$group-color-base-core-white: $group-hsbc-colour-core-white;
$group-color-base-core-black: $group-hsbc-colour-core-black;
$group-color-base-core-primary: $group-hsbc-colour-core-hsbc-red;
$group-color-base-error-default-2: $group-light-rag-surface-error-default2;
$group-color-base-error-default-1: $group-light-rag-surface-error-default-1;
$group-color-base-warning-default-2: $group-light-rag-surface-warning-default2;
$group-color-base-warning-default-1: $group-light-rag-surface-warning-default-1;
$group-color-base-success-default-2: $group-light-rag-surface-success-default2;
$group-color-base-success-default-1: $group-light-rag-surface-success-default-1;
$group-color-base-info-default-2: $group-light-rag-surface-information-default2;
$group-color-base-info-default-1: $group-light-rag-surface-information-default-1;
$group-color-background-disabled: $group-light-interactive-on-light-surface-brand-1-disabled; // Disabled elements are displayed in a light grey.
$group-color-background-primary: $group-color-base-core-primary; // Red is our accent color and it is present on every touch-point
$group-color-text-error: $group-color-base-error-default-1;
$group-color-text-success: $group-color-base-success-default-1;
$group-color-text-warning: $group-color-base-warning-default-1;
$group-color-text-info: $group-color-base-info-default-1;
$group-color-background-error: $group-color-base-error-default-1; // Error messages are displayed in red.
$group-color-background-warning: $group-color-base-warning-default-1; // Warning messages are displayed in yellow.
$group-color-background-success: $group-color-base-success-default-1; // Success messages are displayed in green.
$group-color-background-info: $group-color-base-info-default-1; // Informational messages are displayed in blue.