/* Color palette */

$black1: #181818;
$black2: #282828;
$black3: #383838;

$grey1: #484848;
$grey2: #585858;
$grey3: #686868;
$grey4: #787878;
$grey5: #888888;
$grey6: #989898;
$grey7: #a8a8a8;
$grey8: #b8b8b8;
$grey9: #c8c8c8;

$white1: #d8d8d8;
$white2: #e8e8e8;
$white3: #f8f8f8;

:root {
  --black1: #{$black1};
  --black2: #{$black2};
  --black3: #{$black3};
  --grey1: #{$grey1};
  --grey2: #{$grey2};
  --grey3: #{$grey3};
  --grey4: #{$grey4};
  --grey5: #{$grey5};
  --grey6: #{$grey6};
  --grey7: #{$grey7};
  --grey8: #{$grey8};
  --grey9: #{$grey9};
  --white1: #{$white1};
  --white2: #{$white2};
  --white3: #{$white3};
}

$red: #ab4642;
$orange: #dc9656;
$yellow: #f7ca88;
$green: #a1b56c;
$cyan: #86c1b9;
$blue: #7cafc2;
$purple: #b18bba;
$pink: #d5839d;
$magenta: magenta;

/* Semantic Variables */
$canvas-background: $grey1;
$toplevel-background: $black2;

$live-value-foreground: $white1;
$live-value-background: $black3;

$http-get: $green;
$http-post: $blue;
$http-put: $orange;
$http-patch: $purple;
$http-options: $white2;
$http-delete: lighten($red, 15%);
$cron-color: $yellow;
$default-toplevel-color: $grey8;
$queue-color: $cyan;
$repl-color: $pink;
$user-functions: saturate($cyan, 10%);
$db-color: #a1887f;
$tooltip-color: lighten(saturate($cyan, 20%), 10%);
:root {
  --httpGetColor: #{$http-get};
  --httpPostColor: #{$http-post};
  --httpPutColor: #{$http-put};
  --httpPatch: #{$http-patch};
  --httpOptionsColor: #{$http-options};
  --httpDeleteColor: #{$http-delete};
  --cronColor: #{$cron-color};
  --defaultToplevelColor: #{$default-toplevel-color};
  --queueColor: #{$queue-color};
  --replColor: #{$repl-color};
  --userFunctionsColor: #{$user-functions};
  --dbColor: #{$db-color};
  --tooltipColor: #{$tooltip-color};
}
:root {
  --sidebarBgColor: #{darken($canvas-background, 10%)};
  --sidebarHoverColor: #{lighten($yellow, 10%)};
  --sidebarPrimaryColor: #{$white1};
  --sidebarSecondaryColor: #{$grey2};
}

$hover-foreground: darken($blue, 10%);
$selected-background: darken($toplevel-background, 20%);
$hover-background: #1c2e4a;

$unlock-color: lighten($green, 15%);
$lock-color: lighten($red, 10%);

$link-color: $white1;
$link-hover-color: $yellow;

$highlight-color: saturate(darken($blue, 20%), 10%);

/* Typograhy */
$code-font-size: 13.3333px;
$string-color: lighten($purple, 10%);

.placeholder {
  color: $grey2;
  font-style: italic;
  font-size: 8pt;
}

.indent {
  margin-left: 16px;
}

.string-style {
  color: $string-color;
  max-width: 120ch;
  min-height: 16px;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}

/* Sizes */
$spacing-medium: 8px;
$spacing-small: 5px;

$toplevel-min-width: 360px;
$ridiculously-large: 2000%;

/* Font Awesome Unicodes */
$fa-lock: "\f023";
$fa-unlock: "\f09c";
$fa-check: "\f00c";
$fa-times: "\f00d";
$fa-search: "\f002";
$fa-long-arrow-alt-left: "\f30a";
$fa-long-arrow-alt-right: "\f30b";
