:root{/*! 
    define the colours for the particular colourway here 
    white: this will be the lightest colour, used for hero headings and other, typically white text 
    */--set-white: #ffffff;/*! 
    dark: the darkest colour, used for text and backgrounds. Usually black 
    */--set-dark: #000000;/*!
    highlight-1: most prominant highlight colour, used for a wide array of elements but mainly for text on white bg
    */--set-highlight-1: #148389;/*! 
    highlight-1-contrast-friendly: a variant on the highlight-1 colour, for when the colour contrast between text and bg is not sufficient. If not in use, use highlight-1 colour here 
    */--set-highlight-1-contrast-friendly: #148389;/*! 
    highlight-2: the secondary highlight colour, used mostly for text on dark backgrounds
    */--set-highlight-2: #148389;/*! 
    highlight-2-contrast-friendly: like the similar highlight-1 version, this should be filled with highlight-2 colour when not in use 
    */--set-highlight-2-contrast-friendly: #000000}