:root, :host {
  --primitives-border-radius-0px: 0;
  --primitives-border-radius-3px: 3;
  --primitives-border-radius-4px: 4;
  --primitives-border-radius-5px: 5;
  --primitives-border-radius-6px: 6;
  --primitives-border-radius-8px: 8;
  --primitives-border-radius-12px: 12;
  --primitives-border-radius-16px: 16;
  --primitives-border-radius-24px: 24;
  --primitives-border-radius-999px: 999;
  --primitives-color-mono-white: #ffffff;
  --primitives-color-mono-black: #000000;
  --primitives-color-success-50: #f2f9f2;
  --primitives-color-success-100: #d9ecd9;
  --primitives-color-success-200: #99cc99;
  --primitives-color-success-300: #47a447;
  --primitives-color-success-400: #249224;
  --primitives-color-success-500: #008000;
  --primitives-color-success-600: #006d00;
  --primitives-color-success-700: #005a00;
  --primitives-color-success-800: #004600;
  --primitives-color-success-900: #003300;
  --primitives-color-success-950: #002000;
  --primitives-color-info-50: #f2f8fc;
  --primitives-color-info-100: #d9eaf6;
  --primitives-color-info-200: #99c7e7;
  --primitives-color-info-300: #459ad4;
  --primitives-color-info-400: #2487cc;
  --primitives-color-info-500: #0074c4;
  --primitives-color-info-600: #0063a7;
  --primitives-color-info-700: #005189;
  --primitives-color-info-800: #00406c;
  --primitives-color-info-900: #002e4e;
  --primitives-color-info-950: #001d31;
  --primitives-color-warning-50: #fcf5f2;
  --primitives-color-warning-100: #f3d8cc;
  --primitives-color-warning-200: #e8b199;
  --primitives-color-warning-300: #d7784f;
  --primitives-color-warning-400: #ce5826;
  --primitives-color-warning-500: #c53b00;
  --primitives-color-warning-600: #a73200;
  --primitives-color-warning-700: #8a2900;
  --primitives-color-warning-800: #6c2000;
  --primitives-color-warning-900: #4f1800;
  --primitives-color-warning-950: #310f00;
  --primitives-color-danger-50: #fcf2f2;
  --primitives-color-danger-100: #f9e6e6;
  --primitives-color-danger-200: #eaa6a6;
  --primitives-color-danger-300: #db6363;
  --primitives-color-danger-400: #d03333;
  --primitives-color-danger-500: #c40000;
  --primitives-color-danger-600: #a70000;
  --primitives-color-danger-700: #890000;
  --primitives-color-danger-800: #6c0000;
  --primitives-color-danger-900: #4e0000;
  --primitives-color-danger-950: #310000;
  --primitives-color-system-50: #fffff2;
  --primitives-color-system-100: #ffffe6;
  --primitives-color-system-200: #ffffbf;
  --primitives-color-system-300: #ffff80;
  --primitives-color-system-400: #ffff40;
  --primitives-color-system-500: #ffff00;
  --primitives-color-system-600: #d9d900;
  --primitives-color-system-700: #b3b300;
  --primitives-color-system-800: #8c8c00;
  --primitives-color-system-900: #666600;
  --primitives-color-system-950: #404000;
  --primitives-color-bom-muted-50: #fbfbfd;
  --primitives-color-bom-muted-100: #f7f7f7;
  --primitives-color-bom-muted-200: #dedee1;
  --primitives-color-bom-muted-300: #b6b6bc;
  --primitives-color-bom-muted-400: #8e8d98;
  --primitives-color-bom-muted-500: #706f7c;
  --primitives-color-bom-muted-600: #5b5b6a;
  --primitives-color-bom-muted-700: #464651;
  --primitives-color-bom-muted-800: #323238;
  --primitives-color-bom-muted-900: #1c1c1f;
  --primitives-color-bom-muted-950: #161619;
  --primitives-color-bom-primary-50: #fff4f3;
  --primitives-color-bom-primary-100: #ffcbc7;
  --primitives-color-bom-primary-200: #ff7c6a;
  --primitives-color-bom-primary-300: #f24300;
  --primitives-color-bom-primary-400: #e43f00;
  --primitives-color-bom-primary-500: #d13900;
  --primitives-color-bom-primary-600: #b02f00;
  --primitives-color-bom-primary-700: #8f2400;
  --primitives-color-bom-primary-800: #6f1a00;
  --primitives-color-bom-primary-900: #501000;
  --primitives-color-bom-primary-950: #380900;
  --primitives-color-bom-primary-opacity: rgba(209, 57, 0, 0.5);
  --primitives-color-bom-hero-50: #f6f5ff;
  --primitives-color-bom-hero-100: #dad6fe;
  --primitives-color-bom-hero-200: #c6c0fd;
  --primitives-color-bom-hero-300: #a094fc;
  --primitives-color-bom-hero-400: #685ac0;
  --primitives-color-bom-hero-500: #534891;
  --primitives-color-bom-hero-600: #433781;
  --primitives-color-bom-hero-700: #33286a;
  --primitives-color-bom-hero-800: #261b58;
  --primitives-color-bom-hero-900: #20024e;
  --primitives-color-bom-hero-950: #1b0045;
  --primitives-color-bom-hero-opacity: rgba(83, 72, 145, 0.5);
  --primitives-color-bom-pop-50: #f6f5ff;
  --primitives-color-bom-pop-100: #ebe9fe;
  --primitives-color-bom-pop-200: #dad6fe;
  --primitives-color-bom-pop-300: #c6c0fd;
  --primitives-color-bom-pop-400: #b2aafd;
  --primitives-color-bom-pop-500: #a094fc;
  --primitives-color-bom-pop-600: #7d67fa;
  --primitives-color-bom-pop-700: #5b31f8;
  --primitives-color-bom-pop-800: #3d0dc0;
  --primitives-color-bom-pop-900: #200470;
  --primitives-color-bom-pop-950: #140250;
  --primitives-color-bom-pop-opacity: rgba(160, 148, 252, 0.5);
  --primitives-color-bom-holler-50: #eeedf8;
  --primitives-color-bom-holler-100: #dfddf3;
  --primitives-color-bom-holler-200: #c1bce8;
  --primitives-color-bom-holler-300: #a39cdc;
  --primitives-color-bom-holler-400: #8379cf;
  --primitives-color-bom-holler-500: #685ac0;
  --primitives-color-bom-holler-600: #5141ac;
  --primitives-color-bom-holler-700: #3f3288;
  --primitives-color-bom-holler-800: #2b2162;
  --primitives-color-bom-holler-900: #19123e;
  --primitives-color-bom-holler-950: #0e0928;
  --primitives-color-bom-holler-opacity: rgba(104, 90, 192, 0.5);
  --primitives-color-bom-sing-50: #fff1ea;
  --primitives-color-bom-sing-100: #fee3d4;
  --primitives-color-bom-sing-200: #fec6a3;
  --primitives-color-bom-sing-300: #fda85f;
  --primitives-color-bom-sing-400: #ed9019;
  --primitives-color-bom-sing-500: #d17e15;
  --primitives-color-bom-sing-600: #a5620e;
  --primitives-color-bom-sing-700: #7c4908;
  --primitives-color-bom-sing-800: #553004;
  --primitives-color-bom-sing-900: #321a01;
  --primitives-color-bom-sing-950: #210f01;
  --primitives-color-bom-sing-opacity: rgba(209, 126, 21, 0.5);
  --primitives-color-bom-dance-50: #ffe9e7;
  --primitives-color-bom-dance-100: #ffcfcb;
  --primitives-color-bom-dance-200: #ff9b90;
  --primitives-color-bom-dance-300: #ff6244;
  --primitives-color-bom-dance-400: #d63c00;
  --primitives-color-bom-dance-500: #9e2a00;
  --primitives-color-bom-dance-600: #822100;
  --primitives-color-bom-dance-700: #671800;
  --primitives-color-bom-dance-800: #490e00;
  --primitives-color-bom-dance-900: #300700;
  --primitives-color-bom-dance-950: #230400;
  --primitives-color-bom-dance-opacity: rgba(158, 42, 0, 0.5);
}

