:root {
    /* base colour hues*/
    --blue: 211;
    --red: 351;
    --yellow: 55;
    --green: 128;
    --orange: 41;
    --reddishOrange: 24;
    --neutral: 0;
    --purple: 280;
    /* colours in use*/
    /* Neutrals*/
    --primaryWhite: hsl(var(--neutral),0%,100%);
    --primaryBlack: hsl(var(--neutral),0%,15%);
    --darkGrey: hsl(var(--neutral),0%,47%);
    --primaryGrey: hsl(var(--neutral),0%,66%);
    --lightGrey: hsl(var(--neutral),0%,88%);
    --lighterGrey: hsl(var(--neutral),0%,93%);
    --paleGrey: hsl(var(--neutral),0%, 98%);
    --trueBlack: hsl(var(--neutral),0%,0%);
    --primaryBlack-transparent-80: hsl(from var(--primaryBlack) h s l / 80%);
    --trueBlack-transparent-15: hsl(from var(--trueBlack) h s l / 15%);
    --trueBlack-transparent-25: hsl(from var(--trueBlack) h s l / 25%);
    --trueBlack-transparent-80: hsl(from var(--trueBlack) h s l / 80%);
    /* blues*/
    --darkBlue: hsl(var(--blue),40%,29%);
    --flexiBlue: hsl(var(--blue), 100%, 34%); /* This will probably replace darkBlue in the future*/
    --primaryBlue: hsl(var(--blue),100%,45%);
    --lightBlue: hsl(var(--blue),100%,88%);
    --paleBlue: hsl(var(--blue),100%,95%);
    --darkBlue-lighten-50: hsl(var(--blue),40%,79%);
    --darkBlue-darken-5: hsl(var(--blue),40%,24%);
    --primaryBlue-lighten-30: hsl(var(--blue),100%,75%);
    --primaryBlue-darken-5: hsl(var(--blue),100%,40%);
    /* Purples*/
    --darkPurple: hsl(var(--purple),41%,23%);
    --primaryPurple: hsl(var(--purple),25%,34%);
    --lightPurple: hsl(var(--purple),30%,47%);
    --palePurple: hsl(var(--purple),100%,96%);
    --darkPurple-lighten-30: hsl(var(--purple),41%,53%);
    --darkPurple-lighten-50: hsl(var(--purple),41%,73%);
    --darkPurple-darken-5: hsl(var(--purple),41%,18%);
    /* reds*/
    --primaryRed: hsl(var(--red),82%,48%);
    --primaryRed-lighten-8: hsl(var(--red),82%,56%);
    --primaryRed-lighten-50: hsl(var(--red),82%,98%); /* could be --paleRed, see blues */
    --primaryRed-darken-5: hsl(var(--red),82%,43%);
    /* yellows*/
    --darkYellow: hsl(var(--yellow),100%,55%);
    --primaryYellow: hsl(var(--yellow),97%,55%);
    --lightYellow: hsl(var(--yellow),100%,90%);
    /* greens*/
    --primaryGreen: hsl(var(--green),52%,47%);
    /* oranges*/
    --primaryOrange: hsl(var(--orange),82%,52%);
    /* reddish Oranges*/
    --primaryReddishOrange: hsl(var(--reddishOrange),100%,50%); /* NOT IN USE */
    /* Specials*/
    --primaryChristmas: hsl(153,28%,22%);
    --primaryKlarna: hsl(350,100%,88%);
    /* More variables go here */
    /* Font sizes */
    /* Standard Media Queries */
    /* Transitions */
}