/***********************************************
Colours
***********************************************/
:root {
  /* CHANGE THESE */  
    --primary-h: 203;
    --primary-s: 100%;
    --primary-l: 33%;
    
    --secondary-h: 0;
    --secondary-s: 4.3%;
    --secondary-l: 22.5%;

    --accent-h: 54.5;
    --accent-s: 15.5%;
    --accent-l: 86.1%;

    --base-h: 0;
    --base-s: 0%;
    --base-l: 20%;

    --ultra-light: 95%;
    --light: 85%;
    --dark: 25%;
    --ultra-dark: 10%;
  
  /* NO TOUCHEY */
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--ultra-light));
    --primary-light: hsl(var(--primary-h), var(--primary-s), var(--light));
    --primary-dark: hsl(var(--primary-h), var(--primary-s), var(--dark));
    --primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--ultra-dark));
    --primary-trans-90: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .9);
    --primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
    --primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
    --primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
    --primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
    --primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-light));
    --secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--light));
    --secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--dark));
    --secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-dark));
    --secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
    --secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
    --secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
    --secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
    --secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--ultra-light));
    --accent-light: hsl(var(--accent-h), var(--accent-s), var(--light));
    --accent-dark: hsl(var(--accent-h), var(--accent-s), var(--dark));
    --accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--ultra-dark));
    --accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
    --accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
    --accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
    --accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
    --accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
    --base: hsl(var(--base-h), var(--base-s), var(--base-l));
    --base-ultra-light: hsl(var(--base-h), var(--base-s), var(--ultra-light));
    --base-light: hsl(var(--base-h), var(--base-s), var(--light));
    --base-dark: hsl(var(--base-h), var(--base-s), var(--dark));
    --base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--ultra-dark));
    --base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
    --base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
    --base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
    --base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
    --base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
}