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

:root, .light-theme {
  --colour-surface-base: #fff; /** Use for static backgrounds. */
  --colour-surface-relief: hsl(0 0% 50.2% / 0.06); /** Use for slightly lifted static surfaces overlaid on base. */
  /**
   * Use for lifted static surfaces overlaid on base or relief.
   * 
   */
  --colour-surface-raised: hsl(0 0% 50.2% / 0.11);
  --colour-surface-inverted: #000; /** Use for static high-contrast backgrounds. */
  --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. */
  --colour-surface-on-complement: #000; /** Use for surfaces overlaid on complement surfaces. This colour persists across modes. */
  --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
   */
  --colour-surface-accent-default: #0065f2;
  /**
   * Use for emphasised interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-accent-hover: #0051c2;
  /**
   * Use for emphasised interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-accent-pressed: #003d91;
  /**
   * Use for emphasised interactive surfaces in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-accent-disabled: #cce0fc;
  /**
   * Use primarily for subtle accent interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-accent-subtle-default: #e5f0fe;
  /**
   * Use for subtle accent interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-accent-subtle-hover: #cce0fc;
  /**
   * Use for subtle accent interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-accent-subtle-pressed: #99c1fa;
  /**
   * Use for de-emphasised interactive surfaces in a default state overlaid on base or relief. Ideal for small elements like button.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-default: hsl(0 0% 50.2% / 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
   */
  --colour-surface-neutral-hover: hsl(0 0% 50.2% / 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
   */
  --colour-surface-neutral-pressed: hsl(0 0% 50.2% / 0.28);
  /**
   * Use for de-emphasised interactive surfaces in a disabled state.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-disabled: hsl(0 0% 50.2% / 0.06);
  /**
   * Use for the subtlest neutral interactive surfaces in a default state. Ideal for large lightweight elements.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-subtlest-default: #fff;
  /**
   * Use for the subtlest neutral interactive surfaces in a hover state. Ideal for large lightweight elements.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-subtlest-hover: hsl(0 0% 50.2% / 0.06);
  /**
   * Use for the subtlest neutral interactive surfaces in a pressed state. Ideal for large lightweight elements.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-subtlest-pressed: hsl(0 0% 50.2% / 0.11);
  /**
   * Use for subtle neutral interactive surfaces in a default state overlaid on base. Ideal for large elements like cards.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-subtle-default: hsl(0 0% 50.2% / 0.06);
  /**
   * Use for subtle neutral interactive surfaces in a hover state overlaid on base. Ideal for large elements like cards.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-subtle-hover: hsl(0 0% 50.2% / 0.11);
  /**
   * Use for subtle neutral interactive surfaces in a pressed state overlaid on base. Ideal for large elements like cards.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-subtle-pressed: hsl(0 0% 50.2% / 0.19);
  /**
   * Use for strong neutral interactive surfaces in a default state.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-strong-default: #1a1a1a;
  /**
   * Use for strong neutral interactive surfaces in a hover state.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-strong-hover: #000;
  /**
   * Use for strong neutral interactive surfaces in a pressed state.
   * 
   * Legacy tags: interactive
   */
  --colour-surface-neutral-strong-pressed: #000;
  --colour-surface-on-image-default: hsl(0 0% 100% / 0.75); /** Use for semi-trasnparent interactive surfaces in a default state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-hover: hsl(0 0% 100% / 0.85); /** Use for semi-trasnparent interactive surfaces in a hover state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-pressed: hsl(0 0% 100% / 0.95); /** Use for semi-trasnparent interactive surfaces in a pressed state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-selected: #fff; /** Use for opaque interactive surfaces in a selected state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-disabled: hsl(0 0% 70.2% / 0.1); /** Use for semi-trasnparent interactive surfaces in a disabled state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-strong-default: hsl(0 0% 0% / 0.7); /** Use for strong semi-trasnparent interactive surfaces in a default state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-strong-hover: hsl(0 0% 0% / 0.8); /** Use for strong semi-transparent interactive surfaces in a hover state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-strong-pressed: hsl(0 0% 0% / 0.9); /** Use for strong semi-transparent interactive surfaces in a pressed state overlaid on an image or hero. This colour persists across modes. */
  --colour-surface-on-image-strong-disabled: hsl(0 0% 0% / 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.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-default: #23bf6a;
  /**
   * Use for positive interactive surfaces in a hover state.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-hover: #1c9955;
  /**
   * Use for positive interactive surfaces in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-pressed: #157340;
  /**
   * Use for positive interactive surfaces in a disabled state.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-disabled: #d3f2e1;
  /**
   * Use for subtle positive interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-subtle-default: #E9FBF1;
  /**
   * Use for subtle positive interactive surfaces in a hover state.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-subtle-hover: #d3f2e1;
  /**
   * Use for subtle positive interactive surfaces in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --colour-surface-positive-subtle-pressed: #a7e5c3;
  /**
   * Use primarily for warning interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-default: #f2b253;
  /**
   * Use for warning interactive surfaces in a hover state.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-hover: #c28e42;
  /**
   * Use for warning interactive surfaces in a pressed state.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-pressed: #916b32;
  /**
   * Use for warning interactive surfaces in a disabled state.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-disabled: #fcf0dd;
  /**
   * Use for subtle warning interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-subtle-default: #fef7ee;
  /**
   * Use for subtle warning interactive surfaces in a hover state.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-subtle-hover: #fcf0dd;
  /**
   * Use for subtle warning interactive surfaces in a pressed state.
   * 
   * Legacy tags: action
   */
  --colour-surface-warning-subtle-pressed: #fae0ba;
  /**
   * Use primarily for negative interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-default: #f32a2a;
  /**
   * Use for negative interactive surfaces in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-hover: #c22222;
  /**
   * Use for negative interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-pressed: #921919;
  /**
   * Use for negative interactive surfaces in a disableld state.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-disabled: #fdd4d4;
  /**
   * Use for subtle negative interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-subtle-default: #feeaea;
  /**
   * Use for subtle negative interactive surfaces in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-subtle-hover: #fdd4d4;
  /**
   * Use for subtle negative interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --colour-surface-negative-subtle-pressed: #faaaaa;
  /**
   * Use primarily for complementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-default: #fff;
  /**
   * Use for complementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-hover: #808080;
  /**
   * Use for complementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-pressed: #666666;
  /**
   * Use for complementary interactive surfaces in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-disabled: #e6e6e6;
  /**
   * Use primarily for subtle complementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-subtle-default: #f2f2f2;
  /**
   * Use for subtle complementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-subtle-hover: #e6e6e6;
  /**
   * Use for subtle complementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-complement-subtle-pressed: #cccccc;
  /**
   * Use primarily for supplementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-default: #808080;
  /**
   * Use for supplementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-hover: #666666;
  /**
   * Use for supplementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-pressed: #4d4d4d;
  /**
   * Use for supplementary interactive surfaces in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-disabled: #e6e6e6;
  /**
   * Use primarily for subtle complementary interactive surfaces in a default state. Can also be used sparingly for static surfaces.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-subtle-default: #f2f2f2;
  /**
   * Use for subtle supplementary interactive surfaces in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-subtle-hover: #e6e6e6;
  /**
   * Use for subtle supplementary interactive surfaces in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-surface-supplement-subtle-pressed: #cccccc;
  --colour-text-primary: #000; /** Use for standard text. */
  --colour-text-secondary: #666666; /** Use for de-emphasised text. */
  --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. */
  --colour-text-on-complement: #000; /** Use for text overlaid on complement surfaces. This colour persists across modes. */
  --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
   */
  --colour-text-accent-default: #0065f2;
  /**
   * Use for emphasised interactive text in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-accent-hover: #0051c2;
  /**
   * Use for emphasised interactive text in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-accent-pressed: #003d91;
  /**
   * Use for emphasised interactive text in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-accent-disabled: #99c1fa;
  --colour-text-neutral-default: #333333; /** Use for de-emphasised interactive text in a default state. */
  --colour-text-neutral-hover: #1a1a1a; /** Use for de-emphasised interactive text in a hover state. */
  --colour-text-neutral-pressed: #000; /** Use for de-emphasised interactive text in a pressed state. */
  --colour-text-neutral-disabled: #cccccc; /** Use for de-emphasised interactive text in a disabled state. */
  --colour-text-on-image-default: #fff; /** 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. */
  --colour-text-on-image-on-selected: #000; /** Use for text overlaid on on-image surfaces in a selected state. This colour persists across modes. */
  --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. */
  --colour-text-on-inverted-strong: #fff; /** Use for standard text overlaid on inverted surfaces. */
  --colour-text-on-inverted-subtle: #808080; /** 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
   */
  --colour-text-positive-default: #157340;
  /**
   * Use for positive interactive text in a hover state.
   * 
   * Legacy tags: success, action
   */
  --colour-text-positive-hover: #0e4c2a;
  /**
   * Use for positive interactive text in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --colour-text-positive-pressed: #072615;
  /**
   * Use for positive interactive text in a disabled state.
   * 
   * Legacy tags: success, action
   */
  --colour-text-positive-disabled: #a7e5c3;
  /**
   * Use for warning interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action
   */
  --colour-text-warning-default: #916b32;
  /**
   * Use for warning interactive text in a hover state.
   * 
   * Legacy tags: action
   */
  --colour-text-warning-hover: #5F3C07;
  /**
   * Use for warning interactive text in a pressed state.
   * 
   * Legacy tags: action
   */
  --colour-text-warning-pressed: #302411;
  /**
   * Use for warning interactive text in a disabled state.
   * 
   * Legacy tags: action
   */
  --colour-text-warning-disabled: #fae0ba;
  /**
   * Use for negative interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, critical
   */
  --colour-text-negative-default: #c22222;
  /**
   * Use for negative interactive text in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --colour-text-negative-hover: #921919;
  /**
   * Use for negative interactive text in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --colour-text-negative-pressed: #611111;
  /**
   * Use for negative interactive text in a disabled state.
   * 
   * Legacy tags: action, critical
   */
  --colour-text-negative-disabled: #faaaaa;
  /**
   * Use primarily for complementary interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-complement-default: #fff;
  /**
   * Use for complementary interactive text in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-complement-hover: #808080;
  /**
   * Use for complementary interactive text in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-complement-pressed: #666666;
  /**
   * Use for complementary interactive text in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-complement-disabled: #cccccc;
  /**
   * Use primarily for supplementary interactive text in a default state. Can also be used sparingly for static text.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-supplement-default: #808080;
  /**
   * Use for supplementary interactive text in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-supplement-hover: #666666;
  /**
   * Use for supplementary interactive text in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-supplement-pressed: #4d4d4d;
  /**
   * Use for supplementary interactive text in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-text-supplement-disabled: #cccccc;
  --colour-icon-primary: #000; /** Use for standard icons. */
  --colour-icon-secondary: #666666; /** Use for de-emphasised icons. */
  --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. */
  --colour-icon-on-complement: #000; /** Use for icons overlaid on complement surfaces. This colour persists across modes. */
  --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
   */
  --colour-icon-accent-default: #0065f2;
  /**
   * Use for emphasised interactive icons in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-accent-hover: #0051c2;
  /**
   * Use for emphasised interactive icons in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-accent-pressed: #003d91;
  /**
   * Use for emphasised interactive icons in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-accent-disabled: #99c1fa;
  --colour-icon-neutral-default: #333333; /** Use for de-emphasised interactive icons in a default state. */
  --colour-icon-neutral-hover: #1a1a1a; /** Use for de-emphasised interactive icons in a hover state. */
  --colour-icon-neutral-pressed: #000; /** Use for de-emphasised interactive icons in a pressed state. */
  --colour-icon-neutral-disabled: #cccccc; /** Use for de-emphasised interactive icons in a disabled state. */
  --colour-icon-on-image-default: #fff; /** 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. */
  --colour-icon-on-image-on-selected: #000; /** Use for icons overlaid on on-image surfaces in a selected state. This colour persists across modes. */
  --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. */
  --colour-icon-on-inverted-strong: #fff; /** Use for standard icons overlaid on inverted surfaces. */
  --colour-icon-on-inverted-subtle: #808080; /** 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
   */
  --colour-icon-positive-default: #23bf6a;
  /**
   * Use for positive interactive icons in a hover state. 
   * 
   * Legacy tags: success, action
   */
  --colour-icon-positive-hover: #1c9955;
  /**
   * Use for positive interactive icons in a pressed state. 
   * 
   * Legacy tags: success, action
   */
  --colour-icon-positive-pressed: #157340;
  /**
   * Use for positive interactive icons in a disabled state. 
   * 
   * Legacy tags: success, action
   */
  --colour-icon-positive-disabled: #a7e5c3;
  /**
   * Use for warning interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action
   */
  --colour-icon-warning-default: #f2b253;
  /**
   * Use for warning interactive icons in a hover state.
   * 
   * Legacy tags: action
   */
  --colour-icon-warning-hover: #c28e42;
  /**
   * Use for warning interactive icons in a pressed state.
   * 
   * Legacy tags: action
   */
  --colour-icon-warning-pressed: #916b32;
  /**
   * Use for warning interactive icons in a disabled state.
   * 
   * Legacy tags: action
   */
  --colour-icon-warning-disabled: #fae0ba;
  /**
   * Use for negative interactive icons in a default state. Can also be used sparingly for static icons. 
   * 
   * Legacy tags: action, critical
   */
  --colour-icon-negative-default: #f32a2a;
  /**
   * Use for negative interactive icons in a hover state. 
   * 
   * Legacy tags: action, critical
   */
  --colour-icon-negative-hover: #c22222;
  /**
   * Use for negative interactive icons in a pressed state. 
   * 
   * Legacy tags: action, critical
   */
  --colour-icon-negative-pressed: #921919;
  /**
   * Use for negative interactive icons in a disabled state. 
   * 
   * Legacy tags: action, critical
   */
  --colour-icon-negative-disabled: #faaaaa;
  /**
   * Use primarily for complementary interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-complement-default: #fff;
  /**
   * Use for complementary interactive icons in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-complement-hover: #808080;
  /**
   * Use for complementary interactive icons in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-complement-pressed: #666666;
  /**
   * Use for complementary interactive icons in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-complement-disabled: #cccccc;
  /**
   * Use primarily for supplementary interactive icons in a default state. Can also be used sparingly for static icons.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-supplement-default: #808080;
  /**
   * Use for supplementary interactive icons in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-supplement-hover: #666666;
  /**
   * Use for supplementary interactive icons in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-supplement-pressed: #4d4d4d;
  /**
   * Use for supplementary interactive icons in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-icon-supplement-disabled: #cccccc;
  --colour-border-primary: #000; /** Use for strong borders. */
  --colour-border-secondary: #b3b3b3; /** Use for de-emphasised borders. */
  --colour-border-tertiary: #e6e6e6; /** Use for subtle borders. */
  --colour-border-inverted: #fff; /** Use for cut-out effects on overlaid elements. */
  --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. */
  --colour-border-on-complement: #000; /** Use for borders overlaid on complement surfaces. This colour persists across modes. */
  --colour-border-on-supplement: #000; /** Use for borders overlaid on supplement surfaces. This colour persists across modes. */
  --colour-border-on-image: hsl(0 0% 100% / 0.3); /** Use for borders overlaid on an image or hero. This colour persists across modes. */
  --colour-border-on-inverted: #4d4d4d; /** 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
   */
  --colour-border-accent-default: #0065f2;
  /**
   * Use for emphasised interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-hover: #0051c2;
  /**
   * Use for emphasised interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-pressed: #003d91;
  /**
   * Use for emphasised interactive borders in a focus state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-focus: #0065f2;
  /**
   * Use for emphasised interactive borders in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-disabled: #cce0fc;
  /**
   * Use primarily for subtle accent interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-subtle-default: #cce0fc;
  /**
   * Use for subtle accent interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-subtle-hover: #99c1fa;
  /**
   * Use for subtle accent interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-accent-subtle-pressed: #66a3f7;
  --colour-border-neutral-default: hsl(0 0% 50.2% / 0.11); /** Use for de-emphasised interactive borders in a default state. */
  --colour-border-neutral-hover: hsl(0 0% 50.2% / 0.19); /** Use for de-emphasised interactive borders in a hover state. */
  --colour-border-neutral-pressed: hsl(0 0% 50.2% / 0.28); /** Use for de-emphasised interactive borders in a pressed state. */
  --colour-border-neutral-disabled: hsl(0 0% 50.2% / 0.11); /** Use for de-emphasised interactive borders in a disabled state. */
  --colour-border-neutral-strong-default: #cccccc; /** Use for strong neutral interactive borders in a default state. Ideal for controls like checkbox and radio. */
  --colour-border-neutral-strong-hover: #b3b3b3; /** Use for strong neutral interactive borders in a hover state. Ideal for controls like checkbox and radio. */
  --colour-border-neutral-strong-pressed: #999999; /** 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
   */
  --colour-border-positive-default: #23bf6a;
  /**
   * Use for positive interactive borders in a hover state. 
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-hover: #1c9955;
  /**
   * Use for positive interactive borders in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-pressed: #157340;
  /**
   * Use for positive interactive borders in a focus state.
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-focus: #23bf6a;
  /**
   * Use for positive interactive borders in a disabled state.
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-disabled: #d3f2e1;
  /**
   * Use primarily for subtle positive interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-subtle-default: #d3f2e1;
  /**
   * Use for subtle positive interactive surfaces in a hover state.
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-subtle-hover: #a7e5c3;
  /**
   * Use for subtle positive interactive surfaces in a pressed state.
   * 
   * Legacy tags: success, action
   */
  --colour-border-positive-subtle-pressed: #7bd9a6;
  /**
   * Use primarily for warning interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action
   */
  --colour-border-warning-default: #f2b253;
  /**
   * Use for warning interactive borders in a hover state. 
   * 
   * Legacy tags: action
   */
  --colour-border-warning-hover: #c28e42;
  /**
   * Use for warning interactive borders in a pressed state. 
   * 
   * Legacy tags: action
   */
  --colour-border-warning-pressed: #916b32;
  /**
   * Use for warning interactive borders in a focus state.
   * 
   * Legacy tags: action
   */
  --colour-border-warning-focus: #f2b253;
  /**
   * Use for warning interactive borders in a disabled state.
   * 
   * Legacy tags: action
   */
  --colour-border-warning-disabled: #fcf0dd;
  /**
   * Use primarily for subtle warning interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action
   */
  --colour-border-warning-subtle-default: #fcf0dd;
  /**
   * Use for subtle warning interactive borders in a hover state.
   * 
   * Legacy tags: action
   */
  --colour-border-warning-subtle-hover: #fae0ba;
  /**
   * Use for subtle warning interactive borders in a pressed state.
   * 
   * Legacy tags: action
   */
  --colour-border-warning-subtle-pressed: #f7d198;
  /**
   * Use primarily for negative interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-default: #f32a2a;
  /**
   * Use for warning interactive borders in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-hover: #c22222;
  /**
   * Use for warning interactive borders in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-pressed: #921919;
  /**
   * Use for warning interactive borders in a focus state.
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-focus: #f32a2a;
  /**
   * Use for warning interactive borders in a disabled state.
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-disabled: #fdd4d4;
  /**
   * Use primarily for subtle negative interactive borders in a default state. Can also be used sparingly for static borders. 
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-subtle-default: #fdd4d4;
  /**
   * Use for subtle warning interactive borders in a hover state.
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-subtle-hover: #faaaaa;
  /**
   * Use for subtle warning interactive borders in a pressed state.
   * 
   * Legacy tags: action, critical
   */
  --colour-border-negative-subtle-pressed: #f87f7f;
  /**
   * Use primarily for complementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-default: #fff;
  /**
   * Use for complementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-hover: #808080;
  /**
   * Use for complementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-pressed: #666666;
  /**
   * Use for complementary interactive borders in a focus state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-focus: #fff;
  /**
   * Use for complementary interactive borders in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-disabled: #e6e6e6;
  /**
   * Use primarily for subtle complementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-subtle-default: #e6e6e6;
  /**
   * Use for subtle complementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-subtle-hover: #cccccc;
  /**
   * Use for subtle complementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-complement-subtle-pressed: #b3b3b3;
  /**
   * Use primarily for supplementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-default: #808080;
  /**
   * Use for supplementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-hover: #666666;
  /**
   * Use for supplementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-pressed: #4d4d4d;
  /**
   * Use for supplementary interactive borders in a focus state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-focus: #808080;
  /**
   * Use for supplementary interactive borders in a disabled state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-disabled: #e6e6e6;
  /**
   * Use primarily for subtle supplementary interactive borders in a default state. Can also be used sparingly for static borders.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-subtle-default: #e6e6e6;
  /**
   * Use for subtle supplementary interactive borders in a hover state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-subtle-hover: #cccccc;
  /**
   * Use for subtle supplementary interactive borders in a pressed state.
   * 
   * Legacy tags: action, interactive
   */
  --colour-border-supplement-subtle-pressed: #b3b3b3;
  --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. */
  --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. */
  --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. */
  --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. */
  --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. */
  --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. */
  --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. */
  --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. */
  --colour-gradient-base-stop-1: #fff; /** Used as a base gradient stop. */
  --colour-gradient-base-stop-2: hsl(0 0% 100% / 0); /** Used as a base gradient stop. */
  --typography-title-xx-large-font-weight: 900; /** Use for large titles. */
  --typography-title-xx-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for large titles. */
  --typography-title-xx-large-line-height: 4.5rem; /** Use for large titles. */
  --typography-title-xx-large-font-size: 4rem; /** Use for large titles. */
  --typography-title-xx-large-letter-spacing: 0em; /** Use for large titles. */
  --typography-title-xx-large-paragraph-spacing: 0rem; /** Use for large titles. */
  --typography-title-xx-large-text-decoration: none; /** Use for large titles. */
  --typography-title-xx-large-text-case: none; /** Use for large titles. */
  --typography-title-x-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for large titles. */
  --typography-title-x-large-font-weight: 900; /** Use for large titles. */
  --typography-title-x-large-line-height: 3.5rem; /** Use for large titles. */
  --typography-title-x-large-font-size: 3rem; /** Use for large titles. */
  --typography-title-x-large-letter-spacing: 0em; /** Use for large titles. */
  --typography-title-x-large-paragraph-spacing: 0rem; /** Use for large titles. */
  --typography-title-x-large-text-decoration: none; /** Use for large titles. */
  --typography-title-x-large-text-case: none; /** Use for large titles. */
  --typography-title-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for large titles. */
  --typography-title-large-font-weight: 900; /** Use for large titles. */
  --typography-title-large-line-height: 3rem; /** Use for large titles. */
  --typography-title-large-font-size: 2.5rem; /** Use for large titles. */
  --typography-title-large-letter-spacing: 0em; /** Use for large titles. */
  --typography-title-large-paragraph-spacing: 0rem; /** Use for large titles. */
  --typography-title-large-text-decoration: none; /** Use for large titles. */
  --typography-title-large-text-case: none; /** Use for large titles. */
  --typography-title-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for regular titles. */
  --typography-title-regular-font-weight: 900; /** Use for regular titles. */
  --typography-title-regular-line-height: 2.5rem; /** Use for regular titles. */
  --typography-title-regular-font-size: 2rem; /** Use for regular titles. */
  --typography-title-regular-letter-spacing: 0em; /** Use for regular titles. */
  --typography-title-regular-paragraph-spacing: 0rem; /** Use for regular titles. */
  --typography-title-regular-text-decoration: none; /** Use for regular titles. */
  --typography-title-regular-text-case: none; /** Use for regular titles. */
  --typography-title-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for small titles. */
  --typography-title-small-font-weight: 900; /** Use for small titles. */
  --typography-title-small-line-height: 2rem; /** Use for small titles. */
  --typography-title-small-font-size: 1.5rem; /** Use for small titles. */
  --typography-title-small-letter-spacing: 0em; /** Use for small titles. */
  --typography-title-small-paragraph-spacing: 0rem; /** Use for small titles. */
  --typography-title-small-text-decoration: none; /** Use for small titles. */
  --typography-title-small-text-case: none; /** Use for small titles. */
  --typography-title-x-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for small titles. */
  --typography-title-x-small-font-weight: 900; /** Use for small titles. */
  --typography-title-x-small-line-height: 1.75rem; /** Use for small titles. */
  --typography-title-x-small-font-size: 1.25rem; /** Use for small titles. */
  --typography-title-x-small-letter-spacing: 0em; /** Use for small titles. */
  --typography-title-x-small-paragraph-spacing: 0rem; /** Use for small titles. */
  --typography-title-x-small-text-decoration: none; /** Use for small titles. */
  --typography-title-x-small-text-case: none; /** Use for small titles. */
  --typography-title-xx-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for small titles. */
  --typography-title-xx-small-font-weight: 900; /** Use for small titles. */
  --typography-title-xx-small-line-height: 1.5rem; /** Use for small titles. */
  --typography-title-xx-small-font-size: 1.125rem; /** Use for small titles. */
  --typography-title-xx-small-letter-spacing: 0em; /** Use for small titles. */
  --typography-title-xx-small-paragraph-spacing: 0rem; /** Use for small titles. */
  --typography-title-xx-small-text-decoration: none; /** Use for small titles. */
  --typography-title-xx-small-text-case: none; /** Use for small titles. */
  --typography-body-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for large body text. */
  --typography-body-large-font-weight: 400; /** Use for large body text. */
  --typography-body-large-line-height: 1.75rem; /** Use for large body text. */
  --typography-body-large-font-size: 1.25rem; /** Use for large body text. */
  --typography-body-large-letter-spacing: 0em; /** Use for large body text. */
  --typography-body-large-paragraph-spacing: 0rem; /** Use for large body text. */
  --typography-body-large-text-decoration: none; /** Use for large body text. */
  --typography-body-large-text-case: none; /** Use for large body text. */
  --typography-body-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for regular body text. */
  --typography-body-regular-font-weight: 400; /** Use for regular body text. */
  --typography-body-regular-line-height: 1.5rem; /** Use for regular body text. */
  --typography-body-regular-font-size: 1rem; /** Use for regular body text. */
  --typography-body-regular-letter-spacing: 0em; /** Use for regular body text. */
  --typography-body-regular-paragraph-spacing: 0rem; /** Use for regular body text. */
  --typography-body-regular-text-decoration: none; /** Use for regular body text. */
  --typography-body-regular-text-case: none; /** Use for regular body text. */
  --typography-body-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for small body text. */
  --typography-body-small-font-weight: 400; /** Use for small body text. */
  --typography-body-small-line-height: 1.25rem; /** Use for small body text. */
  --typography-body-small-font-size: 0.875rem; /** Use for small body text. */
  --typography-body-small-letter-spacing: 0em; /** Use for small body text. */
  --typography-body-small-paragraph-spacing: 0rem; /** Use for small body text. */
  --typography-body-small-text-decoration: none; /** Use for small body text. */
  --typography-body-small-text-case: none; /** Use for small body text. */
  --typography-body-bold-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for large emphasised body text. */
  --typography-body-bold-large-font-weight: 700; /** Use for large emphasised body text. */
  --typography-body-bold-large-line-height: 1.75rem; /** Use for large emphasised body text. */
  --typography-body-bold-large-font-size: 1.25rem; /** Use for large emphasised body text. */
  --typography-body-bold-large-letter-spacing: 0em; /** Use for large emphasised body text. */
  --typography-body-bold-large-paragraph-spacing: 0rem; /** Use for large emphasised body text. */
  --typography-body-bold-large-text-decoration: none; /** Use for large emphasised body text. */
  --typography-body-bold-large-text-case: none; /** Use for large emphasised body text. */
  --typography-body-bold-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-font-weight: 700; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-line-height: 1.5rem; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-font-size: 1rem; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-letter-spacing: 0em; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-paragraph-spacing: 0rem; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-text-decoration: none; /** Use for regular emphasised body text. */
  --typography-body-bold-regular-text-case: none; /** Use for regular emphasised body text. */
  --typography-body-bold-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for small emphasised body text. */
  --typography-body-bold-small-font-weight: 700; /** Use for small emphasised body text. */
  --typography-body-bold-small-line-height: 1.25rem; /** Use for small emphasised body text. */
  --typography-body-bold-small-font-size: 0.875rem; /** Use for small emphasised body text. */
  --typography-body-bold-small-letter-spacing: 0em; /** Use for small emphasised body text. */
  --typography-body-bold-small-paragraph-spacing: 0rem; /** Use for small emphasised body text. */
  --typography-body-bold-small-text-decoration: none; /** Use for small emphasised body text. */
  --typography-body-bold-small-text-case: none; /** Use for small emphasised body text. */
  --typography-label-x-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-line-height: 1.5rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-font-size: 1.125rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-paragraph-spacing: 0rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-large-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-line-height: 1.5rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-font-size: 1rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-paragraph-spacing: 0rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-large-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-line-height: 1.25rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-font-size: 0.875rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-paragraph-spacing: 0rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-regular-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-line-height: 1.125rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-font-size: 0.75rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-paragraph-spacing: 0rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-small-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-font-weight: 400; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-line-height: 0.875rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-font-size: 0.625rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-letter-spacing: 0em; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-paragraph-spacing: 0rem; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-text-decoration: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-x-small-text-case: none; /** Use for short single-line labels. Ideal for elements like captions. */
  --typography-label-bold-x-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-line-height: 1.5rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-font-size: 1.125rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-large-text-case: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-line-height: 1.5rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-font-size: 1rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-large-text-case: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-line-height: 1.25rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-font-size: 0.875rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-regular-text-case: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-line-height: 1.125rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-font-size: 0.75rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-small-text-case: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-line-height: 0.875rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-font-size: 0.625rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-x-small-text-case: none; /** Use for short single-line emphasised labels. Ideal for elements like button or link. */
  --typography-label-bold-caps-x-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-line-height: 1.5rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-font-size: 1.125rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-large-text-case: uppercase; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-line-height: 1.5rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-font-size: 1rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-large-text-case: uppercase; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-line-height: 1.25rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-font-size: 0.875rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-regular-text-case: uppercase; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-line-height: 1.125rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-font-size: 0.75rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-small-text-case: uppercase; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-font-weight: 700; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-line-height: 0.875rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-font-size: 0.625rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-letter-spacing: 0em; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-paragraph-spacing: 0rem; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-text-decoration: none; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-label-bold-caps-x-small-text-case: uppercase; /** Use for short single-line emphasised labels. Ideal for elements like badge. */
  --typography-tag-large-font-family: 'Akkurat LL TT', sans-serif; /** Use for large content tags. */
  --typography-tag-large-font-weight: 700; /** Use for large content tags. */
  --typography-tag-large-line-height: 1.5rem; /** Use for large content tags. */
  --typography-tag-large-font-size: 1rem; /** Use for large content tags. */
  --typography-tag-large-letter-spacing: 0.08em; /** Use for large content tags. */
  --typography-tag-large-paragraph-spacing: 0rem; /** Use for large content tags. */
  --typography-tag-large-text-decoration: none; /** Use for large content tags. */
  --typography-tag-large-text-case: uppercase; /** Use for large content tags. */
  --typography-tag-regular-font-family: 'Akkurat LL TT', sans-serif; /** Use for regular content tags. */
  --typography-tag-regular-font-weight: 700; /** Use for regular content tags. */
  --typography-tag-regular-line-height: 1.25rem; /** Use for regular content tags. */
  --typography-tag-regular-font-size: 0.875rem; /** Use for regular content tags. */
  --typography-tag-regular-letter-spacing: 0.08em; /** Use for regular content tags. */
  --typography-tag-regular-paragraph-spacing: 0rem; /** Use for regular content tags. */
  --typography-tag-regular-text-decoration: none; /** Use for regular content tags. */
  --typography-tag-regular-text-case: uppercase; /** Use for regular content tags. */
  --typography-tag-small-font-family: 'Akkurat LL TT', sans-serif; /** Use for small content tags. */
  --typography-tag-small-font-weight: 700; /** Use for small content tags. */
  --typography-tag-small-line-height: 1.125rem; /** Use for small content tags. */
  --typography-tag-small-font-size: 0.75rem; /** Use for small content tags. */
  --typography-tag-small-letter-spacing: 0.08em; /** Use for small content tags. */
  --typography-tag-small-paragraph-spacing: 0rem; /** Use for small content tags. */
  --typography-tag-small-text-decoration: none; /** Use for small content tags. */
  --typography-tag-small-text-case: uppercase; /** Use for small content tags. */
}