ID-424 WIP CSS Variables for brand colours

Don't really know where this is going but I wrote this in December and will come back to it some time.

Author: halfninja

docs/assets/site/site.less

@@ -9,4 +9,4 @@ html {
   &.site3 { .apply-site-imagery('/dist/docs/site/site3'); }
 }
 
-.apply-brand(@id7-brand-purple);
+//.apply-brand(@id7-brand-purple);

less/tokens.less

@@ -0,0 +1,14 @@
+@import (reference) "variables";
+
+// value/reference tokens - these should generally only be referred to by other tokens,
+// to allow swapping out for theming.
+:root {
+  --id7-ref-purple: @id7-brand-purple;
+  --id7-ref-purple-contrast: white;
+}
+
+// system tokens - overridden by themes
+:root {
+  --id7-sys-primary-bg: var(--id7-ref-purple);
+  --id7-sys-primary-on-bg: var(--id7-ref-)
+}