:root {
  // Base colors
  --gray50: #080808;
  --gray75: #1a1a1a;
  --gray100: #1e1e1e;
  --gray200: #2c2c2c;
  --gray300: #393939;
  --gray400: #494949;
  --gray500: #5c5c5c;
  --gray600: #7c7c7c;
  --gray700: #a2a2a2;
  --gray800: #c8c8c8;
  --gray900: #efefef;

  --red400: #d7373f;
  --blue400: #1473e6;
  --green400: #268e6c;
  --orange400: #da7b11;
  --yellow400: #dfbf00;
  --purple400: #9256d9;

  --primary100: #704dd8;
  --primary200: lighten(#704dd8, 4%);
  --primary300: lighten(#704dd8, 8%);
  --primary400: lighten(#704dd8, 12%);
  --primary500: lighten(#704dd8, 16%);

  --text100: var(--gray900);
  --text200: var(--gray800);
  --text300: var(--gray700);
  --text400: var(--gray600);
  --text500: var(--gray500);

  --background-color: #202020;

  // Fonts
  --font-family: 'Roboto', sans-serif;
  --font-size-xsmall: 10px;
  --font-size-small: 11px;
  --font-size-normal: 12px;
  --font-size-large: 16px;
  --font-size-xlarge: 20px;

  --input-text-color: var(--text200);
  --input-border-color: var(--gray400);
  --input-bg-color: var(--gray75);
  --input-border-radius: 2px;

  --z-index-hidden: -1;
  --z-index-above: 1;
  --z-index-overlay: 2;
  --z-index-canvas: 3;
  --z-index-render-panel: 4;
  --z-index-modal-overlay: 5;
  --z-index-modal-window: 6;
  --z-index-menu: 7;
}
