:root {
  /* Primary colors */
  --primary-50: #eef1ff;
  --primary-100: #c9d3ff;
  --primary-200: #afbeff;
  --primary-300: #8aa0ff;
  --primary-400: #748dff;
  --primary-500: #5171ff;
  --primary-600: #4a67e8;
  --primary-700: #3a50b5;
  --primary-800: #2d3e8c;
  --primary-900: #222f6b;

  /* Secondary colors */
  --secondary-50: #effcfd;
  --secondary-100: #cdf6f7;
  --secondary-200: #b4f1f4;
  --secondary-300: #92ebee;
  --secondary-400: #7de7eb;
  --secondary-500: #5de1e6;
  --secondary-600: #55cdd1;
  --secondary-700: #42a0a3;
  --secondary-800: #337c7f;
  --secondary-900: #275f61;

  /* Text colors */
  --text-400: #bec1c9;
  --text-500: #9195a0;
  --text-600: #575d6c;
  --text-700: #333742;
  --text-900: #181a1f;
  --text-white: #ffffff;
  --text-disable: #dfe1e5;
  --text-link: #3b82f6;

  /* Background colors */
  --bg-white: #ffffff;
  --bg-100: #fafbfb;
  --bg-200: #f3f4f6;
  --bg-overlay: #181a1f80;
  --bg-primary: #eef1ff;

  /* Border colors */
  --border-200: #f3f4f6;
  --border-300: #dfe1e5;
  --border-500: #9195a0;
  --border-focus: #8aa0ff;
  --border-disable: #dfe1e5;

  /* Info colors */
  --info-50: #ebf3fe;
  --info-500: #3b82f6;

  /* Success colors */
  --success-50: #f0fbf0;
  --success-700: #47974c;

  /* Danger colors */
  --danger-50: #fcebeb;
  --danger-300: #e97c78;
  --danger-500: #de3b36;
  --danger-600: #ca3631;
  --danger-700: #9e2a26;

  /* Warning colors */
  --warning-50: #fdf7e6;
  --warning-600: #d5a307;

  /*Overwrite ngx-cropper*/
  --cropper-outline-color: rgba(255, 255, 255, 0.6);
}