/***** Theme variables *****/

body[data-theme="dark"] {
  /* App background */
  --app-background-color:         var( --black );
  --app-background-pattern-color: var( --black-dark );
  /* App overlay */
  --app-overlay-color:          var( --black-semi-transparent );
  /* Fill color */
  --fill-color:                 var( --black-x-light );
  --fill-color-invert:          var( --white-xx-light );
  /* Ghost color */
  --ghost-color:                var( --black );
  /* Scroll-shadow */
  --scroll-shadow-bottom:       0  6px 6px -6px #5c5c5c;
  --scroll-shadow-top:          0 -6px 6px -6px #5c5c5c;
  /* Background color */
  --background-color:           var( --black-light );
  --background-color-muted:     var( --grey-x-dark );
  --background-color-highlight: var( --black-light );
  --background-color-invert:    var( --white-xx-light );
  --background-color-primary:   var( --soft-blue-xx-dark );
  --background-color-secondary: var( --soft-purple-xx-dark );
  --background-color-success:   var( --soft-green-xx-dark );
  --background-color-warning:   var( --soft-red-xx-dark );
  /* Border color */
  --border-color:               var( --black-x-light );
  --border-color-muted:         var( --black-xx-light );
  --border-color-highlight:     var( --grey-xx-dark );
  --border-color-invert:        var( --grey-x-light );
  --border-color-primary:       var( --hard-blue );
  --border-color-secondary:     var( --hard-purple );
  --border-color-success:       var( --hard-green );
  --border-color-warning:       var( --hard-red );
  /* Color */
  --color:                      var( --white-xx-dark );
  --color-muted:                var( --grey-light );
  --color-highlight:            var( --grey-x-light );
  --color-invert:               var( --black-xx-light );
  --color-primary:              var( --hard-blue-xx-dark );
  --color-secondary:            var( --hard-purple-xx-dark );
  --color-success:              var( --hard-green-xx-dark );
  --color-warning:              var( --hard-red-xx-dark );
  /* Hover color */
  --hover-color:                var( --black-xx-light );
  --hover-color-muted:          var( --grey );
  --hover-color-highlight:      var( --grey-x-light );
  --hover-color-invert:         var( --white-xx-light );
  --hover-color-primary:        var( --soft-blue-x-dark );
  --hover-color-secondary:      var( --soft-purple-x-dark );
  --hover-color-success:        var( --soft-green-x-dark );
  --hover-color-warning:        var( --soft-red-x-dark );
}

/***** Theme variables *****/



/***** Body container *****/

body[data-theme="dark"] {
  background-color: var( --app-background-color );
  color:            var( --color );
}

/***** Body container *****/