/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --border-primary-light: var(--color-grey-400); /** This colour is used for dividers on white background, as a pressed state for white buttons etc. */
  --border-primary-medium: var(--color-grey-500); /** This colour is used for dividers on colourful backgrounds. */
  --border-primary-dark: var(--color-grey-700); /** This colour is used for hover state of the elements. (SS) */
  --border-primary-active: var(--color-grey-900); /** This colour is used for input active state. */
  --border-secondary: var(--color-grey-50); /** This colour is used as a border for secondary white buttons. */
  --border-secondary-active: var(--color-grey-300); /** This colour is used for active state for white secondary buttons. */
  --border-secondary-hover: var(--color-grey-300); /** This colour is used for hover state for white secondary buttons. */
  --border-legacy-secure-border: var(--color-grey-600); /** This colour is used for the majority of element borders. (SS) */
  --border-brand-primary-dark: var(--color-red-800);
  --border-brand-primary-hover: var(--color-red-800); /** This colour is used for selected links in the menu and hover. */
  --border-brand-primary-active: var(--color-red-900); /** This colour is used for pressed/clicked state. */
  --border-brand-primary: var(--color-red-600); /** This colour is utilised for the selected state and secondary buttons. */
  --border-information: var(--color-blue-600); /** This colour serves as an outline for informational notifications. */
  --border-error: var(--color-red-700); /** This colour serves as an outline for error notifications. */
  --border-focus: var(--color-purple-700); /** This colour is used for focus state. */
  --border-warning: var(--color-orange-700); /** This colour serves as an outline for warning notifications. */
  --border-destructive: var(--color-red-700);
  --border-destructive-active: var(--color-red-800);
  --border-destructive-hover: var(--color-red-800);
  --text-primary: var(--color-grey-900); /** This is YBS brand dark grey colour. It's used it for most of the text. */
  --text-primary-fixed: var(--color-grey-900); /** This is used for a consistent experience on light and dark theme. */
  --text-secondary: var(--color-grey-800); /** This colour is used for secondary text, for less critical information or to add contrast to primary text. */
  --text-primary-invert: var(--color-grey-50); /** This colour is applied to dark backgrounds and CTAs to achieve prominence of the elements. */
  --text-primary-invert-active: var(--color-grey-400); /** This colour is used as pressed state for white buttons. */
  --text-primary-invert-hover: var(--color-grey-300); /** This colour is used as hover state for white secondary buttons. */
  --text-brand-primary-dark: var(--color-red-800);
  --text-brand-primary-hover: var(--color-red-800); /** This colour is used for text on hover. */
  --text-brand-primary: var(--color-red-600); /** This is YBS brand primary green colour. It is used for links and headers  to achieve prominence. */
  --text-brand-primary-active: var(--color-red-900); /** This colour is used for pressed/clicked state. */
  --text-error: var(--color-red-700); /** (Secure site) This colour is utilised for error text to immediately grab the user's attention. */
  --text-destructive: var(--color-red-700);
  --text-inactive: var(--color-grey-700);
  --text-destructive-hover: var(--color-red-800);
  --text-destructive-active: var(--color-red-800);
  --text-success: var(--color-green-primary-700);
  --icon-brand-primary: var(--color-red-600); /** This is YBS brand primary green colour. It is used for most of the icons to create contrast. */
  --icon-brand-primary-dark: var(--color-red-800);
  --icon-brand-primary-hover: var(--color-red-800); /** This colour is used for actionable icons on hover. */
  --icon-brand-primary-active: var(--color-red-900); /** This colour is used for pressed/clicked state. */
  --icon-brand-secondary: var(--color-red-500); /** This is YBS brand secondary green colour. It is used for some of the icons. */
  --icon-primary: var(--color-grey-800); /** This colour is employed for neutral interface icons, serving functional purposes. */
  --icon-primary-invert: var(--color-grey-50); /** This colour is used for icons within CTAs and dark backgrounds to enhance their prominence. */
  --icon-primary-invert-hover: var(--color-grey-300); /** This colour is used as hover state. */
  --icon-primary-invert-active: var(--color-grey-400); /** This colour is used as pressed state */
  --icon-information: var(--color-blue-600); /** This colour is used for informational icon. */
  --icon-error: var(--color-red-700); /** This colour is used for error icon. */
  --icon-warning: var(--color-orange-700); /** This colour is used for warning icon. */
  --icon-life-moments: var(--color-purple-500); /** This colour is used for life moments chip icon. */
  --icon-my-money: var(--color-teal-500); /** This colour is used for my money chip icon. */
  --icon-mortgages-explained: var(--color-orange-500); /** This colour is used for my money chip icon. */
  --icon-success: var(--color-green-primary-700);
  --icon-destructive: var(--color-red-700);
  --table-even: var(--color-grey-100); /** - */
  --table-header: var(--color-grey-200);
  --table-odd: var(--color-grey-50);
  --table-border: var(--color-grey-400);
  --background-primary: var(--color-grey-50); /** This is the primary background colour, serving as the foundational element of the page. */
  --background-secondary: var(--color-grey-200); /** This is the secondary background colour, designed to provide contrast to the primary background hue. */
  --background-tertiary: var(--color-pink-50); /** This is the tertiary background colour, utilised for banners and instances where we aim to attract the user's attention or introduce a third background hue to the page. It’s used as success notification background as well (PS) */
  --background-active: var(--color-grey-400); /** This colour is used for pressed state. */
  --background-hover: var(--color-grey-400); /** This colour is used for hover state. */
  --background-legacy-secure: var(--color-grey-300); /** This colour is selectively employed for certain UI elements requiring enhanced definition.(SS) */
  --background-legacy-disabled: var(--color-grey-600); /** This colour represents the disabled state of a button. (SS) */
  --background-brand-primary: var(--color-red-600); /** This colour is employed to ensure high contrast against the background, particularly for CTAs and other attention-grabbing elements. */
  --background-brand-primary-active: var(--color-red-900); /** This colour is used for pressed/clicked state. */
  --background-brand-primary-hover: var(--color-red-800); /** This colour is used to provide strong contrast against the background. (SS) */
  --background-brand-primary-dark: var(--color-red-800); /** This colour is used to provide strong contrast against the background. (SS) */
  --background-primary-invert: var(--color-grey-900); /** This colour is used to provide strong contrast against the background. */
  --background-information: var(--color-blue-50); /** This colour is used as a background for informational notification. */
  --background-error: var(--color-pink-50); /** This colour is used as a background for error notification and life moments chip. */
  --background-warning: var(--color-red-50); /** This colour is used as a background for warning notification. */
  --background-my-money: var(--color-teal-50); /** This colour is used as a background for my money chip. */
  --background-mortgages-explained: var(--color-orange-50); /** This colour is used as a background for mortgages explained. */
  --background-mortgages-chip: var(--color-orange-100); /** This colour is used as a background for mortgages product chip. */
  --background-savings-chip: var(--color-green-primary-100); /** This colour is used as a background for savings product chip. */
  --background-success: var(--color-green-primary-50); /** Used for backgrounds of success messages */
  --background-destructive: var(--color-red-700);
  --background-destructive-hover: var(--color-red-800);
  --background-destructive-active: var(--color-red-800);
  --chip-background-1: var(--color-green-primary-200); /** Non-semantic colour for tags */
  --chip-background-2: var(--color-green-secondary-200); /** Non-semantic colour for tags */
  --chip-background-3: var(--color-teal-50); /** Non-semantic colour for tags */
  --chip-background-4: var(--color-blue-200); /** Non-semantic colour for tags */
  --chip-background-5: var(--color-blue-100); /** Non-semantic colour for tags */
  --chip-background-6: var(--color-purple-100); /** Non-semantic colour for tags */
  --chip-background-7: var(--color-pink-100); /** Non-semantic colour for tags */
  --stepper-progress-line: var(--color-grey-400);
  --stepper-pill-inactive: var(--color-grey-400);
  --stepper-pill-active: var(--color-red-600);
  --divider-background: var(--color-grey-400);
}