:root {
  --color-beige: #F7F4EA;
  --color-beige-dark: #EFEBDB;
  --color-beige-light: rgb(245, 233, 208);
  --color-black: #2C2D32;
  --color-black-original: #06070e;
  --color-black-light: #141414;
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-blue-flashy: #470ff4;
  --color-blue-light: #7b8cde;
  --color-blue-light-10: #F2F3FC;
  --color-gray: #828a95;
  --color-gray-dark: #505254;
  --color-gray-light: #e8e9eb;
  --color-gray-medium: #cfd0d1;
  --color-gray-50: rgba(130, 138, 149, 0.5);
  --color-green-success: #0c8346;
  --color-green-light: #C5EBC3;
  --color-orange-warn: #e88d67;
  --color-pink: #e6adec;
  --color-plum: #563440;
  --color-red-error: #a4303f;
  --color-red-error-darker: #5a0000;
  --color-red-flashy: #db2121;
  --color-white: #ffffff;
  --color-white-dark: #f8f8f8;
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.5);

  --color-primary-yop: var(--color-blue-flashy);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-max: 80px;

  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --shadow-dropdown: 0px 16px 24px -6px rgba(0, 0, 0, 0.1);
  --shadow-popup: 0px 16px 46px -6px rgba(0, 0, 0, 0.25);
  --shadow-sortable: 0px 24px 36px -6px rgba(0, 0, 0, 0.1);

  --gradient-blue: linear-gradient(90deg, #470FF4 0%, #E88D67 100%);
  --gradient-blue-to-black: linear-gradient(90deg, #470FF4 0%, #130A35 100%);
  --gradient-blue-to-white: linear-gradient(90deg, #4e18f3 0%, #c4b2ed 100%);
  --gradient-orange: linear-gradient(90deg, #CAD3B2 0%, #E88D67 100%);
}