body {
  /* Base theme colours */
  --color-white: #fff;
  --color-black: #1C1E21;
  --color-true-black: #000;
  --csa-purple: #81309D;
  --csa-green: #6f9d20;
  --csa-teal: #2D999F;
  --csa-blue: #476AC4;
  --csa-red: #EC5B64;

  /* Bright colours */
  --csa-purple--bright: #AB21DA;
  --csa-green--bright: #9BE619;
  --csa-teal--bright: #26D0D9;
  --csa-blue--bright: #527AE0;
  --csa-red--bright: #EC5B64;

  /* Mid colours */
  --csa-blue--mid: #A5BEFF;
  --csa-green--mid: #BBE7C3;
  --csa-teal--mid: #C4EFEC;
  --csa-purple--mid: #cb9ff9;
  --csa-red--mid: #FFCEC9;

  /* Pastel colours */
  --csa-purple--pastel: #EFE2FC;
  --csa-green--pastel: #F5FAEB;
  --csa-teal--pastel: #E7F9F8;
  --csa-blue--pastel: #EDF2FF;
  --csa-red--pastel: #FDF1F0;

  /* Text colours */
  --csa-purple--text: #310F4B;
  --csa-green--text: #193D25;
  --csa-teal--text: var(--color-black);
  --csa-blue--text: var(--color-black);
  --csa-red--text: #34112C;

  /* Link hover colours */
  --csa-purple--link-hover: var(--csa-purple--bright);
  --csa-green--link-hover: #57810E;
  --csa-teal--link-hover: #178287;
  --csa-blue--link-hover: #4570DE;
  --csa-red--link-hover: #E52431;

  /* Accordion borders */
  --csa-purple--accordion: #E6D1FC;
  --csa-green--accordion: #C5D8A6;
  --csa-teal--accordion: #C4EFEC;
  --csa-blue--accordion: #A5BEFF;
  --csa-red--accordion: #FFCEC9;
}