// colors
@use 'sass:color';

$color-theme-bg-dark:                   #C34C01;    // dark orange

$color-theme-bg-light:                  rgb(252, 252, 252);

$color-theme-alt-bg:                    #222222;

$color-bg-dark:                         #111111;

$color-content-bg:                      black;
$color-content-font:                    #edc;

$color-border:                          #444;

$color-code-font:                       #DE935F;
$color-code-bg:                         $color-bg-dark;
$color-code-border:                     color.scale($color-border, $lightness: -50%);

$color-menu-bg-l1:                      #222222;
$color-menu-bg-l2:                      color.scale($color-menu-bg-l1, $lightness:   5%);
$color-menu-bg-l3:                      color.scale($color-menu-bg-l1, $lightness:  10%);
$color-menu-bg-hover:                   color.scale($color-menu-bg-l1, $lightness: -20%);

$color-menu-font:                       #f0f0f0;
$color-menu-alt-font:                   #e8e8e8;
$color-menu-alt-font-hover:             color.scale($color-menu-alt-font,   $lightness:  20%);

$color-tab-active-font:                 rgb(200, 200, 200);
$color-tab-hover-font:                  color.scale($color-tab-active-font, $lightness:  20%);
$color-tab-font:                        color.scale($color-tab-active-font, $lightness: -30%);

$color-widget-border:                   $color-border;

$color-widget-output-area:              rgb(23, 23, 23);

$color-widget-info:                     rgb(234, 234, 234);

$color-settingsbar-bg:                  rgb(50, 50, 50);
