:root {
   /* field: near white contrast near black */
   --colour-canvas-light-h: 0;
   --colour-canvas-light-s: 0%;
   --colour-canvas-light-l: 95%;
   --colour-canvas-dark-h: 0;
   --colour-canvas-dark-s: 0;
   --colour-canvas-dark-l: 5%;
   --colour-canvas-light: hsl(var(--colour-canvas-light-h), var(--colour-canvas-light-s), var(--colour-canvas-light-l));
   /* TODO: BUG: seems that when both are HSL, chrome resolves it transparent? needs investigation and repro */
   /*--colour-canvas-dark: hsl(var(--colour-canvas-dark-h), var(--colour-canvas-dark-s), var(--colour-canvas-dark-l));*/
   --colour-canvas-dark: #111;
   --colour-canvas: light-dark(var(--colour-canvas-light), var(--colour-canvas-dark));

   --colour-canvas-contrast-light-h: 0;
   --colour-canvas-contrast-light-s: 0%;
   --colour-canvas-contrast-light-l: 5%;
   --colour-canvas-contrast-dark-h: 0;
   --colour-canvas-contrast-dark-s: 0%;
   --colour-canvas-contrast-dark-l: 95%;
   --colour-canvas-contrast-light: hsl(var(--colour-canvas-contrast-light-h), var(--colour-canvas-contrast-light-s), var(--colour-canvas-contrast-light-l));
   --colour-canvas-contrast-dark: hsl(var(--colour-canvas-contrast-dark-h), var(--colour-canvas-contrast-dark-s), var(--colour-canvas-contrast-dark-l));
   --colour-canvas-contrast: light-dark(var(--colour-canvas-contrast-light), var(--colour-canvas-contrast-dark));

   /* brand color 1: gold contrast white */
   --colour-brand1-h: 34;
   --colour-brand1-s: 75.8%;
   --colour-brand1-l: 54.7%;
   --colour-brand1: hsl(var(--colour-brand1-h), var(--colour-brand1-s), var(--colour-brand1-l));
   --colour-brand1-light: hsl(var(--colour-brand1-h), var(--colour-brand1-s), calc(var(--colour-brand1-l) / .9));
   --colour-brand1-dark: hsl(var(--colour-brand1-h), var(--colour-brand1-s), calc(var(--colour-brand1-l) * .9));

   --colour-brand1-contrast-h: 0;
   --colour-brand1-contrast-s: 100%;
   --colour-brand1-contrast-l: 100%;
   --colour-brand1-contrast: hsl(var(--colour-brand1-contrast-h), var(--colour-brand1-contrast-s), var(--colour-brand1-contrast-l));
   --colour-brand1-contrast-light: hsl(var(--colour-brand1-contrast-h), var(--colour-brand1-contrast-s), calc(var(--colour-brand1-contrast-l) / .9));
   --colour-brand1-contrast-dark: hsl(var(--colour-brand1-contrast-h), var(--colour-brand1-contrast-s), calc(var(--colour-brand1-contrast-l) * .9));

   /* brand color 2: charcoal contrast silver */
   --colour-brand2-h: 0;
   --colour-brand2-s: 0%;
   --colour-brand2-l: 35%;
   --colour-brand2: hsl(var(--colour-brand2-h), var(--colour-brand2-s), var(--colour-brand2-l));
   --colour-brand2-light: hsl(var(--colour-brand2-h), var(--colour-brand2-s), calc(var(--colour-brand2-l) / .9));
   --colour-brand2-dark: hsl(var(--colour-brand2-h), var(--colour-brand2-s), calc(var(--colour-brand2-l) * .9));

   --colour-brand2-contrast-h: 0;
   --colour-brand2-contrast-s: 0%;
   --colour-brand2-contrast-l: 100%;
   --colour-brand2-contrast: hsl(var(--colour-brand2-contrast-h), var(--colour-brand2-contrast-s), var(--colour-brand2-contrast-l));
   --colour-brand2-contrast-light: hsl(var(--colour-brand2-contrast-h), var(--colour-brand2-contrast-s), calc(var(--colour-brand2-contrast-l) / .9));
   --colour-brand2-contrast-dark: hsl(var(--colour-brand2-contrast-h), var(--colour-brand2-contrast-s), calc(var(--colour-brand2-contrast-l) * .9));

   --error: rgba(255, 102, 102, 0.98);
   --error-contrast: white;

   /* non-standard link colours */
   --font-color-link: #20669C;
   --font-color-link-hover: #277ccc;
}