Integrate light theme's `gray-lightest` using a media query

modules/doc/public/css/module.less

@@ -2,7 +2,7 @@
 
 // Mixins
 
-.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: @gray-lightest) {
+.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: ~"var(--gray-lightest, @{gray-lightest})") {
   background: extract-variable-default(@a);
   background: @a;
   background: -webkit-gradient(linear, left top, left bottom, from(extract-variable-default(@a, true)), to(extract-variable-default(@b, true)));

public/css/icinga/base.less

@@ -129,6 +129,7 @@
     --gray-semilight: #A9A9A9;
     --gray-light: #C9C9C9;
     --gray-lighter: #EEEEEE;
+    --gray-lightest: #F7F7F7;
   }
 }
 
@@ -203,7 +204,7 @@ h6 {
 }
 
 pre {
-  background-color: @gray-lightest;
+  .var(background-color, gray-lightest);
   font-family: @font-family-fixed;
   font-size: @font-size-small;
   padding: @vertical-padding @horizontal-padding;

public/css/icinga/forms.less

@@ -301,7 +301,7 @@ form.icinga-form .form-controls {
 
   button.noscript-apply {
     .var(color, "gray");
-    background-color: @gray-lightest;
+    .var(background-color, gray-lightest);
     .var(border-color, "gray");
     border-width: 1px;
   }

public/css/icinga/main.less

@@ -110,7 +110,7 @@ a:hover > .icon-cancel {
     margin-bottom: 0.25em;
 
     &:hover {
-      background-color: @gray-lightest;
+      .var(background-color, gray-lightest);
 
       > .remove-action {
         visibility: visible;
@@ -168,7 +168,8 @@ a:hover > .icon-cancel {
   }
 
   tbody tr {
-    border-bottom: 1px solid @gray-lightest;
+    border-bottom: 1px solid;
+    .var(border-bottom-color, gray-lightest);
     border-left: 5px solid transparent;
 
     &:last-child {

public/css/icinga/setup.less

@@ -423,7 +423,7 @@ form#setup_requirements {
     padding: 0.3em;
     border: 1px solid;
     .var(border-color, gray-semilight);
-    background-color: @gray-lightest;
+    .var(background-color, gray-lightest);
 
     .header {
       height: 2.5em;

public/css/icinga/widgets.less

@@ -196,7 +196,7 @@ table.multiselect tr[href] td {
     }
 
     ul.tree li.active {
-      background-color: @gray-lightest;
+      .var(background-color, gray-lightest);
     }
 
     button {

public/css/themes/icinga-light-theme.less

@@ -1,2 +0,0 @@
-
-@gray-lightest: #F7F7F7;