:root {
  // These are the colors of the MetaMask design system
  // Only design system colors should be added, no superfluous variables
  --Blue-300: #43aefc;
  --Blue-400: #1098fc;
  --Blue-500: #037dd6;
  // Greys
  --Grey-000: #f2f3f4;
  --Grey-100: #d6d9dc;
  --Grey-200: #bbc0c5;
  --Grey-400: #848c96;
  --Grey-500: #6a737d;
  // Reds
  --Red-000: #fcf2f3;
  --Red-300: #e88f97;
  --Red-500: #d73a49;
  // Orange
  --Orange-500: #f66a0a;
  // Yellow
  --Yellow-100: #fefcde;
  --Yellow-500: #ffd33d;
  // Black
  --Black-100: #24292e;
  // Primary colors
  --primary-blue: var(--Blue-500);
  // Accents
  --accent-red: var(--Red-500);
  // Everything below this line is part of the new color system
  --primary-1: #037dd6;
  --secondary-1: #f66a0a;
  --secondary-3: #c65507;
  --error-1: #d73a49;
  --alert-1: #ffd33d;
  --success-1: #4cd964;
  --success-3: #219e37;
  --ui-black: #24292e;
  --ui-grey: #d6d9dc;
  --ui-white: #fff;
  --ui-1: #f2f3f4;
  --ui-2: #d6d9dc;
  --ui-3: #bbc0c5;
  --ui-4: #6a737d;
  --ui-5: #c4c4c4;
  --mainnet: #29b6af;
  --ropsten: #ff4a8d;
  --kovan: #9064ff;
  --rinkeby: #f6c343;
  --goerli: #3099f2;
  --localhost: #29b6af;
  --flask-purple: #8b45b6;
}

/* Deprecated colors */
:root {
  --white: #fff;
  --black: #000;
  --orange: #ffa500;
  --red: #f00;
  --gray: #808080;

  /*
    Colors
    http://chir.ag/projects/name-that-color
  */

  --dusty-gray: #9b9b9b;
  --alto: #dedede;
  --alabaster: #fafafa;
  --silver-chalice: #aeaeae;
  --tundora: #4d4d4d;
  --scorpion: #5d5d5d;
  --silver: #cdcdcd;
  --monzo: #d0021b;
  --malibu-blue: #b8cbd8;
  --athens-grey: #e9edf0;
  --geyser: #d2d8dd;
  --mid-gray: #5b5d67;
  --dodger-blue: #3099f2;
}