Restructuring site.variables files for easier comphrehensibility.

src/themes/packages/default/globals/site.variables

@@ -1,5 +1,5 @@
 /*******************************
-         Site Variables
+         Site Settings
 *******************************/
 
 /*-------------------
@@ -9,6 +9,37 @@
 @imagePath : "../../themes/packages/default/assets/images";
 @fontPath  : "../../themes/packages/default/assets/fonts";
 
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont   : "Helvetica Neue", Arial, Helvetica, sans-serif;
+
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@blue             : #0074D9;
+@green            : #2ECC40;
+@orange           : #FF851B;
+@pink             : #D9499A;
+@purple           : #564F8A;
+@red              : #FF4136;
+@teal             : #39CCCC;
+@yellow           : #FFCB08;
+
+@black            : #333333;
+@grey             : #CCCCCC;
+@white            : #FFFFFF;
+
+@primaryColor     : @teal;
+@secondaryColor   : @black;
+@tertiaryColor    : @orange;
+
+
 /*-------------------
         Page
 --------------------*/
@@ -27,6 +58,7 @@
 @highlightBackground : #FFFFCC;
 @highlightColor      : @textColor;
 
+
 /*-------------------
         Grid
 --------------------*/
@@ -78,12 +110,23 @@
 @largeMonitorBreakpoint      : 1400px;
 @widescreenMonitorBreakpoint : 1900px;
 
+
+/*******************************
+           Power-User
+*******************************/
+
 /*-------------------
-       Fonts
+       BG Colors
 --------------------*/
 
-@headerFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
-@pageFont   : "Helvetica Neue", Arial, Helvetica, sans-serif;
+@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
+@transparentBlack       : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+
+@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
+@transparentWhite       : rgba(255, 255, 255, 0.05);
+@strongTransparentWhite : rgba(255, 255, 255, 0.01);
+
 
 /*-------------------
        Icons
@@ -98,34 +141,7 @@
 
 @defaultEasing: ease;
 
-
-/*******************************
-           BG Colors
-*******************************/
-
-@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
-@transparentBlack       : rgba(0, 0, 0, 0.05);
-@strongTransparentBlack : rgba(0, 0, 0, 0.10);
-
-@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
-@transparentWhite       : rgba(255, 255, 255, 0.05);
-@strongTransparentWhite : rgba(255, 255, 255, 0.01);
-
-
-/*******************************
-             Colors
-*******************************/
-
-/*---  Colors  ---*/
-@blue             : #0074D9;
-@green            : #2ECC40;
-@orange           : #FF851B;
-@pink             : #D9499A;
-@purple           : #564F8A;
-@red              : #FF4136;
-@teal             : #39CCCC;
-@yellow           : #FFCB08;
-
+/*---  Light Variations  ---*/
 @lightBlue        : #54C8FF;
 @lightGreen       : #2ECC40;
 @lightOrange      : #FF851B;
@@ -135,26 +151,15 @@
 @lightTeal        : #6DFFFF;
 @lightYellow      : #FFE21F;
 
-@primaryColor     : @teal;
-@secondaryColor   : @black;
-@tertiaryColor    : @orange;
-
-/*---  Neutrals  ---*/
+/*---   Neutrals  ---*/
 @darkBlack        : #232323;
-@black            : #333333;
 @lightBlack       : #555555;
-
 @darkGrey         : #AAAAAA;
-@grey             : #CCCCCC;
 @lightGrey        : #DCDDDE;
-
-@white            : #FFFFFF;
 @offWhite         : #FAFAFA;
 @darkWhite        : #F0F0F0;
 
 /*--- Text Colors ---*/
-
-/* Preserve */
 @blueTextColor    : @blue;
 @greenTextColor   : @green;
 @orangeTextColor  : @orange;
@@ -162,9 +167,7 @@
 @purpleTextColor  : @purple;
 @redTextColor     : @red;
 @tealTextColor    : @teal;
-
-/* Adjust for Legibility */
-@yellowTextColor  : #EAB600;
+@yellowTextColor  : #EAB600; // Yellow text illegible
 
 /*--- Backgrounds ---*/
 @blueBackground   : #D3E4F3;
@@ -209,9 +212,8 @@
 @successTextColor        : @positiveTextColor;
 @errorTextColor          : @negativeTextColor;
 
-
 /*-------------------
-     Text Colors
+     Neutral Text
 --------------------*/
 
 @darkTextColor               : rgba(0, 0, 0, 0.85);