Use the right palette variables across webapp

[latin-panda]

Describe the issue
There is a comment that says:

Basic colors. WARNING: Don't use these outside this file as the variable names are not useful

But it's easily ignorable, also, in many places we're using the wrong variables for colors, we should use the palette.

Describe the improvement you'd like
Make more difficult to use the wrong color variables.

Describe alternatives you've considered
LESS doesn't have private variables, a workaround is to move the ones that we can’t use but that are needed for variable.less to a file named private-vars.less, so variable.less is the only one to import it.

[latin-panda]

The variables in private-vars.less are still accessible anywhere that imports variable.less, so this idea doesn't work. However having them in 2 files might help devs to understand the right way of using them

[latin-panda]

This is ready for AT here I feel very confident about the change, the app's color should still be the same as in master.

[lorerod]

Environment
Client platform: MacOS
Browser: Chrome
App: Webapp
Versions 1: 4.0.0
Instance: Local using cht-core.yml and cht-couchdb.yml

Versions 2: Branch7862-private-color-variables
Instance: Local using Developer setup

The app's colors look the same in both versions.

[latin-panda]

Thanks @lorerod!

This has been merged to our main branch.