:root {
  --color-black: #020405;
  --color-white: #FFFFFF;
  --color-white-opacity50: #FFFFFF90;
  --color-gray0-5: #EDF0F2;
  --color-gray1: #DFE6ED;
  --color-gray1-5: #B0BFCF;
  --color-gray1-5-opacity25: #B0BFCF40;
  --color-gray2: #748FA8;
  --color-gray2-5: #556D85;
  --color-gray3: #3B5166;
  --color-gray4: #1B2A39;
  --color-gray4-opacity50: #1B2A3990;
  --color-action: #2860F0;
  --color-action-dark-background: #D16200;
  --color-action-opacity50: #2860F090;
  --color-danger: #D12323;
  --color-danger-dark-background: #a21b1bbf;
  --color-danger-light: #f96666bf;
  --color-danger-opacity10: #D123231A;
  --color-success-opacity10: #1295011A;
  --color-success: #129501;
  --color-success-light: #25b213;
  --color-warning: #DE6800;
  --color-warning-opacity10: #FC80121A;
  --color-dark-blue: #1B2A39;
  --color-light-blue: #6A89AA;
  --color-dark-orange: #D16200;
  --color-dark-orange-opacity50: #D1620090;
  --color-orange-opacity10: #FC80121A;
}

.bg-white {
  background-color: var(--color-white);
}

.bg-white-opacity-blur {
  background-color: var(--color-white-opacity50);
  backdrop-filter: blur(0.5rem);
}

.bg-gray-opacity-blur {
  background-color: var(--color-gray1-5-opacity25);
  backdrop-filter: blur(0.5rem);
}

.bg-gray0-5 {
  background-color: var(--color-gray0-5);
}

.bg-gray1 {
  background-color: var(--color-gray1);
}

.bg-gray3 {
  background-color: var(--color-gray3);
}

.dark-opacity-blur {
  background-color: var(--color-gray4-opacity50);
  backdrop-filter: blur(1rem);
}

.dark-drop-shadow {
  box-shadow: 2px 4px 6px 0px #00000066;
}

.light-drop-shadow {
  box-shadow: 2px 4px 6px 0px #00000066;
}

.black {
  color: var(--color-black);
}

.gray1 {
  color: var(--color-gray1);
}

.gray1-5 {
  color: var(--color-gray1-5);
}

.gray2 {
  color: var(--color-gray2);
}

.gray2-5 {
  color: var(--color-gray2-5)
}

.gray3 {
  color: var(--color-gray3);
}

.gray4 {
  color: var(--color-gray4);
}

.color-action {
  color: var(--color-action);
}

.color-action.dark-background {
  color: var(--color-action-dark-background);
}

.color-action.opacity50 {
  color: var(--color-action-opacity50);
}

.white {
  color: var(--color-white);
}

.color-danger {
  color: var(--color-danger) !important;
}

.color-danger.dark-background {
  color: var(--color-danger-dark-background);
  mix-blend-mode: multiply;
}

.color-success {
  color: var(--color-success);
}