@primary: #a272c4;

:root {
  --color-primary: @primary !important;
  
  --color-primary-dark-1: darken(@primary, 5%) !important;
  --color-primary-dark-2: darken(@primary, 10%) !important;
  --color-primary-dark-3: darken(@primary, 15%) !important;
  --color-primary-dark-4: darken(@primary, 20%) !important;
  --color-primary-dark-5: darken(@primary, 25%) !important;
  --color-primary-dark-6: darken(@primary, 30%) !important;
  --color-primary-dark-7: darken(@primary, 35%) !important;

  --color-primary-light-1: lighten(@primary, 5%) !important;
  --color-primary-light-2: lighten(@primary, 10%) !important;
  --color-primary-light-3: lighten(@primary, 15%) !important;
  --color-primary-light-4: lighten(@primary, 20%) !important;
  --color-primary-light-5: lighten(@primary, 25%) !important;
  --color-primary-light-6: lighten(@primary, 30%) !important;
  --color-primary-light-7: lighten(@primary, 35%) !important;

  --color-primary-alpha-10: fadeout(@primary, 10%) !important;
  --color-primary-alpha-20: fadeout(@primary, 20%) !important;
  --color-primary-alpha-30: fadeout(@primary, 30%) !important;
  --color-primary-alpha-40: fadeout(@primary, 40%) !important;
  --color-primary-alpha-50: fadeout(@primary, 50%) !important;
  --color-primary-alpha-60: fadeout(@primary, 60%) !important;
  --color-primary-alpha-70: fadeout(@primary, 70%) !important;
  --color-primary-alpha-80: fadeout(@primary, 80%) !important;
  --color-primary-alpha-90: fadeout(@primary, 90%) !important;
}

.ui.green.button {
  background-color: var(--color-primary);
}

.ui.green.button:hover, .ui.green.button:focus {
  background-color: var(--color-primary-dark-2);
}