:root {
  --spoonity-primary: #F98E58;
  --spoonity-primary-focus: #d7743b;
}

.bg-primary,
.btn.bg-primary {
  background-color: var(--spoonity-primary) !important;
  border-color: var(--spoonity-primary) !important;
}

.hover\:bg-primary-focus:hover,
.focus\:bg-primary-focus:focus,
.active\:bg-primary-focus:active {
  background-color: var(--spoonity-primary-focus) !important;
  border-color: var(--spoonity-primary-focus) !important;
}

.text-primary {
  color: var(--spoonity-primary) !important;
}

.hover\:text-primary-focus:hover {
  color: var(--spoonity-primary-focus) !important;
}

.form-input:hover,
.form-input:focus {
  border-color: var(--spoonity-primary) !important;
}

.peer:focus ~ .peer-focus\:text-primary {
  color: var(--spoonity-primary) !important;
}

.peer:focus ~ .peer-focus\:text-primary svg {
  stroke: var(--spoonity-primary) !important;
}

.dark .form-input {
  background-color: #30405f !important;
}