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

:root, .light-theme {
  --xo-colour-surface-base: #FAF8F6; /** Use for static backgrounds. */
  --xo-colour-surface-relief: #F4F2F0; /** Use for slightly lifted static surfaces overlaid on base. */
  /**
   * Use for lifted static surfaces overlaid on base or relief.
   * 
   */
  --xo-colour-surface-raised: #ECEAE8;
  --xo-colour-surface-inverted: #141211; /** Use for static high-contrast backgrounds. */
  --xo-colour-surface-on-accent: #fff; /** Use for surfaces overlaid on accent surfaces. Can also be used for surfaces overlaid on other coloured surfaces. This colour persists across modes. */
  --xo-colour-surface-on-complement: #000; /** Use for surfaces overlaid on complement surfaces. This colour persists across modes. */
  --xo-colour-surface-on-supplement: #000; /** Use for surfaces overlaid on supplement surfaces. This colour persists across modes. */
  /**
   * Use primarily for emphasised interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-default: #012DFE;
  /**
   * Use for emphasised interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-hover: #0111E9;
  /**
   * Use for emphasised interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-pressed: #0400B9;
  /**
   * Use for emphasised interactive surfaces in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-disabled: #EBF3FF;
  /**
   * Use primarily for subtle accent interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-subtle-default: #F7FAFF;
  /**
   * Use for subtle accent interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-subtle-hover: #EBF3FF;
  /**
   * Use for subtle accent interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-subtle-pressed: #DEECFF;
  /**
   * Use primarily for the most emphasised accent interactive surfaces in a default state. The strongest variant — opposite end of the scale from subtle.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-accent-strong-default: #020053;
  /**
   * Use for de-emphasised interactive surfaces in a default state overlaid on base or relief. Ideal for small elements like button.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-default: hsl(20 1.78% 33.14% / 0.11);
  /**
   * Use for de-emphasised interactive surfaces in a hover state overlaid on base or relief. Ideal Ideal for small elements like button.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-hover: hsl(20 1.78% 33.14% / 0.19);
  /**
   * Use for de-emphasised interactive surfaces in a pressed state overlaid on base or relief. Ideal for small elements like button.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-pressed: hsl(20 1.78% 33.14% / 0.28);
  /**
   * Use for de-emphasised interactive surfaces in a disabled state.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-disabled: hsl(20 1.78% 33.14% / 0.06);
  /**
   * Use for the subtlest neutral interactive surfaces in a default state. Ideal for large lightweight elements.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-subtlest-default: #FAF8F6;
  /**
   * Use for the subtlest neutral interactive surfaces in a hover state. Ideal for large lightweight elements.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-subtlest-hover: hsl(20 1.78% 33.14% / 0.06);
  /**
   * Use for the subtlest neutral interactive surfaces in a pressed state. Ideal for large lightweight elements.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-subtlest-pressed: hsl(20 1.78% 33.14% / 0.11);
  /**
   * Use for subtle neutral interactive surfaces in a default state overlaid on base. Ideal for large elements like cards.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-subtle-default: hsl(20 1.78% 33.14% / 0.06);
  /**
   * Use for subtle neutral interactive surfaces in a hover state overlaid on base. Ideal for large elements like cards.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-subtle-hover: hsl(20 1.78% 33.14% / 0.11);
  /**
   * Use for subtle neutral interactive surfaces in a pressed state overlaid on base. Ideal for large elements like cards.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-subtle-pressed: hsl(20 1.78% 33.14% / 0.19);
  /**
   * Use for strong neutral interactive surfaces in a default state.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-strong-default: #1C1A19;
  /**
   * Use for strong neutral interactive surfaces in a hover state.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-strong-hover: #141211;
  /**
   * Use for strong neutral interactive surfaces in a pressed state.
   * 
   * Legacy tags: interactive
   */
  --xo-colour-surface-neutral-strong-pressed: #141211;
  --xo-colour-surface-on-image-default: hsl(30 28.57% 97.25% / 0.75); /** Use for semi-trasnparent interactive surfaces in a default state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-hover: hsl(30 28.57% 97.25% / 0.85); /** Use for semi-trasnparent interactive surfaces in a hover state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-pressed: hsl(30 28.57% 97.25% / 0.95); /** Use for semi-trasnparent interactive surfaces in a pressed state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-selected: #FAF8F6; /** Use for opaque interactive surfaces in a selected state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-disabled: hsl(40 2.13% 72.35% / 0.1); /** Use for semi-trasnparent interactive surfaces in a disabled state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-strong-default: hsl(20 8.11% 7.25% / 0.7); /** Use for strong semi-trasnparent interactive surfaces in a default state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-strong-hover: hsl(20 8.11% 7.25% / 0.8); /** Use for strong semi-transparent interactive surfaces in a hover state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-strong-pressed: hsl(20 8.11% 7.25% / 0.9); /** Use for strong semi-transparent interactive surfaces in a pressed state overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-surface-on-image-strong-disabled: hsl(20 8.11% 7.25% / 0.3); /** Use for strong semi-transparent interactive surfaces in a disabled state overlaid on an image or hero. This colour persists across modes. */
  /**
   * Use primarily for positive interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Pair with white or near-white foregrounds for best contrast.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-default: #008856;
  /**
   * Use for positive interactive surfaces in a hover state.
   * 
   * Pair with white or near-white foregrounds for best contrast.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-hover: #006C42;
  /**
   * Use for positive interactive surfaces in a pressed state.
   * 
   * Pair with white or near-white foregrounds for best contrast.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-pressed: #005230;
  /**
   * Use for positive interactive surfaces in a disabled state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-disabled: #ECF5F0;
  /**
   * Use for subtle positive interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-subtle-default: #F4F9F6;
  /**
   * Use for subtle positive interactive surfaces in a hover state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-subtle-hover: #ECF5F0;
  /**
   * Use for subtle positive interactive surfaces in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-surface-positive-subtle-pressed: #DFEFE5;
  /**
   * Use primarily for warning interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Pair with white or near-white foregrounds for best contrast.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-default: #c7522c;
  /**
   * Use for warning interactive surfaces in a hover state.
   * 
   * Pair with white or near-white foregrounds for best contrast.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-hover: #A63A12;
  /**
   * Use for warning interactive surfaces in a pressed state.
   * 
   * Pair with white or near-white foregrounds for best contrast.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-pressed: #832701;
  /**
   * Use for warning interactive surfaces in a disabled state.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-disabled: #FEEFEB;
  /**
   * Use for subtle warning interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-subtle-default: #FEF8F6;
  /**
   * Use for subtle warning interactive surfaces in a hover state.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-subtle-hover: #FEEFEB;
  /**
   * Use for subtle warning interactive surfaces in a pressed state.
   * 
   * Legacy tags: action
   */
  --xo-colour-surface-warning-subtle-pressed: #FEE6DF;
  /**
   * Use primarily for negative interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-default: #9C2B34;
  /**
   * Use for negative interactive surfaces in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-hover: #8A1826;
  /**
   * Use for negative interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-pressed: #6F0217;
  /**
   * Use for negative interactive surfaces in a disableld state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-disabled: #FBF1F1;
  /**
   * Use for subtle negative interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-subtle-default: #FDF8F8;
  /**
   * Use for subtle negative interactive surfaces in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-subtle-hover: #FBF1F1;
  /**
   * Use for subtle negative interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-surface-negative-subtle-pressed: #F8E8E7;
  /**
   * Use primarily for complementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-default: #fff;
  /**
   * Use for complementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-hover: #565453;
  /**
   * Use for complementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-pressed: #484645;
  /**
   * Use for complementary interactive surfaces in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-disabled: #F4F2F0;
  /**
   * Use primarily for subtle complementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-subtle-default: #FAF8F6;
  /**
   * Use for subtle complementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-subtle-hover: #F4F2F0;
  /**
   * Use for subtle complementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-complement-subtle-pressed: #ECEAE8;
  /**
   * Use primarily for supplementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-default: #565453;
  /**
   * Use for supplementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-hover: #484645;
  /**
   * Use for supplementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-pressed: #363433;
  /**
   * Use for supplementary interactive surfaces in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-disabled: #F4F2F0;
  /**
   * Use primarily for subtle supplementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-subtle-default: #FAF8F6;
  /**
   * Use for subtle supplementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-subtle-hover: #F4F2F0;
  /**
   * Use for subtle supplementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-surface-supplement-subtle-pressed: #ECEAE8;
  --xo-colour-text-primary: #141211; /** Use for standard text. */
  --xo-colour-text-secondary: #484645; /** Use for de-emphasised text. */
  --xo-colour-text-tertiary: #787675; /** Use for extra de-emphasised text. ONLY USE FOR LARGE TEXT (18px +). */
  --xo-colour-text-on-accent: #fff; /** Use for text overlaid on accent surfaces. Can also be used for text overlaid on other coloured surfaces. This colour persists across modes. */
  --xo-colour-text-on-complement: #000; /** Use for text overlaid on complement surfaces. This colour persists across modes. */
  --xo-colour-text-on-supplement: #000; /** Use for text overlaid on supplement surfaces. This colour persists across modes. */
  /**
   * Use primarily for emphasised interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-accent-default: #012DFE;
  /**
   * Use for emphasised interactive text in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-accent-hover: #0111E9;
  /**
   * Use for emphasised interactive text in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-accent-pressed: #0400B9;
  /**
   * Use for emphasised interactive text in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-accent-disabled: #DEECFF;
  --xo-colour-text-neutral-default: #252322; /** Use for de-emphasised interactive text in a default state. */
  --xo-colour-text-neutral-hover: #1C1A19; /** Use for de-emphasised interactive text in a hover state. */
  --xo-colour-text-neutral-pressed: #141211; /** Use for de-emphasised interactive text in a pressed state. */
  --xo-colour-text-neutral-disabled: #ECEAE8; /** Use for de-emphasised interactive text in a disabled state. */
  --xo-colour-text-on-image-default: #FAF8F6; /** Use for text overlaid on an image or hero in a default state. Can also be used for static text. This colour persists across modes. */
  --xo-colour-text-on-image-on-selected: #141211; /** Use for text overlaid on on-image surfaces in a selected state. This colour persists across modes. */
  --xo-colour-text-on-image-disabled: hsl(0 0% 100% / 0.5); /** Use for text overlaid on an image or hero in a disabled state. This colour persists across modes. */
  --xo-colour-text-on-inverted-strong: #FAF8F6; /** Use for standard text overlaid on inverted surfaces. */
  --xo-colour-text-on-inverted-subtle: #565453; /** Use for de-emphasised text overlaid on inverted surfaces. */
  /**
   * Use primarily for positive interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-text-positive-default: #006C42;
  /**
   * Use for positive interactive text in a hover state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-text-positive-hover: #005230;
  /**
   * Use for positive interactive text in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-text-positive-pressed: #003E22;
  /**
   * Use for positive interactive text in a disabled state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-text-positive-disabled: #DFEFE5;
  /**
   * Use for warning interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action
   */
  --xo-colour-text-warning-default: #A63A12;
  /**
   * Use for warning interactive text in a hover state.
   * 
   * Legacy tags: action
   */
  --xo-colour-text-warning-hover: #832701;
  /**
   * Use for warning interactive text in a pressed state.
   * 
   * Legacy tags: action
   */
  --xo-colour-text-warning-pressed: #651A00;
  /**
   * Use for warning interactive text in a disabled state.
   * 
   * Legacy tags: action
   */
  --xo-colour-text-warning-disabled: #FEE6DF;
  /**
   * Use for negative interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-text-negative-default: #9C2B34;
  /**
   * Use for negative interactive text in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-text-negative-hover: #8A1826;
  /**
   * Use for negative interactive text in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-text-negative-pressed: #6F0217;
  /**
   * Use for negative interactive text in a disabled state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-text-negative-disabled: #F8E8E7;
  /**
   * Use primarily for complementary interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-complement-default: #fff;
  /**
   * Use for complementary interactive text in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-complement-hover: #565453;
  /**
   * Use for complementary interactive text in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-complement-pressed: #484645;
  /**
   * Use for complementary interactive text in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-complement-disabled: #ECEAE8;
  /**
   * Use primarily for supplementary interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-supplement-default: #565453;
  /**
   * Use for supplementary interactive text in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-supplement-hover: #484645;
  /**
   * Use for supplementary interactive text in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-supplement-pressed: #363433;
  /**
   * Use for supplementary interactive text in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-text-supplement-disabled: #ECEAE8;
  --xo-colour-icon-primary: #141211; /** Use for standard icons. */
  --xo-colour-icon-secondary: #484645; /** Use for de-emphasised icons. */
  --xo-colour-icon-on-accent: #fff; /** Use for icons overlaid on accent surfaces. Can also be used for icons overlaid on other coloured surfaces. This colour persists across modes. */
  --xo-colour-icon-on-complement: #000; /** Use for icons overlaid on complement surfaces. This colour persists across modes. */
  --xo-colour-icon-on-supplement: #000; /** Use for icons overlaid on supplement surfaces. This colour persists across modes. */
  /**
   * Use primarily for emphasised interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-accent-default: #012DFE;
  /**
   * Use for emphasised interactive icons in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-accent-hover: #0111E9;
  /**
   * Use for emphasised interactive icons in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-accent-pressed: #0400B9;
  /**
   * Use for emphasised interactive icons in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-accent-disabled: #DEECFF;
  --xo-colour-icon-neutral-default: #252322; /** Use for de-emphasised interactive icons in a default state. */
  --xo-colour-icon-neutral-hover: #1C1A19; /** Use for de-emphasised interactive icons in a hover state. */
  --xo-colour-icon-neutral-pressed: #141211; /** Use for de-emphasised interactive icons in a pressed state. */
  --xo-colour-icon-neutral-disabled: #ECEAE8; /** Use for de-emphasised interactive icons in a disabled state. */
  --xo-colour-icon-on-image-default: #FAF8F6; /** Use for icons overlaid on an image or hero in a default state. Can also be used for static icons. This colour persists across modes. */
  --xo-colour-icon-on-image-on-selected: #141211; /** Use for icons overlaid on on-image surfaces in a selected state. This colour persists across modes. */
  --xo-colour-icon-on-image-disabled: hsl(0 0% 100% / 0.5); /** Use for icons overlaid on an image or hero in a disabled state. This colour persists across modes. */
  --xo-colour-icon-on-inverted-strong: #FAF8F6; /** Use for standard icons overlaid on inverted surfaces. */
  --xo-colour-icon-on-inverted-subtle: #565453; /** Use for de-emphasised icons overlaid on inverted surfaces. */
  /**
   * Use primarily for positive interactive icons in a default state. Can also be used sparingly for static icons. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-icon-positive-default: #006C42;
  /**
   * Use for positive interactive icons in a hover state. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-icon-positive-hover: #005230;
  /**
   * Use for positive interactive icons in a pressed state. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-icon-positive-pressed: #003E22;
  /**
   * Use for positive interactive icons in a disabled state. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-icon-positive-disabled: #DFEFE5;
  /**
   * Use for warning interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action
   */
  --xo-colour-icon-warning-default: #A63A12;
  /**
   * Use for warning interactive icons in a hover state.
   * 
   * Legacy tags: action
   */
  --xo-colour-icon-warning-hover: #832701;
  /**
   * Use for warning interactive icons in a pressed state.
   * 
   * Legacy tags: action
   */
  --xo-colour-icon-warning-pressed: #651A00;
  /**
   * Use for warning interactive icons in a disabled state.
   * 
   * Legacy tags: action
   */
  --xo-colour-icon-warning-disabled: #FEE6DF;
  /**
   * Use for negative interactive icons in a default state. Can also be used sparingly for static icons. 
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-icon-negative-default: #9C2B34;
  /**
   * Use for negative interactive icons in a hover state. 
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-icon-negative-hover: #8A1826;
  /**
   * Use for negative interactive icons in a pressed state. 
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-icon-negative-pressed: #6F0217;
  /**
   * Use for negative interactive icons in a disabled state. 
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-icon-negative-disabled: #F8E8E7;
  /**
   * Use primarily for complementary interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-complement-default: #fff;
  /**
   * Use for complementary interactive icons in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-complement-hover: #565453;
  /**
   * Use for complementary interactive icons in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-complement-pressed: #484645;
  /**
   * Use for complementary interactive icons in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-complement-disabled: #ECEAE8;
  /**
   * Use primarily for supplementary interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-supplement-default: #565453;
  /**
   * Use for supplementary interactive icons in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-supplement-hover: #484645;
  /**
   * Use for supplementary interactive icons in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-supplement-pressed: #363433;
  /**
   * Use for supplementary interactive icons in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-icon-supplement-disabled: #ECEAE8;
  --xo-colour-border-primary: #141211; /** Use for strong borders. */
  --xo-colour-border-secondary: #BAB9B7; /** Use for de-emphasised borders. */
  --xo-colour-border-tertiary: #F4F2F0; /** Use for subtle borders. */
  --xo-colour-border-inverted: #FAF8F6; /** Use for cut-out effects on overlaid elements. */
  --xo-colour-border-on-accent: #fff; /** Use for borders overlaid on accent surfaces. Can also be used for borders overlaid on other coloured surfaces. This colour persists across modes. */
  --xo-colour-border-on-complement: #000; /** Use for borders overlaid on complement surfaces. This colour persists across modes. */
  --xo-colour-border-on-supplement: #000; /** Use for borders overlaid on supplement surfaces. This colour persists across modes. */
  --xo-colour-border-on-image: hsl(30 28.57% 97.25% / 0.3); /** Use for borders overlaid on an image or hero. This colour persists across modes. */
  --xo-colour-border-on-inverted: #363433; /** Use for borders overlaid on inverted surfaces. */
  /**
   * Use primarily for emphasised interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-default: #012DFE;
  /**
   * Use for emphasised interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-hover: #0111E9;
  /**
   * Use for emphasised interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-pressed: #0400B9;
  /**
   * Use for emphasised interactive borders in a focus state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-focus: #012DFE;
  /**
   * Use for emphasised interactive borders in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-disabled: #EBF3FF;
  /**
   * Use primarily for subtle accent interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-subtle-default: #EBF3FF;
  /**
   * Use for subtle accent interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-subtle-hover: #DEECFF;
  /**
   * Use for subtle accent interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-accent-subtle-pressed: #8FBBFF;
  --xo-colour-border-neutral-default: hsl(20 1.78% 33.14% / 0.11); /** Use for de-emphasised interactive borders in a default state. */
  --xo-colour-border-neutral-hover: hsl(20 1.78% 33.14% / 0.19); /** Use for de-emphasised interactive borders in a hover state. */
  --xo-colour-border-neutral-pressed: hsl(20 1.78% 33.14% / 0.28); /** Use for de-emphasised interactive borders in a pressed state. */
  --xo-colour-border-neutral-disabled: hsl(20 1.78% 33.14% / 0.11); /** Use for de-emphasised interactive borders in a disabled state. */
  --xo-colour-border-neutral-strong-default: #ECEAE8; /** Use for strong neutral interactive borders in a default state. Ideal for controls like checkbox and radio. */
  --xo-colour-border-neutral-strong-hover: #BAB9B7; /** Use for strong neutral interactive borders in a hover state. Ideal for controls like checkbox and radio. */
  --xo-colour-border-neutral-strong-pressed: #787675; /** Use for strong neutral interactive borders in a pressed state. Ideal for controls like checkbox and radio. */
  /**
   * Use primarily for positive interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-default: #006C42;
  /**
   * Use for positive interactive borders in a hover state. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-hover: #005230;
  /**
   * Use for positive interactive borders in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-pressed: #003E22;
  /**
   * Use for positive interactive borders in a focus state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-focus: #006C42;
  /**
   * Use for positive interactive borders in a disabled state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-disabled: #ECF5F0;
  /**
   * Use primarily for subtle positive interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-subtle-default: #ECF5F0;
  /**
   * Use for subtle positive interactive surfaces in a hover state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-subtle-hover: #DFEFE5;
  /**
   * Use for subtle positive interactive surfaces in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --xo-colour-border-positive-subtle-pressed: #6CCB9B;
  /**
   * Use primarily for warning interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-default: #A63A12;
  /**
   * Use for warning interactive borders in a hover state. 
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-hover: #832701;
  /**
   * Use for warning interactive borders in a pressed state. 
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-pressed: #651A00;
  /**
   * Use for warning interactive borders in a focus state.
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-focus: #A63A12;
  /**
   * Use for warning interactive borders in a disabled state.
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-disabled: #FEEFEB;
  /**
   * Use primarily for subtle warning interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-subtle-default: #FEEFEB;
  /**
   * Use for subtle warning interactive borders in a hover state.
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-subtle-hover: #FEE6DF;
  /**
   * Use for subtle warning interactive borders in a pressed state.
   * 
   * Legacy tags: action
   */
  --xo-colour-border-warning-subtle-pressed: #F5A58C;
  /**
   * Use primarily for negative interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-default: #9C2B34;
  /**
   * Use for warning interactive borders in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-hover: #8A1826;
  /**
   * Use for warning interactive borders in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-pressed: #6F0217;
  /**
   * Use for warning interactive borders in a focus state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-focus: #9C2B34;
  /**
   * Use for warning interactive borders in a disabled state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-disabled: #FBF1F1;
  /**
   * Use primarily for subtle negative interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-subtle-default: #FBF1F1;
  /**
   * Use for subtle warning interactive borders in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-subtle-hover: #F8E8E7;
  /**
   * Use for subtle warning interactive borders in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --xo-colour-border-negative-subtle-pressed: #E5ABA9;
  /**
   * Use primarily for complementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-default: #fff;
  /**
   * Use for complementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-hover: #565453;
  /**
   * Use for complementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-pressed: #484645;
  /**
   * Use for complementary interactive borders in a focus state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-focus: #fff;
  /**
   * Use for complementary interactive borders in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-disabled: #F4F2F0;
  /**
   * Use primarily for subtle complementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-subtle-default: #F4F2F0;
  /**
   * Use for subtle complementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-subtle-hover: #ECEAE8;
  /**
   * Use for subtle complementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-complement-subtle-pressed: #BAB9B7;
  /**
   * Use primarily for supplementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-default: #565453;
  /**
   * Use for supplementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-hover: #484645;
  /**
   * Use for supplementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-pressed: #363433;
  /**
   * Use for supplementary interactive borders in a focus state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-focus: #565453;
  /**
   * Use for supplementary interactive borders in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-disabled: #F4F2F0;
  /**
   * Use primarily for subtle supplementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-subtle-default: #F4F2F0;
  /**
   * Use for subtle supplementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-subtle-hover: #ECEAE8;
  /**
   * Use for subtle supplementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --xo-colour-border-supplement-subtle-pressed: #BAB9B7;
  --xo-colour-gradient-on-image-lr: linear-gradient(90deg, #000 0%, hsl(0 0% 0% / 0) 100%); /** Use for darkened overlays on image. Ideal for elements like heroes. */
  --xo-colour-gradient-on-image-rl: linear-gradient(-90deg, #000 0%, hsl(0 0% 0% / 0) 100%); /** Use for darkened overlays on image. Ideal for elements like heroes. */
  --xo-colour-gradient-on-image-bt: linear-gradient(0deg, #000 0%, hsl(0 0% 0% / 0) 100%); /** Use for darkened overlays on image. Ideal for elements like heroes. */
  --xo-colour-gradient-on-image-tb: linear-gradient(180deg, #000 0%, hsl(0 0% 0% / 0) 100%); /** Use for darkened overlays on image. Ideal for elements like heroes. */
  --xo-colour-gradient-fade-lr: linear-gradient(90deg, #fff 0%, hsl(0 0% 100% / 0) 100%); /** Used to fade elements when they reach the edge of the interface. Ideal for elements like lists or carousels. */
  --xo-colour-gradient-fade-rl: linear-gradient(-90deg, #fff 0%, hsl(0 0% 100% / 0) 100%); /** Used to fade elements when they reach the edge of the interface. Ideal for elements like lists or carousels. */
  --xo-colour-gradient-fade-bt: linear-gradient(0deg, #fff 0%, hsl(0 0% 100% / 0) 100%); /** Used to fade elements when they reach the edge of the interface. Ideal for elements like lists or carousels. */
  --xo-colour-gradient-fade-tb: linear-gradient(180deg, #fff 0%, hsl(0 0% 100% / 0) 100%); /** Used to fade elements when they reach the edge of the interface. Ideal for elements like lists or carousels. */
  --xo-colour-gradient-base-stop-1: #fff; /** Used as a base gradient stop. */
  --xo-colour-gradient-base-stop-2: hsl(0 0% 100% / 0); /** Used as a base gradient stop. */
  --xo-typography-title-xx-large-editorial-line-height: 4.625rem; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-editorial-font-size: 4.5rem; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-editorial-letter-spacing: 0em; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-editorial-text-decoration: none; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-editorial-text-case: none; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-editorial-font-weight: 300; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-editorial-font-family: 'Helvetica Now Display', sans-serif; /** For top-level titles in long-form or editorial contexts where content length is unbounded like article titles, slogans, CMS-driven headers, etc. Same desktop size as xx-large (72px), but drops to 40px on mobile so long titles don't wrap awkwardly or overpower small screens. Use xx-large instead for short, hand-crafted display copy like hero headers. */
  --xo-typography-title-xx-large-line-height: 4.625rem; /** Use for large titles. */
  --xo-typography-title-xx-large-font-size: 4.5rem; /** Use for large titles. */
  --xo-typography-title-xx-large-letter-spacing: 0em; /** Use for large titles. */
  --xo-typography-title-xx-large-text-decoration: none; /** Use for large titles. */
  --xo-typography-title-xx-large-text-case: none; /** Use for large titles. */
  --xo-typography-title-xx-large-font-weight: 300; /** Use for large titles. */
  --xo-typography-title-xx-large-font-family: 'Helvetica Now Display', sans-serif; /** Use for large titles. */
  --xo-typography-title-x-large-font-family: 'Helvetica Now Display', sans-serif; /** Use for large titles. */
  --xo-typography-title-x-large-font-weight: 300; /** Use for large titles. */
  --xo-typography-title-x-large-line-height: 4.125rem; /** Use for large titles. */
  --xo-typography-title-x-large-font-size: 4rem; /** Use for large titles. */
  --xo-typography-title-x-large-letter-spacing: 0em; /** Use for large titles. */
  --xo-typography-title-x-large-text-decoration: none; /** Use for large titles. */
  --xo-typography-title-x-large-text-case: none; /** Use for large titles. */
  --xo-typography-title-large-font-family: 'Helvetica Now Display', sans-serif; /** Use for large titles. */
  --xo-typography-title-large-font-weight: 300; /** Use for large titles. */
  --xo-typography-title-large-line-height: 3.125rem; /** Use for large titles. */
  --xo-typography-title-large-font-size: 3rem; /** Use for large titles. */
  --xo-typography-title-large-letter-spacing: 0em; /** Use for large titles. */
  --xo-typography-title-large-text-decoration: none; /** Use for large titles. */
  --xo-typography-title-large-text-case: none; /** Use for large titles. */
  --xo-typography-title-regular-font-family: 'Helvetica Now Display', sans-serif; /** Use for regular titles. */
  --xo-typography-title-regular-font-weight: 300; /** Use for regular titles. */
  --xo-typography-title-regular-line-height: 2.125rem; /** Use for regular titles. */
  --xo-typography-title-regular-font-size: 2rem; /** Use for regular titles. */
  --xo-typography-title-regular-letter-spacing: 0em; /** Use for regular titles. */
  --xo-typography-title-regular-text-decoration: none; /** Use for regular titles. */
  --xo-typography-title-regular-text-case: none; /** Use for regular titles. */
  --xo-typography-title-small-font-family: 'Helvetica Now Display', sans-serif; /** Use for small titles. */
  --xo-typography-title-small-font-weight: 300; /** Use for small titles. */
  --xo-typography-title-small-line-height: 1.75rem; /** Use for small titles. */
  --xo-typography-title-small-font-size: 1.5rem; /** Use for small titles. */
  --xo-typography-title-small-letter-spacing: 0em; /** Use for small titles. */
  --xo-typography-title-small-text-decoration: none; /** Use for small titles. */
  --xo-typography-title-small-text-case: none; /** Use for small titles. */
  --xo-typography-title-x-small-font-family: 'Helvetica Now Display', sans-serif; /** Use for small titles. */
  --xo-typography-title-x-small-font-weight: 300; /** Use for small titles. */
  --xo-typography-title-x-small-line-height: 1.5rem; /** Use for small titles. */
  --xo-typography-title-x-small-font-size: 1.25rem; /** Use for small titles. */
  --xo-typography-title-x-small-letter-spacing: 0em; /** Use for small titles. */
  --xo-typography-title-x-small-text-decoration: none; /** Use for small titles. */
  --xo-typography-title-x-small-text-case: none; /** Use for small titles. */
  --xo-typography-body-large-font-family: 'Helvetica Now Display', sans-serif; /** Use for large body text. */
  --xo-typography-body-large-font-weight: 300; /** Use for large body text. */
  --xo-typography-body-large-line-height: 1.75rem; /** Use for large body text. */
  --xo-typography-body-large-font-size: 1.25rem; /** Use for large body text. */
  --xo-typography-body-large-letter-spacing: 0em; /** Use for large body text. */
  --xo-typography-body-large-text-decoration: none; /** Use for large body text. */
  --xo-typography-body-large-text-case: none; /** Use for large body text. */
  --xo-typography-body-regular-font-family: 'Helvetica Now Display', sans-serif; /** Use for regular body text. */
  --xo-typography-body-regular-font-weight: 300; /** Use for regular body text. */
  --xo-typography-body-regular-line-height: 1.75rem; /** Use for regular body text. */
  --xo-typography-body-regular-font-size: 1.125rem; /** Use for regular body text. */
  --xo-typography-body-regular-letter-spacing: 0em; /** Use for regular body text. */
  --xo-typography-body-regular-text-decoration: none; /** Use for regular body text. */
  --xo-typography-body-regular-text-case: none; /** Use for regular body text. */
  --xo-typography-body-small-font-family: 'Helvetica Now Display', sans-serif; /** Use for small body text. */
  --xo-typography-body-small-font-weight: 300; /** Use for small body text. */
  --xo-typography-body-small-line-height: 1.5rem; /** Use for small body text. */
  --xo-typography-body-small-font-size: 1rem; /** Use for small body text. */
  --xo-typography-body-small-letter-spacing: 0em; /** Use for small body text. */
  --xo-typography-body-small-text-decoration: none; /** Use for small body text. */
  --xo-typography-body-small-text-case: none; /** Use for small body text. */
  --xo-typography-body-x-small-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-x-small-font-weight: 300; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-x-small-line-height: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-x-small-font-size: 1rem; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-x-small-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-x-small-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-x-small-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for small body text. */
  --xo-typography-body-bold-large-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-large-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-large-line-height: 2rem; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-large-font-size: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-large-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-large-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-large-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for large body text in bold weight. */
  --xo-typography-body-bold-regular-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-regular-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-regular-line-height: 1.75rem; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-regular-font-size: 1.25rem; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-regular-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-regular-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-regular-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for regular body text in bold weight. */
  --xo-typography-body-bold-small-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-small-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-small-line-height: 1.75rem; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-small-font-size: 1.125rem; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-small-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-small-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-small-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for small body text in bold weight. */
  --xo-typography-body-bold-x-small-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-body-bold-x-small-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-body-bold-x-small-line-height: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-body-bold-x-small-font-size: 1rem; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-body-bold-x-small-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-body-bold-x-small-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-body-bold-x-small-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for extra small body text in bold weight. */
  --xo-typography-label-x-large-font-family: 'Helvetica Now Display', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-x-large-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-x-large-line-height: 1.5rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-x-large-font-size: 1.125rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-x-large-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-x-large-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-x-large-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-font-family: 'Helvetica Now Display', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-line-height: 1.25rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-font-size: 1rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-large-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-font-family: 'Helvetica Now Display', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-line-height: 1.125rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-font-size: 0.875rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-regular-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-font-family: 'Helvetica Now Display', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-line-height: 1rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-font-size: 0.75rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-small-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --xo-typography-label-bold-x-large-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-x-large-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-x-large-line-height: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-x-large-font-size: 1.125rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-x-large-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-x-large-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-x-large-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-line-height: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-font-size: 1rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-large-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-line-height: 1.25rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-font-size: 0.875rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-regular-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-line-height: 1.125rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-font-size: 0.75rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-small-text-case: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised labels (e.g. button or link). */
  --xo-typography-label-bold-caps-x-large-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-x-large-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-x-large-line-height: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-x-large-font-size: 1.125rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-x-large-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-x-large-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-x-large-text-case: uppercase; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-line-height: 1.5rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-font-size: 1rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-large-text-case: uppercase; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-line-height: 1.25rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-font-size: 0.875rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-regular-text-case: uppercase; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-font-family: 'Helvetica Now Display', sans-serif; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-font-weight: 600; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-line-height: 1.125rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-font-size: 0.75rem; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-letter-spacing: 0em; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-text-decoration: none; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
  --xo-typography-label-bold-caps-small-text-case: uppercase; /** DEPRECATED — being removed due to low usage. Previously used for short single-line emphasised uppercase labels (e.g. badge). */
}