@hue-prim: 200;
@saturation: 6%;

@bg-color-0: hsl(@hue-prim, @saturation, 7%);
@bg-color-1: hsl(@hue-prim, @saturation, 12%);
@bg-color-2: hsl(@hue-prim, @saturation, 17%);
@bg-color-3: hsl(@hue-prim, @saturation, 23%);
@bg-color-4: hsl(@hue-prim, @saturation, 28%);
@bg-color-5: hsl(@hue-prim, @saturation, 33%);
@bg-color-6: hsl(@hue-prim, @saturation, 38%);
@bg-color-7: hsl(@hue-prim, @saturation, 43%);
@bg-color-8: hsl(@hue-prim, @saturation, 48%);
@bg-color-9: hsl(@hue-prim, @saturation, 53%);


@bg-base-color: @bg-color-1;

@font-color-empph: #fff;
@font-color: hsl(0, 0, 90%);
@font-color-minor: hsl(0, 0, 80%);
@font-color-suppressed: hsl(0, 0, 65%);
@font-color-disabled: hsl(0, 0, 55%);

@border-color: @bg-color-6;

@control-color-number: #2fa1d6;
@control-color-text: #9cdaf7;
@control-bg: #303030;

@work-area-color: #808080;

@work-area-control-bar-bg-color: rgba(0, 0, 0, 0.5);
@work-area-control-bar-bg-color-active: #555;
@work-area-control-bar-font-color: @font-color-minor;

@color-danger: #b00;
@color-accent: #2B7D2B;

@color-neutral: #66727d;
@color-highlight: #003f5d;

@color-btn-selected: #285f7a;

@on-color-highlight: #5A93BBFF;
@on-color-highlight-variant-yellow: bisque;
@on-color-highlight-variant-pink: hotpink;
@on-color-highlight-variant-red: tomato;
@on-color-highlight-variant-green: springgreen;
@on-color-highlight-variant-blue: aquamarine;