body.nrma {
  /* // brand colour pallette */
  --nrma-darkblue: #0a00f0;
  --nrma-blue: #2f80ed;
  --nrma-midblue: #005aff;
  --nrma-midblue-30: rgba(0, 90, 255, 0.3);
  --nrma-midblue-20: rgba(0, 90, 255, 0.2);
  --nrma-midblue-10: rgba(0, 90, 255, 0.1);
  --nrma-lightblue: #00b9ff;
  --nrma-lightmidblue: #d5f4ff;
  --nrma-verylightblue: #f2f8ff;
  --nrma-verylightmidblue: #e8f9ff;
  --nrma-orange: #fc8d48;
  --nrma-lightorange: #fdbb91;
  --nrma-peach: #fae3cc;
  --nrma-darkpeach: #d26f30;
  --nrma-verylightpeach: #fcf1e5;
  --nrma-darkgreen: #008846;
  --nrma-green: #00cf3f;
  --nrma-mediumgreen: #00d26c;
  --nrma-lightgreen: #c8ffe5;
  --nrma-verylightgreen: #e8fbf2;
  --nrma-red: #d43a3a;
  --nrma-lightred: #ffe3e3;
  --nrma-white: #ffffff;
  --nrma-black: #000000;
  --nrma-verydarkgrey: #212121;
  --nrma-darkgrey: #343434;
  --nrma-mediumgrey: #757575;
  --nrma-grey: #bdbdbd;
  --nrma-lightgrey: #e0e0e0;
  --nrma-verylightgrey: #f2f2f2;

  /* // primary brand colours */
  --primary-100: var(--nrma-midblue);
  --primary-100-30: var(--nrma-midblue-30);
  --primary-100-20: var(--nrma-midblue-20);
  --primary-100-10: var(--nrma-midblue-10);
  --primary-200: var(--nrma-midblue);
  --primary-200-30: var(--nrma-midblue-30);
  --primary-200-20: var(--nrma-midblue-20);
  --primary-200-10: var(--nrma-midblue-10);

  /* // secondary brand colours */
  --secondary-100: var(--nrma-lightblue);
  --secondary-100-30: var(--nrma-blue);
  --secondary-100-20: var(--nrma-blue);
  --secondary-100-10: var(--nrma-verylightblue);
  --secondary-200: var(--nrma-darkgreen);
  --secondary-200-30: var(--nrma-darkgreen);
  --secondary-200-20: var(--nrma-darkgreen);
  --secondary-200-10: var(--nrma-darkgreen);
  --secondary-300: var(--nrma-verylightgrey);

  /* // neutral colours */
  --neutral: var(--nrma-verydarkgrey);
  --neutral-50: var(--nrma-darkgrey);
  --neutral-40: var(--nrma-mediumgrey);
  --neutral-30: var(--nrma-grey);
  --neutral-20: var(--nrma-lightgrey);
  --neutral-10: var(--nrma-verylightgrey);

  /* // functional colours */
  --primary-text: var(--neutral);
  --primary-link: var(--primary-100);
  --primary-background: var(--white);
  --alert-success: var(--nrma-green);
  --alert-error: var(--nrma-red);

  /**
      * TYPESTYLES
      * Reference: (link to Figma)
    */

  /* // brand fonts */
  --font-body: 'GT Eesti Display', var(--font-fallback);
  --font-headings: 'GT Eesti Display', var(--font-fallback);

  /* // special variant */
  --font-special-family: 'TF Hillmark', var(--font-fallback);
  --font-special-weight: 500;
  --font-special-line-height: 1.2;
  --font-special-text-transform: initial;
  --font-special-letter-spacing: normal;

  /* // brand font types */
  --font-desktop-heading-xl-family: var(--font-headings);
  --font-desktop-heading-xl-size: 2.625rem;
  --font-desktop-heading-xl-weight: 500;
  --font-desktop-heading-xl-line-height: 1.2;
  --font-desktop-heading-xl-text-transform: none;
  --font-desktop-heading-xl-letter-spacing: normal;
  --font-desktop-heading-xl-margin-top: unset;
  --font-desktop-heading-xl-margin-bottom: 0.5rem;
  --font-mobile-heading-xl-family: var(--font-headings);
  --font-mobile-heading-xl-size: 2.625rem;
  --font-mobile-heading-xl-weight: 500;
  --font-mobile-heading-xl-line-height: 1.2;
  --font-mobile-heading-xl-text-transform: none;
  --font-mobile-heading-xl-letter-spacing: normal;
  --font-mobile-heading-xl-margin-top: unset;
  --font-mobile-heading-xl-margin-bottom: 0.5rem;
  --font-desktop-heading-l-family: var(--font-headings);
  --font-desktop-heading-l-size: 2rem;
  --font-desktop-heading-l-weight: 500;
  --font-desktop-heading-l-line-height: 1.2;
  --font-desktop-heading-l-text-transform: none;
  --font-desktop-heading-l-letter-spacing: normal;
  --font-desktop-heading-l-margin-top: unset;
  --font-desktop-heading-l-margin-bottom: 0.5rem;
  --font-mobile-heading-l-family: var(--font-headings);
  --font-mobile-heading-l-size: 2rem;
  --font-mobile-heading-l-weight: 500;
  --font-mobile-heading-l-line-height: 1.2;
  --font-mobile-heading-l-text-transform: none;
  --font-mobile-heading-l-letter-spacing: normal;
  --font-mobile-heading-l-margin-top: unset;
  --font-mobile-heading-l-margin-bottom: 0.5rem;
  --font-desktop-heading-m-family: var(--font-headings);
  --font-desktop-heading-m-size: 1.875rem;
  --font-desktop-heading-m-weight: 500;
  --font-desktop-heading-m-line-height: 1.2;
  --font-desktop-heading-m-text-transform: none;
  --font-desktop-heading-m-letter-spacing: normal;
  --font-desktop-heading-m-margin-top: unset;
  --font-desktop-heading-m-margin-bottom: 0.5rem;
  --font-mobile-heading-m-family: var(--font-headings);
  --font-mobile-heading-m-size: 1.875rem;
  --font-mobile-heading-m-weight: 500;
  --font-mobile-heading-m-line-height: 1.2;
  --font-mobile-heading-m-text-transform: none;
  --font-mobile-heading-m-letter-spacing: normal;
  --font-mobile-heading-m-margin-top: unset;
  --font-mobile-heading-m-margin-bottom: 0.5rem;
  --font-desktop-heading-s-family: var(--font-headings);
  --font-desktop-heading-s-size: 1.5rem;
  --font-desktop-heading-s-weight: 500;
  --font-desktop-heading-s-line-height: 1.2;
  --font-desktop-heading-s-text-transform: none;
  --font-desktop-heading-s-letter-spacing: normal;
  --font-desktop-heading-s-margin-top: unset;
  --font-desktop-heading-s-margin-bottom: 0.5rem;
  --font-mobile-heading-s-family: var(--font-headings);
  --font-mobile-heading-s-size: 1.5rem;
  --font-mobile-heading-s-weight: 500;
  --font-mobile-heading-s-line-height: 1.2;
  --font-mobile-heading-s-text-transform: none;
  --font-mobile-heading-s-letter-spacing: normal;
  --font-mobile-heading-s-margin-top: unset;
  --font-mobile-heading-s-margin-bottom: 0.5rem;
  --font-desktop-heading-xs-family: var(--font-headings);
  --font-desktop-heading-xs-size: 1.25rem;
  --font-desktop-heading-xs-weight: 500;
  --font-desktop-heading-xs-line-height: 1.2;
  --font-desktop-heading-xs-text-transform: none;
  --font-desktop-heading-xs-letter-spacing: normal;
  --font-desktop-heading-xs-margin-top: unset;
  --font-desktop-heading-xs-margin-bottom: 0.5rem;
  --font-mobile-heading-xs-family: var(--font-headings);
  --font-mobile-heading-xs-size: 1.25rem;
  --font-mobile-heading-xs-weight: 500;
  --font-mobile-heading-xs-line-height: 1.2;
  --font-mobile-heading-xs-text-transform: none;
  --font-mobile-heading-xs-letter-spacing: normal;
  --font-mobile-heading-xs-margin-top: unset;
  --font-mobile-heading-xs-margin-bottom: 0.5rem;
  --font-desktop-heading-xxs-family: var(--font-headings);
  --font-desktop-heading-xxs-size: 1.125rem;
  --font-desktop-heading-xxs-weight: 500;
  --font-desktop-heading-xxs-line-height: 1.2;
  --font-desktop-heading-xxs-text-transform: none;
  --font-desktop-heading-xxs-letter-spacing: normal;
  --font-desktop-heading-xxs-margin-top: unset;
  --font-desktop-heading-xxs-margin-bottom: 0.5rem;
  --font-mobile-heading-xxs-family: var(--font-headings);
  --font-mobile-heading-xxs-size: 1.125rem;
  --font-mobile-heading-xxs-weight: 500;
  --font-mobile-heading-xxs-line-height: 1.2;
  --font-mobile-heading-xxs-text-transform: none;
  --font-mobile-heading-xxs-letter-spacing: normal;
  --font-mobile-heading-xxs-margin-top: unset;
  --font-mobile-heading-xxs-margin-bottom: 0.5rem;
  --font-desktop-body-m-family: var(--font-body);
  --font-desktop-body-m-size: 1rem;
  --font-desktop-body-m-weight: 300;
  --font-desktop-body-m-line-height: 1.5;
  --font-desktop-body-m-text-transform: none;
  --font-desktop-body-m-letter-spacing: normal;
  --font-mobile-body-m-family: var(--font-body);
  --font-mobile-body-m-size: 1rem;
  --font-mobile-body-m-weight: 300;
  --font-mobile-body-m-line-height: 1.5;
  --font-mobile-body-m-text-transform: none;
  --font-mobile-body-m-letter-spacing: normal;
  --font-desktop-body-s-family: var(--font-body);
  --font-desktop-body-s-size: 16px;
  --font-desktop-body-s-weight: 400;
  --font-desktop-body-s-line-height: 1.5;
  --font-desktop-body-s-text-transform: none;
  --font-desktop-body-s-letter-spacing: normal;
  --font-mobile-body-s-family: var(--font-body);
  --font-mobile-body-s-size: 16px;
  --font-mobile-body-s-weight: 400;
  --font-mobile-body-s-line-height: 1.5;
  --font-mobile-body-s-text-transform: none;
  --font-mobile-body-s-letter-spacing: normal;
  --font-desktop-body-xs-family: var(--font-body);
  --font-desktop-body-xs-size: 14px;
  --font-desktop-body-xs-weight: 400;
  --font-desktop-body-xs-line-height: 1.5;
  --font-desktop-body-xs-text-transform: none;
  --font-desktop-body-xs-letter-spacing: normal;
  --font-mobile-body-xs-family: var(--font-body);
  --font-mobile-body-xs-size: 14px;
  --font-mobile-body-xs-weight: 400;
  --font-mobile-body-xs-line-height: 1.5;
  --font-mobile-body-xs-text-transform: none;
  --font-mobile-body-xs-letter-spacing: normal;
  --font-desktop-body-xxs-family: var(--font-body);
  --font-desktop-body-xxs-size: 12px;
  --font-desktop-body-xxs-weight: 400;
  --font-desktop-body-xxs-line-height: 1.5;
  --font-desktop-body-xxs-text-transform: none;
  --font-desktop-body-xxs-letter-spacing: normal;
  --font-mobile-body-xxs-family: var(--font-body);
  --font-mobile-body-xxs-size: 12px;
  --font-mobile-body-xxs-weight: 400;
  --font-mobile-body-xxs-line-height: 1.5;
  --font-mobile-body-xxs-text-transform: none;
  --font-mobile-body-xxs-letter-spacing: normal;

  /**
      * BUTTONS
      * Reference: (link to Figma)
    */

  /* // brand button style */
  --button-border-radius: 51px;
  --button-border-width: 1px;
  --button-box-shadow: var(--shadow);
  --button-font-weight: 500;
  --button-text-transform: initial;
  --button-letter-spacing: initial;
  --button-min-width: initial;
  --button-display-desktop: inline-flex;
  --button-display-mobile: flex;
  --button-inner-padding: 0.25em 0.375em;

  /* // brand button sizes */
  --button-large-font-size: 1.25rem;
  --button-large-padding: 0 1.5rem;
  --button-large-height: 4rem;
  --button-medium-font-size: 1rem;
  --button-medium-padding: 0 1.5rem;
  --button-medium-height: 2.75rem;
  --button-small-font-size: 0.875rem;
  --button-small-padding: 0 0.5rem;
  --button-small-height: auto;

  /* // custom button - back to top */
  --button-custom-bg: var(--nrma-lightblue);

  /* // primary action high emphasis */
  --button-primary-highem-bg: var(--nrma-orange);
  --button-primary-highem-border-color: transparent;
  --button-primary-highem-border-width: 1px;
  --button-primary-highem-text: var(--nrma-black);
  --button-primary-highem-hover-bg: var(--nrma-lightorange);
  --button-primary-highem-hover-border-color: transparent;
  --button-primary-highem-hover-border-width: 1px;
  --button-primary-highem-hover-text: var(--nrma-black);
  --button-primary-highem-focus-bg: var(--nrma-orange);
  --button-primary-highem-focus-border-color: var(--nrma-lightorange);
  --button-primary-highem-focus-border-width: 1px;
  --button-primary-highem-focus-text: var(--nrma-black);
  --button-primary-highem-disabled-bg: var(--nrma-lightgrey);
  --button-primary-highem-disabled-border-color: transparent;
  --button-primary-highem-disabled-border-width: 1px;
  --button-primary-highem-disabled-text: var(--nrma-mediumgrey);

  /* // primary action medium emphasis */
  --button-primary-midem-bg: var(--nrma-midblue);
  --button-primary-midem-border-color: transparent;
  --button-primary-midem-border-width: 1px;
  --button-primary-midem-text: var(--nrma-white);
  --button-primary-midem-hover-bg: var(--nrma-midblue-30);
  --button-primary-midem-hover-border-color: transparent;
  --button-primary-midem-hover-border-width: 1px;
  --button-primary-midem-hover-text: var(--nrma-white);
  --button-primary-midem-focus-bg: var(--nrma-midblue);
  --button-primary-midem-focus-border-color: var(--nrma-midblue-30);
  --button-primary-midem-focus-border-width: 1px;
  --button-primary-midem-focus-text: var(--nrma-white);
  --button-primary-midem-disabled-bg: var(--nrma-lightgrey);
  --button-primary-midem-disabled-border-color: transparent;
  --button-primary-midem-disabled-border-width: 1px;
  --button-primary-midem-disabled-text: var(--nrma-mediumgrey);

  /* // secondary high emphasis */
  --button-secondary-highem-bg: var(--nrma-verylightmidblue);
  --button-secondary-highem-border-color: transparent;
  --button-secondary-highem-border-width: 1px;
  --button-secondary-highem-text: var(--nrma-midblue);
  --button-secondary-highem-hover-bg: var(--nrma-midblue-20);
  --button-secondary-highem-hover-border-color: transparent;
  --button-secondary-highem-hover-border-width: 1px;
  --button-secondary-highem-hover-text: var(--nrma-midblue);
  --button-secondary-highem-focus-bg: var(--nrma-verylightmidblue);
  --button-secondary-highem-focus-border-color: var(--nrma-midblue-20);
  --button-secondary-highem-focus-border-width: 1px;
  --button-secondary-highem-focus-text: var(--nrma-midblue);
  --button-secondary-highem-disabled-bg: var(--nrma-lightgrey);
  --button-secondary-highem-disabled-border-color: transparent;
  --button-secondary-highem-disabled-border-width: 1px;
  --button-secondary-highem-disabled-text: var(--nrma-mediumgrey);

  /* // secondary high emphasis - on light background */
  --button-secondary-highem-bg-on-light: var(--button-secondary-highem-bg);
  --button-secondary-highem-border-color-on-light: var(--button-secondary-highem-border-color);
  --button-secondary-highem-border-width-on-light: var(--button-secondary-highem-border-width);
  --button-secondary-highem-text-on-light: var(--button-secondary-highem-text);
  --button-secondary-highem-hover-bg-on-light: var(--button-secondary-highem-hover-bg);
  --button-secondary-highem-hover-border-color-on-light: var(--button-secondary-highem-hover-border-color);
  --button-secondary-highem-hover-border-width-on-light: var(--button-secondary-highem-hover-border-width);
  --button-secondary-highem-hover-text-on-light: var(--button-secondary-highem-hover-text);
  --button-secondary-highem-focus-bg-on-light: var(--button-secondary-highem-focus-bg);
  --button-secondary-highem-focus-border-color-on-light: var(--button-secondary-highem-focus-border-color);
  --button-secondary-highem-focus-border-width-on-light: var(--button-secondary-highem-focus-border-width);
  --button-secondary-highem-focus-text-on-light: var(--button-secondary-highem-focus-text);
  --button-secondary-highem-disabled-bg-on-light: var(--button-secondary-highem-disabled-bg);
  --button-secondary-highem-disabled-border-color-on-light: var(--button-secondary-highem-disabled-border-color);
  --button-secondary-highem-disabled-border-width-on-light: var(--button-secondary-highem-disabled-border-width);
  --button-secondary-highem-disabled-text-on-light: var(--button-secondary-highem-disabled-text);

  /* // secondary high emphasis - on dark background */
  --button-secondary-highem-bg-on-dark: var(--button-secondary-highem-bg);
  --button-secondary-highem-border-color-on-dark: var(--button-secondary-highem-border-color);
  --button-secondary-highem-border-width-on-dark: var(--button-secondary-highem-border-width);
  --button-secondary-highem-text-on-dark: var(--button-secondary-highem-text);
  --button-secondary-highem-hover-bg-on-dark: var(--button-secondary-highem-hover-bg);
  --button-secondary-highem-hover-border-color-on-dark: var(--button-secondary-highem-hover-border-color);
  --button-secondary-highem-hover-border-width-on-dark: var(--button-secondary-highem-hover-border-width);
  --button-secondary-highem-hover-text-on-dark: var(--button-secondary-highem-hover-text);
  --button-secondary-highem-focus-bg-on-dark: var(--button-secondary-highem-focus-bg);
  --button-secondary-highem-focus-border-color-on-dark: var(--button-secondary-highem-focus-border-color);
  --button-secondary-highem-focus-border-width-on-dark: var(--button-secondary-highem-focus-border-width);
  --button-secondary-highem-focus-text-on-dark: var(--button-secondary-highem-focus-text);
  --button-secondary-highem-disabled-bg-on-dark: var(--button-secondary-highem-disabled-bg);
  --button-secondary-highem-disabled-border-color-on-dark: var(--button-secondary-highem-disabled-border-color);
  --button-secondary-highem-disabled-border-width-on-dark: var(--button-secondary-highem-disabled-border-width);
  --button-secondary-highem-disabled-text-on-dark: var(--button-secondary-highem-disabled-text);

  /* // secondary medium emphasis */
  --button-secondary-midem-bg: var(--nrma-white);
  --button-secondary-midem-border-color: var(--nrma-midblue);
  --button-secondary-midem-border-width: 1px;
  --button-secondary-midem-text: var(--nrma-black);
  --button-secondary-midem-hover-bg: var(--nrma-midblue-10);
  --button-secondary-midem-hover-border-color: var(--nrma-midblue);
  --button-secondary-midem-hover-border-width: 1px;
  --button-secondary-midem-hover-text: var(--nrma-black);
  --button-secondary-midem-focus-bg: var(--nrma-white);
  --button-secondary-midem-focus-border-color: var(--nrma-midblue);
  --button-secondary-midem-focus-border-width: 1px;
  --button-secondary-midem-focus-text: var(--nrma-black);
  --button-secondary-midem-disabled-bg: var(--nrma-white);
  --button-secondary-midem-disabled-border-color: var(--nrma-lightgrey);
  --button-secondary-midem-disabled-border-width: 1px;
  --button-secondary-midem-disabled-text: var(--nrma-mediumgrey);

  /* // secondary medium emphasis - on light background */
  --button-secondary-midem-bg-on-light: var(--button-secondary-midem-bg);
  --button-secondary-midem-border-color-on-light: var(--button-secondary-midem-border-color);
  --button-secondary-midem-border-width-on-light: var(--button-secondary-midem-border-width);
  --button-secondary-midem-text-on-light: var(--button-secondary-midem-text);
  --button-secondary-midem-hover-bg-on-light: var(--button-secondary-midem-hover-bg);
  --button-secondary-midem-hover-border-color-on-light: var(--button-secondary-midem-hover-border-color);
  --button-secondary-midem-hover-border-width-on-light: var(--button-secondary-midem-hover-border-width);
  --button-secondary-midem-hover-text-on-light: var(--button-secondary-midem-hover-text);
  --button-secondary-midem-focus-bg-on-light: var(--button-secondary-midem-focus-bg);
  --button-secondary-midem-focus-border-color-on-light: var(--button-secondary-midem-focus-border-color);
  --button-secondary-midem-focus-border-width-on-light: var(--button-secondary-midem-focus-border-width);
  --button-secondary-midem-focus-text-on-light: var(--button-secondary-midem-focus-text);
  --button-secondary-midem-disabled-bg-on-light: var(--button-secondary-midem-disabled-bg);
  --button-secondary-midem-disabled-border-color-on-light: var(--button-secondary-midem-disabled-border-color);
  --button-secondary-midem-disabled-border-widtgh-on-light: var(--button-secondary-midem-disabled-border-width);
  --button-secondary-midem-disabled-text-on-light: var(--button-secondary-midem-disabled-text);

  /* // secondary medium emphasis - on dark background */
  --button-secondary-midem-bg-on-dark: var(--button-secondary-midem-bg);
  --button-secondary-midem-border-color-on-dark: var(--button-secondary-midem-border-color);
  --button-secondary-midem-border-width-on-dark: var(--button-secondary-midem-border-width);
  --button-secondary-midem-text-on-dark: var(--button-secondary-midem-text);
  --button-secondary-midem-hover-bg-on-dark: var(--button-secondary-midem-hover-bg);
  --button-secondary-midem-hover-border-color-on-dark: var(--button-secondary-midem-hover-border-color);
  --button-secondary-midem-hover-border-width-on-dark: var(--button-secondary-midem-hover-border-width);
  --button-secondary-midem-hover-text-on-dark: var(--button-secondary-midem-hover-text);
  --button-secondary-midem-focus-bg-on-dark: var(--button-secondary-midem-focus-bg);
  --button-secondary-midem-focus-border-color-on-dark: var(--button-secondary-midem-focus-border-color);
  --button-secondary-midem-focus-border-width-on-dark: var(--button-secondary-midem-focus-border-width);
  --button-secondary-midem-focus-text-on-dark: var(--button-secondary-midem-focus-text);
  --button-secondary-midem-disabled-bg-on-dark: var(--button-secondary-midem-disabled-bg);
  --button-secondary-midem-disabled-border-color-on-dark: var(--button-secondary-midem-disabled-border-color);
  --button-secondary-midem-disabled-border-width-on-dark: var(--button-secondary-midem-disabled-border-width);
  --button-secondary-midem-disabled-text-on-dark: var(--button-secondary-midem-disabled-text);

  /* // link button - medium emphasis */
  --button-link-midem-bg: transparent;
  --button-link-midem-border-color: transparent;
  --button-link-midem-border-width: 0px;
  --button-link-midem-text: var(--nrma-midblue);
  --button-link-midem-hover-bg: transparent;
  --button-link-midem-hover-border-color: transparent;
  --button-link-midem-hover-border-width: 0px;
  --button-link-midem-hover-text: var(--nrma-midblue);
  --button-link-midem-focus-bg: transparent;
  --button-link-midem-focus-border-color: transparent;
  --button-link-midem-focus-border-width: 0px;
  --button-link-midem-focus-text: var(--nrma-midblue);
  --button-link-midem-disabled-bg: transparent;
  --button-link-midem-disabled-border-color: transparent;
  --button-link-midem-disabled-border-width: 0px;
  --button-link-midem-disabled-text: var(--nrma-mediumgrey);

  /* // link button - low emphasis */
  --button-link-lowem-bg: var(--button-link-midem-bg);
  --button-link-lowem-border-color: var(--button-link-midem-border-color);
  --button-link-lowem-border-width: var(--button-link-midem-border-width);
  --button-link-lowem-text: var(--button-link-midem-text);
  --button-link-lowem-hover-bg: var(--button-link-midem-hover-bg);
  --button-link-lowem-hover-border-color: var(--button-link-midem-hover-border-color);
  --button-link-lowem-hover-border-width: var(--button-link-midem-hover-border-width);
  --button-link-lowem-hover-text: var(--button-link-midem-hover-text);
  --button-link-lowem-focus-bg: var(--button-link-midem-focus-bg);
  --button-link-lowem-focus-border-color: var(--button-link-midem-focus-border-color);
  --button-link-lowem-focus-border-width: var(--button-link-midem-focus-border-width);
  --button-link-lowem-focus-text: var(--button-link-midem-focus-text);
  --button-link-lowem-disabled-bg: var(--button-link-midem-disabled-bg);
  --button-link-lowem-disabled-border-color: var(--button-link-midem-disabled-border-color);
  --button-link-lowem-disabled-border-width: var(--button-link-midem-disabled-border-width);
  --button-link-lowem-disabled-text: var(--button-link-midem-disabled-text);

  /**
      * OTHER COMPONENTS
      * Reference: (link to Figma)
    */

  /* // Header */
  --header-bg: var(--menu-primary-bg);
  --header-text: var(--menu-primary-text);
  --header-hover-text: var(--menu-primary-hover-text);
  --header-social-text: var(--menu-primary-text);
  --header-sticky-bg: var(--nrma-white);
  --header-sticky-text: var(--nrma-black);
  --header-sticky-hover-text: var(--white);
  --header-sticky-social-text: var(--nrma-midblue);

  /* // Footer */
  --footer-background-color: var(--nrma-white);
  --footer-text-color: var(--primary-text);
  --footer-link-color: var(--nrma-mediumgrey);
  --footer-icon-color: var(--nrma-mid-blue);
  --footer-global-background-color: var(--grey-light);
  --footer-global-text-color: var(--neutral-40);

  --header-mobile-nav-background-color: var(--white);

  /* // Menus */
  --menu-primary-text: var(--nrma-white);
  --menu-primary-bg: transparent;
  --menu-primary-hover-text: var(--nrma-white);
  --menu-primary-hover-bg: var(--nrma-darkblue);

  /* // Banners */
  --banner-peach: var(--nrma-verylightpeach);
  --banner-peach-accent: var(--nrma-orange);
  --banner-green: var(--nrma-verylightgreen);
  --banner-green-accent: var(--nrma-mediumgreen);
  --banner-blue: var(--nrma-verylightmidblue);
  --banner-blue-accent: var(--nrma-lightblue);

  /* // Message Box */
  --messagebox-info-border: var(--primary-100);
  --messagebox-info-bg: var(--nrma-verylightmidblue);
  --messagebox-warning-border: var(--nrma-darkpeach);
  --messagebox-warning-bg: var(--nrma-verylightpeach);
  --messagebox-success-border: var(--nrma-darkgreen);
  --messagebox-success-bg: var(--nrma-verylightgreen);
  --messagebox-error-border: var(--nrma-red);
  --messagebox-error-bg: var(--nrma-lightred);

  /* // Primary, Figma ref "Contextual messaging" */
  --label-primary-bg: var(--nrma-midblue);
  --label-primary-text: var(--nrma-white);

  /* // New category, Figma ref "Journey line blue" */
  --label-new-bg: var(--nrma-lightblue);
  --label-new-text: var(--black);

  --label-fomo-bg: var(--nrma-mediumgreen);
  --label-fomo-text: var(--black);

  --label-rate-bg: var(--nrma-lightgreen);
  --label-rate-text: var(--black);

  --icon-color-black: var(--nrma-black);
  --icon-color-white: var(--nrma-white);
  --icon-color-grey: var(--nrma-verylightgrey);

  --datepicker-background-color: #c8ffe5;
  --datepicker-border-color: #00cf3f;
  --datepicker-disabled-background-color: #f5f5f5;
  --datepicker-disabled-border-color: #c2c2c2;
  --datepicker-disabled-color: #8e8e8e;
  --datepicker-disabled-text-decoration: line-through;
  --datepicker-highlighted-color: #00a6e5;
  --datepicker-highlighted-color-darken-5: #009eda;
  --datepicker-muted-color: #828282;
  --datepicker-muted-color-darken-5: #7b7b7b;
  --datepicker-muted-color-darken-10: #757575;
  --datepicker-muted-color-darken-15: #6e6e6e;
  --datepicker-muted-color-lighten-10: #8e8e8e;
  --datepicker-muted-color-lighten-25: #a1a1a1;
  --datepicker-muted-color-lighten-40: #b4b4b4;
  --datepicker-selected-color: #005aff;
  --datepicker-selected-color-darken-5: #0056f2;
  --datepicker-selected-color-lighten-50: #80adff;
  --datepicker-selected-border-color: #e0e0e0;
  --datepicker-text-color: #333;
  --datepicker-header-color: #212121;
  --datepicker-white-color: #fff;
  --datepicker-font-weight: 700;
  --datepicker-border-radius: 0.3rem;

  /* // Backgrounds */
  --bg-theme: var(--nrma-lightmidblue);
  --bg-journeyline: url('../../assets/images/journeyline.svg');
  --bg-journeyline-short: url('../../assets/images/journeyline-short.svg');
  --shadow: 0 4px 5px rgba(107, 107, 107, 0.1);
  --shadow-25: 0 4px 4px rgba(0, 0, 0, 0.25);

  /**********************************/
  /*** Self service custom styles ***/
  /**********************************/
  
  --heading-text-transform: normal;
  --from-price-text-color: var(--black);

  --searchbox-bg: var(--nrma-lightmidblue);
  --searchbox-submit-bg: var(--button-primary-midem-bg);
  --searchbox-submit-border: var(--button-primary-midem-border-width) solid var(--button-primary-midem-border-color);
  --searchbox-submit-color: var(--button-primary-midem-text);
  --searchbox-submit-hover-bg: var(--button-primary-midem-hover-bg);
  --searchbox-submit-hover-border: var(--button-primary-midem-hover-border-width) solid var(--button-primary-midem-hover-border-color);
  --searchbox-submit-hover-color: var(--button-primary-midem-hover-text);

  /* // Message Box */
  --messagebox-info-border: #26559F;
  --messagebox-info-bg: #f2ffff;
  --messagebox-warning-border: #B33E3E;
  --messagebox-warning-bg:#FFE3E3;
  --messagebox-success-border: #01753C;
  --messagebox-success-bg: #E8FBF2;
  --messagebox-error-border: #B33E3E;
  --messagebox-error-bg: #FFE3E3;
}