:root {
	--color-official-background:         #f8f9fb;
	--color-official-background-2:       #fdfdff;
	--color-official-background-3:       #dbeeff;
	--color-official-border:             #b7c6dc;
	--color-official-accent:             #2c4fa7;
	--color-official-accent-disabled:    #85a3db;
	--color-official-text:               #2c2c2c;
	--color-official-grey-text:          #6b8399;
	--color-official-inverted-text:      #fafefa;
	--color-official-success:            #0d6ad7;
	--color-official-success-accent:     #0d6ad7;
	--color-official-warning:            #c27f1f;
	--color-official-warning-accent:     #d9c27a;
	--color-official-error:              #e34c4c;
	--color-official-error-accent:       #f1cfbf;

	--color-card:                        var(--color-official-background-2);
	--color-card-border:                 var(--color-official-border);
	--color-card-text:                   var(--color-official-text);
	--color-card-error:                  var(--color-official-background-2);
	--color-card-error-border:           var(--color-official-error-accent);
	--color-card-error-text:             var(--color-official-text);
	--color-card-warning:                var(--color-official-background);
	--color-card-warning-border:         var(--color-official-warning-accent);
	--color-card-warning-text:           var(--color-official-text);
	--color-card-success:                var(--color-official-background);
	--color-card-success-border:         var(--color-official-text);
	--color-card-success-text:           var(--color-official-text);
	--color-card-disabled:               var(--color-official-background);
	--color-card-disabled-border:        var(--color-official-background);
	--color-card-disabled-text:          var(--color-official-text);
	--color-card-active:                 var(--color-official-background-3);

	--color-body-background:             var(--color-official-background);
	--color-header-background:           var(--color-official-background);
	--color-inner-background:            var(--color-official-background-2);
	--color-text:                        var(--color-official-text);
	--color-grey-text:                   var(--color-official-grey-text);
	--color-inner-text:                  var(--color-official-text);
	--color-light-text:                  var(--color-official-border);
	--color-darkener:                    rgba(0, 0, 0, 0.5);

	--color-button-background:           var(--color-official-background-2);
	--color-button-border:               var(--color-official-border);
	--color-button-text:                 var(--color-official-text);
	--color-active-button-background:    var(--color-official-success);
	--color-active-button-border:        var(--color-official-success-accent);
	--color-active-button-text:          var(--color-official-inverted-text);
	--color-card-button-background:      var(--color-official-background);
	--color-card-button-border:          var(--color-official-border);
	--color-card-button-text:            var(--color-official-text);
	--color-primary-button-background:   var(--color-official-accent);
	--color-primary-button-border:       var(--color-official-accent);
	--color-primary-button-text:         var(--color-official-inverted-text);
	--color-disabled-primary-button-background:  var(--color-official-accent-disabled);
	--color-disabled-primary-button-border:      var(--color-official-accent);
	--color-disabled-primary-button-text:        var(--color-official-inverted-text);

	--color-border:                      var(--color-official-border);
	--color-border-bold:                 var(--color-official-text);
	--color-inner-border:                var(--color-official-text);
	--color-inactive-background:         var(--color-official-background);

	--color-active-light:                var(--color-official-accent);
	--color-light-button:                var(--color-official-accent);
	--color-green:                       var(--color-official-success);
	--color-green-button:                var(--color-official-success);
	--color-red:                         var(--color-official-error);
	--color-red-button:                  var(--color-official-background);
	--color-red-button-border:           var(--color-official-error-accent);
	--color-red-button-text:             var(--color-official-error);
	--color-yellow:                      var(--color-official-warning);
	--color-orange-bold:                 var(--color-official-warning);
	--color-text-red:                    var(--color-official-error);
	--color-text-orange:                 var(--color-official-warning);
	--color-text-green:                  var(--color-official-success);

	--gradient-button-background-active: var(--color-official-accent);
	--border-card:                       0.1rem 0.1rem 0.25rem 0.1rem;
	--gradient-shadow:
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
		rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}