@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap");

/* Global */
* {
  border: 0;
  margin: 0;
  outline: none;

  user-select: none;
  box-sizing: border-box;

  font-size: 18px;
  font-family: "Open Sans", sans-serif;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: transparent;
  border-radius: 20px;
  background-color: rgba(155, 155, 155, 0.5);
}

/* Root */
body {
  width: 100vw;
  height: 100vh;

  overscroll-behavior: none;
  background-color: #191919;
}

.svelte {
  width: 100vw;
  height: 100vh;

  overflow: none;
  background-color: #191919;
}

.theme {
  /* Typography */
  --font-small: 14px;
  --font-medium: 18px;
  --font-large: 22px;
  --font-xlarge: 24px;
  --font-xxlarge: 26px;

  /* Spacing */
  --spacing-inline: 4px;
  --spacing-default: 8px;
  --spacing-gutter: 16px;
  --spacing-bleed: 24px;
  --spacing-whitespace: 40px;
  --spacing-macro: 64px;

  /* Colors */
  --white: #ffffff;
  --black: #111111;
  --light-blue: #d2edff;
  --blue: #00a9ff;
  --dark-blue: #3784c2;
  --cyan: #63d1ea;
  --dark-cyan: #33738d;
  --teal: #429288;
  --green: #4ca043;
  --dark-green: #4ca054;
  --yellow: #e9b05f;
  --light-yellow: #fdf8c9;
  --orange: #da612b;
  --light-orange: #f8d8b0;
  --light-red: #fbb3bc;
  --red: #ee011d;
  --light-purple: #a28ff3;
  --purple: #69159f;
  --dark-purple: #270041;
  --pink: #da5797;

  /* Background */
  --primary-background: #ffffff;
  --secondary-background: #e6e6e6;

  --black: #000000;
  --dark-grey: #191919;
  --grey: #202020;
  --light-grey: #2f2f2f;

  /* Text */
  --primary-text: #333333;
  --primary-border: #e7e7e7;

  --secondary-text: #444444;
  --secondary-border: #333333;

  /* Buttons */
  --primary-button: #c5347f;
  --primary-button-hover: #9a2a64;
  --primary-button-active: #9a2a64;
  --primary-button-text: #efefef;

  --secondary-button: #202020;
  --secondary-button-hover: #3e3e3e;
  --secondary-button-active: #303030;
  --secondary-button-text: #efefef;

  --critical-button: #e15141;
  --critical-button-hover: #d24b3c;
  --critical-button-active: #c04639;
  --critical-button-text: #efefef;

  /* Errors */
  --error: #e15141;
  --success: #41e186;

  /* Focus */
  --focus: #3b7fc8;
  --hover: #f0f0f0;

  /* Dropzones */
  --dropzone: #3b7fc8;

  /* Disabled */
  --disabled: #b4b4b4;

  /* Shadows */
  --shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 2px -1px rgba(0, 0, 0, 0.8);
  --shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.8);
  --shadow-medium: 0px 4px 6px -1px rgba(0, 0, 0, 0.2),
    0px 2px 4px -2px rgba(0, 0, 0, 0.8);
  --shadow-large: 0px 10px 15px -3px rgba(0, 0, 0, 0.2),
    0px 4px 6px -4px rgba(0, 0, 0, 0.8);

  /* Spacing */
  --spacing-inline: 4px;
  --spacing-default: 8px;
  --spacing-gutter: 16px;
  --spacing-bleed: 24px;
  --spacing-whitespace: 40px;
  --spacing-macro: 64px;

  /* Borders */
  --border-radius: 3px;
  --element-radius: 15px;
}

/* Nodes */
.svelvet-node {
  box-shadow: none !important;
}