[data-brand="bom"] {
  --color-background-white: var(--primitives-color-mono-white); /* If you need a white background use this token */
  --color-background-pale: var(--primitives-color-bom-muted-100); /* If you need a grey background use this token. Note: this token replaces the current Background colour style. */
  --color-background-faint: var(--primitives-color-bom-muted-50); /* If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background. */
  --color-background-primary: var(--primitives-color-bom-primary-500); /* Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed */
  --color-background-hero: var(--primitives-color-bom-hero-500); /* Use for embellishment eg. hero banners etc. Warning. Accessibility is not guaranteed */
  --color-surface-muted-vivid: var(--primitives-color-bom-hero-900); /* Use for surfaces that need to be the same colour as body text (icons, arrows etc). */
  --color-surface-muted: var(--primitives-color-bom-muted-500); /* Replaces the current Muted colour style. */
  --color-surface-muted-strong: var(--primitives-color-bom-muted-400); /* Reserved do not use. */
  --color-surface-muted-mild: var(--primitives-color-bom-muted-300); /* Reserved do not use. */
  --color-surface-muted-soft: var(--primitives-color-bom-muted-200); /* Reserved do not use. */
  --color-surface-muted-pale: var(--primitives-color-bom-muted-100); /* Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode. */
  --color-surface-muted-faint: var(--primitives-color-bom-muted-50); /* Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode. */
  --color-surface-primary: var(--primitives-color-bom-primary-500); /* Replaces the current Primary colour style. */
  --color-surface-primary-faint: var(--primitives-color-bom-primary-50); /* Reserved do not use. */
  --color-surface-hero: var(--primitives-color-bom-hero-500); /* Replaces the current Hero colour style. */
  --color-surface-hero-faint: var(--primitives-color-bom-hero-50); /* Reserved do not use. */
  --color-surface-pop: var(--primitives-color-bom-pop-500); /* Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines. */
  --color-surface-pop-faint: var(--primitives-color-bom-pop-50); /* Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines. */
  --color-surface-holler: var(--primitives-color-bom-holler-500); /* Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands. */
  --color-surface-holler-faint: var(--primitives-color-bom-holler-50); /* Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands. */
  --color-surface-success: var(--primitives-color-success-500); /* Only use for success alert components, do not use for anything else. */
  --color-surface-success-faint: var(--primitives-color-success-50); /* Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here. */
  --color-surface-info: var(--primitives-color-info-500); /* Only use for info alert components, do not use for anything else. */
  --color-surface-info-faint: var(--primitives-color-info-50); /* Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here. */
  --color-surface-warning: var(--primitives-color-warning-500); /* Only use for warning alert components, do not use for anything else. */
  --color-surface-warning-faint: var(--primitives-color-warning-50); /* Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here. */
  --color-surface-danger: var(--primitives-color-danger-500); /* Only use for danger alert components, do not use for anything else. */
  --color-surface-danger-faint: var(--primitives-color-danger-50); /* Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here. */
  --color-surface-system-error: var(--primitives-color-system-500); /* Only use for system alert components, do not use for anything else. */
  --color-surface-system-error-dark: var(--primitives-color-system-950); /* Only use for system alert components, do not use for anything else. */
  --color-surface-mono: var(--primitives-color-mono-white); /* White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode. */
  --color-surface-reversed: var(--primitives-color-mono-white); /* Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode. */
  --color-text-body: var(--primitives-color-bom-hero-900); /* Use for paragraph text and UI elements - labels, buttons, inputs etc */
  --color-text-heading: var(--primitives-color-bom-hero-500); /* Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications. */
  --color-text-muted: var(--primitives-color-bom-muted-500); /* Use for text that requires less emphasis like hint text etc. */
  --color-text-primary: var(--primitives-color-bom-primary-500); /* Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token. */
  --color-text-hero: var(--primitives-color-bom-hero-500); /* Use for text that requires more emphasis, call outs, quotes etc. */
  --color-text-holler: var(--primitives-color-bom-holler-500); /* Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands. */
  --color-text-link: var(--primitives-color-bom-primary-500); /* Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands. */
  --color-text-success: var(--primitives-color-success-500); /* Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-text-info: var(--primitives-color-info-500); /* Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-text-warning: var(--primitives-color-warning-500); /* Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-text-danger: var(--primitives-color-danger-500); /* Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-text-system-error: var(--primitives-color-system-950); /* Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-text-mono: var(--primitives-color-mono-white); /* Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc. */
  --color-text-reversed: var(--primitives-color-mono-white); /* Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono */
  --color-border-muted: var(--primitives-color-bom-muted-500); /* For borders that require more emphasis. Use with caution and in accordance with the brand guidelines. */
  --color-border-muted-strong: var(--primitives-color-bom-muted-400); /* Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc */
  --color-border-muted-mild: var(--primitives-color-bom-muted-300); /* Reserved do not use. */
  --color-border-muted-soft: var(--primitives-color-bom-muted-200); /* Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc */
  --color-border-hero: var(--primitives-color-bom-hero-500); /* For borders that require more emphasis. Use with caution and in accordance with the brand guidelines. */
  --color-border-primary: var(--primitives-color-bom-primary-500); /* For borders that require more emphasis. Use with caution and in accordance with the brand guidelines. */
  --color-border-pop: var(--primitives-color-bom-pop-500); /* For borders that require more emphasis. Use with caution and in accordance with the brand guidelines. */
  --color-border-holler: var(--primitives-color-bom-holler-500); /* For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands. */
  --color-border-success: var(--primitives-color-success-500); /* Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-success-mild: var(--primitives-color-success-300); /* Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-info: var(--primitives-color-info-500); /* Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-info-mild: var(--primitives-color-info-300); /* Only for success info messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-warning: var(--primitives-color-warning-500); /* Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-warning-mild: var(--primitives-color-warning-300); /* Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-danger: var(--primitives-color-danger-500); /* Reserved. Must only be used for the Danger alert component. */
  --color-border-danger-mild: var(--primitives-color-danger-300); /* Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components. */
  --color-border-mono: var(--primitives-color-mono-white); /* Similar to surface-mono, border-mono is white in light mode and black in dark mode. */
  --color-border-focus: var(--primitives-color-bom-holler-400); /* Reserved. Only for use with focus state keyboard navigation. */
  --color-data-a-solid: var(--primitives-color-bom-primary-500); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-a-tint: var(--primitives-color-bom-primary-200); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-a-opacity: var(--primitives-color-bom-primary-opacity); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-b-solid: var(--primitives-color-bom-hero-500); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-b-tint: var(--primitives-color-bom-hero-300); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-b-opacity: var(--primitives-color-bom-hero-opacity); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-c-solid: var(--primitives-color-bom-pop-500); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-c-tint: var(--primitives-color-bom-pop-300); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-c-opacity: var(--primitives-color-bom-pop-opacity); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-d-solid: var(--primitives-color-bom-holler-500); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-d-tint: var(--primitives-color-bom-holler-200); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-d-opacity: var(--primitives-color-bom-holler-opacity); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-e-solid: var(--primitives-color-bom-sing-500); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-e-tint: var(--primitives-color-bom-sing-300); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-e-opacity: var(--primitives-color-bom-sing-opacity); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-f-solid: var(--primitives-color-bom-dance-500); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-f-tint: var(--primitives-color-bom-dance-300); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-data-f-opacity: var(--primitives-color-bom-dance-opacity); /* This is a reserved colour. It must only be used for data visualisation - graphs and charts. */
  --color-surface-pictogram-base: var(--primitives-color-bom-hero-500); /* Reserved. Only for use on Pictograms. */
  --color-surface-pictogram-accent: var(--primitives-color-bom-pop-500); /* Reserved. Only for use on Pictograms. */
  --color-surface-hover-primary: var(--primitives-color-bom-primary-400); /* This token is for hover states. */
  --color-surface-active-primary: var(--primitives-color-bom-primary-200);
  --color-surface-hover-hero: var(--primitives-color-bom-hero-400); /* This token is for hover states. */
  --color-surface-active-hero: var(--primitives-color-bom-hero-300); /* This token is for hover states. */
  --color-surface-hover-primary-faint: var(--primitives-color-bom-primary-50); /* This token is for hover states. */
  --color-surface-active-primary-faint: var(--primitives-color-bom-primary-100); /* This token is for hover states. */
  --color-surface-hover-hero-faint: var(--primitives-color-bom-hero-50);
  --color-surface-active-hero-faint: var(--primitives-color-bom-hero-100);
  --color-surface-hover-muted-pale: var(--primitives-color-bom-muted-100); /* This token is for hover states. */
  --color-surface-active-muted-pale: var(--primitives-color-bom-muted-300); /* This token is for hover states. */
  --color-surface-hover-mono: var(--primitives-color-mono-white); /* This token is for hover states. */
  --color-surface-active-mono: var(--primitives-color-bom-muted-200); /* This token is for hover states. */
  --border-rounded-none: var(--primitives-border-radius-0px);
  --border-rounded-sm: var(--primitives-border-radius-3px);
  --border-rounded-md: var(--primitives-border-radius-4px);
  --border-rounded-lg: var(--primitives-border-radius-5px);
  --border-rounded-xl: var(--primitives-border-radius-6px);
  --border-rounded-2xl: var(--primitives-border-radius-8px);
  --border-rounded-3xl: var(--primitives-border-radius-12px);
  --border-rounded-4xl: var(--primitives-border-radius-16px);
  --border-rounded-5xl: var(--primitives-border-radius-24px);
  --border-rounded-full: var(--primitives-border-radius-999px);
}