:root {
  /* Colours */
  --c-primary-dark: #201e26;
  --c-primary-blue: #3a11c8;
  --c-primary-light: #ffffff;
  --c-primary-orange: #fc6155;

  --c-tertiary-orange: #fd8f87;

  --c-grey: #67748a;
  --c-light-grey: #f3f5f7;
  --c-dark-80: #4D4B51;
  --c-dark-60: #79786D;
  --c-dark-40: #a6a5ab;
  --c-dark-20: #d2d2d4;
  --c-dark-grey: #2B2C35;

  /* Tints */
  --c-t-blue-80: #6141d3;
  --c-t-blue-60: #8970de;
  --c-t-blue-40: #b0a0e9;
  --c-t-blue-20: #d8cff4;
  --c-t-blue-05: #f5f3fc;

  --c-t-grey-80: #8590a1;
  --c-t-grey-60: #a4acb9;
  --c-t-grey-40: #c2c7d0;
  --c-t-grey-20: #e1e3e8;

  --c-body-primary: var(--c-primary-dark);
  --c-body-secondary: var(--c-grey);
  --c-body-invert: var(--c-primary-light);
  --c-heading-primary: var(--c-primary-light);
  --c-heading-secondary: var(--c-primary-blue);
  --c-heading-invert: var(--c-primary-light);

  --bg-primary: var(--c-primary-blue);
  --bg-secondary: var(--c-grey);
  --bg-tertiary: var(--c-light-grey);
  --bg-light: var(--c-primary-light);
  --bg-dark: var(--c-primary-dark);

  --icon-light: var(--c-primary-light);
  --icon-blue: var(--c-primary-blue);
  --icon-dark: var(--c-primary-dark);
  --icon-orange: var(--c-primary-orange);

  --button-primary-bg: var(--bg-light);
  --button-primary-color: var(--c-body-primary);
  --button-secondary-bg: var(--bg-dark);
  --button-secondary-color: var(--c-primary-light);
  --button-tertiary-bg: var(--c-primary-orange);
  --button-tertiary-color: var(--c-body-primary);
}

/* Background colour utility classes */
.c-bg--blue {
  background-color: var(--c-primary-blue);
  color:  var(--c-primary-light);
}

.c-bg--blue h1,
.c-bg--blue h2,
.c-bg--blue h3,
.c-bg--blue h4,
.c-bg--blue h5,
.c-bg--blue h6,
.c-bg--blue .heading--h1,
.c-bg--blue .heading--h2,
.c-bg--blue .heading--h3,
.c-bg--blue .heading--h4,
.c-bg--blue .heading--h5,
.c-bg--blue .heading--h6,
.c-bg--blue p {
  color:  var(--c-primary-light);
}

.c-bg--dark {
  background-color: var(--c-primary-dark);
  color:  var(--c-primary-light);
}

.c-bg--dark h1,
.c-bg--dark h2,
.c-bg--dark h3,
.c-bg--dark h4,
.c-bg--dark h5,
.c-bg--dark h6,
.c-bg--dark .heading--h1,
.c-bg--dark .heading--h2,
.c-bg--dark .heading--h3,
.c-bg--dark .heading--h4,
.c-bg--dark .heading--h5,
.c-bg--dark .heading--h6,
.c-bg--dark p {
  color:  var(--c-primary-light);
}

.c-bg--white {
  background-color: var(--c-primary-light);
  color: var(--c-primary-dark);
}

.c-bg--white h1,
.c-bg--white h2,
.c-bg--white h3,
.c-bg--white h4,
.c-bg--white h5,
.c-bg--white h6,
.c-bg--white .heading--h1,
.c-bg--white .heading--h2,
.c-bg--white .heading--h3,
.c-bg--white .heading--h4,
.c-bg--white .heading--h5,
.c-bg--white .heading--h6 {
  color: var(--c-primary-blue);
}

.c-bg--white p {
  color: var(--c-primary-dark);
}

.c-bg--orange {
  background-color: var(--c-primary-orange);
  color: var(--c-primary-dark);
}

.c-bg--orange h1,
.c-bg--orange h2,
.c-bg--orange h3,
.c-bg--orange h4,
.c-bg--orange h5,
.c-bg--orange h6,
.c-bg--orange .heading--h1,
.c-bg--orange .heading--h2,
.c-bg--orange .heading--h3,
.c-bg--orange .heading--h4,
.c-bg--orange .heading--h5,
.c-bg--orange .heading--h6,
.c-bg--orange p {
  color: var(--c-primary-dark);
}

span.orange {
  display: inline-block;
  color: var(--c-tertiary-orange);
}